Sorted

Mobile Application: UX Design

Sorted is a mobile application that helps users reliably save, organise and recall content that they need to consume at a later date. This application was designed in collaboration with Charu Bhatele as a case study to apply independently learned UX design principles, techniques and processes in a learn-by-doing format.

Design Challenge

Many people find that they cannot keep track of the movies, TV shows, music, podcasts and other content that they want to experience. Even if they manage to, it is usually all over the place across multiple apps and services. This disorder causes frustration, indecision and helplessness.

Outcomes

It empowers users by allowing them to save content for later and reassures them that during times of boredom they will engage with content that is meaningful and valuable to them.

Process Overview

DISCOVERY

The goal of this phase was to understand users’ content saving habits and what sorts of problems they faced while doing so.

User Interviews
Affinity Mapping
User Journey Mapping

STRATEGY

This stage involved assessing already existing solutions and their efficacy.

Competitive Analysis
Heuristic Evaluation
Feature Prioritisation

DESIGN

This stage dealt with producing divergent design iterations and along with the next stage, refinement and eventually converging to one design.

User Flow Mapping
Wireframing
Prototyping
UI Design

OPTIMISATION

This phase took design iterations from the previous stage and fed them back to produce more usable designs.

Usability Testing
Iterative Refinement

Skills

Empathy
UX Research
User Interviews
Affinity Mapping
User Flow Mapping
Wireframing
Prototyping
Usability Testing
UI Design

Softwares & Tools

Figma
Miro
Userbrain
Adobe Illustrator
Adobe Photoshop
Otter
Notion
Google Docs

Team

Team of Two

Role

UX Researcher
UX Designer
UI Designer

Research Kick-Off

This preliminary stage consisted of an internal brainstorming session to begin describing the problem space. There were many knowns and unknowns that needed to be cleared out.

For example, we knew that:

Most people have trouble keeping track of and saving content they find online
They often struggle with too much indecision and an overabundance of choice when they do feel like engaging with content

However we did not know:

What all of the different types of content that people engage with are
Which of these types of content people want to save and why
Whether the need to save content was important to people
The entire set of solutions that people had found or developed for themselves to tackle this problem
How effective these existing methods were
User Research Questions

The research kick-off sessions from the previous process led us to articulate the following research questions:

Which platforms do people use to consume various types of content?
What are people’s current content-saving habits like?
Are people able to recall what to consume when they want to?
How do they do this?
User Interviews

A total of 7 people were interviewed over online video calls. These consisted of friends, family and colleagues of the researchers and were considered based on the amount of content they said they consumed.

The goal was to empathise and better understand people’s content consumption and saving habits. Following are an indicative set of questions asked in the interviews:

Would you say you are a regular user of online content?

No
Yes

What different formats or platforms do you find yourself most regular on?

Movies
TV Shows
Books
Articles
Other:
Podcasts
YouTube Videos
Social Media
(FB, IG, etc.)

How satisfied are you with your current experience to save and track relevant content on different platforms?

How do you keep track of what you want to see/read and where?

To what extent does this fulfil your need?

What affected your decisions in giving the rating in the previous question?

How do you save and recall the content recommendations made by your peers?

To what extent does this fulfil your need?

What do you feel is missing?

When wondering what to watch/read/consume, how do you come to a decision?

Do you use any apps to make it easy for you to save content for later? If so, which?

No
Yes

What do you think would make this experience more ideal and seamless for you?

These questions were used as conversation starters and meant to direct the participants to think about a certain aspect of content consumption which they may or may not have thought of or articulated before. Participants were urged to speak about their experiences freely and at length. Occasional prompts were made by the researchers for clarification or to speak further about some points. Care was taken to not pick or rephrase questions with simple yes or no answers.

Affinity Mapping

The responses from the previous stage were collected and points mentioned in each participant’s answers were rearranged into groups to find common patterns of user environments, habits, experiences and pain points.

This resulted in the following set of points:

Being reorganised into the following common themes and categories:

Key Findings

The key findings from this stage were that:

People consume many and varied kinds of content online from music, videos, TV shows on OTT platforms (Netflix, Amazon Prime, Hotstar, HBO), podcasts, social media (Instagram, Twitter, Facebook, Pinterest, Reddit), audiobooks and kindle.

Therefore, any saving and organisation system would need to accommodate all these different kinds of content.
People use online forms of content not just for fun and entertainment, but also for work.

Organisation and content recall is a need felt most urgently by people in the latter category.
People can save content either on the platforms themselves or in a separate place such as a note-taking app (such as Google Keep, Notion, Apple Notes) or an offline diary.
Platforms that host content are aware of the need to save content (such as YouTube, Instagram, Pinterest, Neflix, etc) and offer ways to do so within the platform (through Playlists, Collections, Boards, My List respectively).

This can potentially be leveraged to:

  1. Learn how people already save content here and what they are familiar with
  2. Integrate people’s already saved content on these platforms with our solution
Those that use separate services such as note-taking apps feel that they are not purpose-built to handle multiple kinds of content (such as photos, videos, etc)

Moreover, their primary use for note taking apps is something else (such as jotting down a quick note, task organisation and to-do lists, etc).
Many people noted that they receive recommendations from and give them to friends, family, significant others, etc.

Therefore, it would be good to incorporate a social element into the service.
Most people who save content on platforms mention that it doesn’t work for them. This is because:

  1. The content is spread out over too many different apps and services and things are difficult to keep track of.
  2. The organisation system on the service gets too bloated with saved content and as a result any organisation system is rendered meaningless.
  3. Most platforms do not prioritise content saving, but rather content consumption.
