Bits

In a sea of hyper-specific apps, Bits stands out as a one stop shop for all reading and learning needs of students, including an online bookshop, comprehensive book summaries, an interactive digital library, a reading aggregator and essential note-taking features.

Type
Graduate School Project
Scope
Interface Design
Prototyping

Team
UI + UX Designer
an army of one :)
Duration
10 weeks

Challenge

Students spend are required to manage several media and hyper-specific platforms for their reading and learning needs.

Time and cognitive capacity are precious resources in student life.

These specific tasks have the potential to be aggregated on one platform designed to serve students learning needs and increase returns on time invested.

Solution

Learning Oriented Features

Features like note-taking, annotation, highlighting etc. are part of the reader's design. Notes can also be interlinked.

Customized Interactive Bookshop

Books are curated based on student's area of study. The overall experience is designed to increase interactivity and pique curiosity.

Aggregated Reading Library

Find all readings in a personal library which functions as a living space with a plant that grows and a customizable photo frame.

My Skills Used

Visual DesignDesign StrategyConceptual ResearchBrandingUX Design

Design Process + My Role

Our course instructor had assigned us partners for this assignment. However, due to  discrepancies in our schedules and irreconcilable creative and conceptual differences, we found it extremely challenging to continue the collaboration. When we reached a point where we made no progress for over a week, we decided to part ways and work on our individual ideas.

1. Exploration

1.1 Conceptual Research

I conducted literature reviews on various forms of written media. The idea that knowledge was ‘contained’ primitive/print media such as books and newspapers came up.

I learned that when the internet flourished, knowledge escaped the printed paper to find novel, adaptive and iterative containers.

‍The book now functions as a service, unbounded to a single container, yet contained within a medium.

1.2 Competitor Analysis

I also conducted a lightweight competitor analysis on existing book summary services (links above) such as Blinkist and Storyshots, as they were conceptually most similar to my initial product USP.

Gap 1

Most services follow a subscription-based pricing model which can be needlessly binding for a student.

Gap 2

Users are unable to purchase or access the original reading/book; this is essential for students as summaries can be easily misinterpreted for academic purposes.

Gap 3

Standalone services like these result in an abundance of hyper-specific products that are only efficient in isolation; this is less than ideal for students whose time and cognitive capacity are precious and limited.

For example, one has to use at least 3 mobile applications to plan a dinner date with friends (Kuang & Fabricant, 2019).

This prompted me to change my product from a book summary service to an aggregator productivity tool oriented towards students.

2. Conception: Design Principles

DP 1.

Encompasses and supports essential learning needs of students.

Note-taking, annotating, interlinking insights etc. are intrinsic to academia, but remain to be supported by existing products.

DP 1.

Provides access to all formats (audio, text) and levels of detail (summary, full text, key insights) for the reading.

Students need access to the full text to gain a comprehensive understanding. 


Key insights allow students to identify relevant parts of the text making the full text easier to navigate.

DP 3.

Serves as a clutter-free, easy-to-navigate space to promote focus and efficiency, enhancing the learning experience.

The smallest distractions can disrupt a student's flow; it was important to maintain tidy-ness in all aspects of the design, from site-navigation to aesthetics.

3. Foundation: Brand + Visual Design

Whats in the name?

The name Bits is not just easy to pronounce.  

A bit is the smallest piece of information that a computer can make sense of.

Information broken up into little bits is easier to comprehend.
‍
The name Bits also makes for interesting wordplay for branding purposes :)

Moodboards to inspire UI elements and microinteractions

Going off of my conceptual research, I explored visual themes for containers. Almost immediately, I resonated with the tidy wire-frame-like UI style, pictured in this moodboard; it also gave me nostalgia of school text books, which felt strangely pleasant.

We subconsciously associate every activity with an aesthetic. So I also created an inspiration board for the aesthetic of studying / learning.

4. Production: UI + Microinteractions

Big Idea TL;DR: The site is designed to bring information to you, instead of making you go to it.

Introduction: Inspired by Index Cards

The purpose of index cards is to break up long text into smaller, comprehensible chunks with quick takeaways. It also added a fun, interactive element to an often overlooked page of a brand's website.

Tabs: Inspired by File Folders

In an effort to keep site navigation clear and the sitemap easy to comprehend, I eschewed the conventional drop down menus for additional layers of tabs. I leveraged opacity to differentiate inactive tabs.
The inspiration for this was file folders - all tabs on a file folder are always visible, making information finding easier.

Another example of tabs..

Inside the News Articles Folder, collections of articles aggregated from various sources are divided into collections separated by tabs.

When a collection is opened, that tab expands to reveal its articles, while the remaining tabs also remain accessible on the same page.

For more examples and a detailed understanding, check out my  pre-recorded presentation of Bits (:

<<<

Kinnection

Paired Collaborative Boards

>>>

nOS

Relationship Centered Mobile OS

Aavishii
Copyright © 2023 Aavishii Patel Saxena | Made with Webflow