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.
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.
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.
The goal of this phase was to understand users’ content saving habits and what sorts of problems they faced while doing so.
This stage involved assessing already existing solutions and their efficacy.
This stage dealt with producing divergent design iterations and along with the next stage, refinement and eventually converging to one design.
This phase took design iterations from the previous stage and fed them back to produce more usable designs.
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:
However we did not know:
The research kick-off sessions from the previous process led us to articulate the following research questions:
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?
What different formats or platforms do you find yourself most regular on?
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?
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.
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:
Users’ journey through the entire saving process was mapped out as shown below. Accordingly, opportunities for improving the users’ experience were identified.
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:
Keeping the themes and information gathered from the previous stages in mind, it was determined that users have the following goals:
In order to achieve these goals, users need to be able to do the following tasks:
The information gathered so far, two major user flows were generated based on the user goals:
Saving Content
Finding Saved Content
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:
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
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:
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.
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.
Web Design
Website for an emerging mental health and reconciliation service.