User Journey Mapping

Users’ journey through the entire saving process was mapped out as shown below. Accordingly, opportunities for improving the users’ experience were identified.

Competitive and Comparative Analysis

The following competitors were considered based on participants mentioning them at the user interview stage and after exploring the solution space:

Key Findings

The following conclusions were drawn after analysing the solutions offered by competitors:

Even though note taking apps aren’t purpose designed for saving content, they are generally good makeshift solutions.
Most services don’t support reminders or scheduling.
Social Media platforms support robust content saving options but usually only for content within the platforms.
Video platforms like YouTube and Netflix have progress tracking built in.
Notion supports all the features we seek but is not purpose-designed for content saving and was either unknown to most users or thought to be too cumbersome for saving content.
Feature Prioritisation

Keeping the themes and information gathered from the previous stages in mind, it was determined that users have the following goals:

GOAL 1
Save a piece of online content in a safe spot.
GOAL 2
Go back to that piece of content at a later time in a reliable manner.

In order to achieve these goals, users need to be able to do the following tasks:

Save content links across all platforms
Organise and categorise all links
Add notes or tags to saved content (for better context)
Add reminders to check out content later
Share collaborative lists with others
Track progress for different kinds of content
Quickly save content into a “drafts” section and be able to organise content later
Pin or prioritise content into, say, High, Medium and Low categories
Need to have control over notifications for reminders (can be personalised and can opt out entirely)
User Flow Generation

The information gathered so far, two major user flows were generated based on the user goals:

Saving Content

Finding Saved Content

Wireframes

Using the two user flows, we found we needed certain key screens for users to be able to use the app. We wireframed these layouts as follows:

Prototyping

We then used the wireframes above to generate a functional minimum viable prototype. This included the following two flows:

Prototype Flow 1: Saving Content

Prototype Flow 2: Finding and Managing Saved Content

Usability Testing

We ran 5 user testing sessions. Two of these were done online using Userbrain and the rest in person with the users in front of us. This was done so that we could see different kinds of users handle the app in many different settings.

In all cases, users were given the two flows we had prototyped and were asked to complete the tasks that we had determined earlier as key functionality for the app.

Users were given context about the purpose behind the app, a few scenarios where it could be utilised and were encouraged to explore the app besides the tasks outlined so that we could learn more about where it could be improved.

Below are screenshots from one of these online user testing sessions:

Some of the learnings from these user testing sessions were:

Users would often want to click one of the content cards but open the link to the page by mistake.

This can be remedied by changing the content click trigger surface to be smaller or hidden away so that its only actuated when needed.
One of the users found the priority button unclear. She didn’t know beforehand that clicking it multiple times would cycle through different settings.

This can be fixed by having a separate openable module for picking properties.
Two users noticed issues understanding what the inbox/drafts and reminders meant.

Will be adding text descriptors of all nav buttons to avoid this issue.
Lack of clarity about whether the content is organised chronologically, alphabetically, etc and if it can be reordered.

Should add a ‘sort by’ button to filter content accordingly.
UI Design and Refinement

The insights from the user testing sessions and subsequent visual redesign resulted in the following screens with updated UI. The overall aesthetic was made more visually pleasing and consistent with itself by using iOS design system principles and Apple’s Human Interface Guidelines.

These were the final onboarding and login screens:

The detailed content cards were updated to allow property changes like adjusting reminder times, home screen pin levels and content consumption progress from the top-level view itself rather than burying them inside sub-menus.

Adding main navigation bar icon labels and a better way to select between different settings rather than cycling between the same static button were some changes that were incorporated directly from user feedback.

A ‘subtitle’ line besides the ‘title’ and ‘details’ fields was added on cards in case users want more granularity while saving information about their content. This line’s visibility in the minimized card view depends on whether the title takes up one or two lines.

Adjusting Reminder Settings
Adjusting Home Screen Pin Level
Adjusting Content Progress

Three Levels of Home Screen

Since adding lots of content to the home screen could result in it getting unwieldy very quickly, we incorporated different pin levels as an added layer or organisation to allow users to display the content that they need to. While they still retain the ability to place it inside user-defined categories, this allows them to readily see content that they wish to engage with on a more frequent basis when they open the app.

Swipe Gesture for Quick Actions

To remedy the links opening unexpectedly and to allow quicker and more intuitive actions, swipe gestures were incorporated to allow users to easily open links and delete content cards.

Nested Shelves

Shelves or categories can have user-defined icons for better visual recognition and support nested categorisation for flexibility in how users want to organise their content. Nested categories are displayed on a separate row on top.

Other functionality such as the title bar minimising and search bar disappearing while scrolling down were added. The search bar comes back once users start scrolling up again. This allows the search bar to always be handy when needed but move out of the way when it isn’t, freeing up space on the screen to display more content. To promote accessibility, the search bar supports speech recognition as well.

An inbox section serves to hold content that hasn’t been categorised yet by the user to:

1. Hold content as a quick-save space when users don't have time to add all the details
2. Serve as an intermediary space to hold this content
3. Encourage user categorisation and keep the app’s visual environment clean

The settings screen allows further customisation to suit users’ needs and offers tips and FAQs on how to better utilise the app.

Saving Modal Overlay

The new modal overlay while saving is more compact and consistent with the rest of the design. This repeating layout with the rest of the content cards throughout the app should form a stronger correlation in users’ minds and therefore reduce load on their working memory.

Keeping with the same theme, details here are added the same way that they are on the rest of the app.

Project

Taking
Up Space

Web Design

Website for an emerging mental health and reconciliation service.