Designing a read-on-the-go experience for articles and blogs, a case study
Showcasing the design process of how I solve the UX challenges
Project Summary
Right off the bat, this is a case study on improving the experience of reading while the users are on the go. This case study will focus on defining a solution for the problems and pain points that made users disrupted while reading.
Problem Statement
When we’re reading on the go, we often get interrupted by events such as the train arriving or social interactions with other people. Many fascinating articles get abandoned or added to the ever-growing “read later” list.
Understanding the Situation
“Designing a solution that helps the user to overcome those obstacles is also the most suitable way. So that solution must confront the problems of the user”
In this problem statement, the user can not avoid such interruptions as those are more important than reading an article. So the solution should keep the user reading the article effectively even with such obstacles. Like all the case studies, only solving the problems of the user is not valid in this case. Designing a solution that helps the user to overcome those obstacles is also the most suitable way. So that solution must confront the problems of the user.
Goals
The main objective of this case study is to design an experience that helps users to read effectively while on the go. And as I said above, that experience must confront the obstacles of the user. Here I just split the goals according to this situation.
- Retain the user to read after overcoming that obstacle.
- Provide a place to hold the articles for users until they return.
- Make things more convenient for the user.
- Give the complete reading satisfaction to the user.
Target Users
The primary target users are the people who have outdoor reading habits, for example,
- Commuters
- Students
User Research
For this case study, I survey people like IT Professionals, Students, and other people who have reading habits in parks, grounds like outdoor areas.
From that survey, I gathered a lot of information and validated that information by comparing it with the user feedback and reviews of the existing solution.
User Research Insights
Analysis & Validation of data collected
As I above said, I validated the user needs and problems from the survey by comparing it with one of the existing solutions. I examined the data collected with the reviews on the Pocket Mobile App.
User Stories
From the user research process, I formulated two user stories according to the user’s needs and pain points. The first one is,
“When I am waiting for the train, I want to read articles quickly and effectively. So that I can learn something even in a short time.”
The second one is,
“When I am facing an interruption while reading, I want to remember the last part I read. So that I can effectively read articles even in an environment with a lot of distractions.”
Listing and Rating Desired Outcomes
I listed and rated the users’ desired outcomes by how important they were and how well satisfied they were with current solutions. This enabled me to prioritize and understand how the solution would solve the users’ problems better than the current solution.
First, I listed the desired outcomes that the users would like to have.
Then, I rated the importance of each outcome.
I assumed the values of the current satisfaction provided by the existing solutions with their features and reviews by the users.
Then I used the following formula to calculate the opportunity score of each desired outcome.
I used the formula simplified by YaChin You — Importance vs. Satisfaction matrix from the Lean Product Playbook, the Gap Analysis, and Jobs To Be Done opportunity score calculation.
Importance — Current Satisfaction = Opportunity
Some desired outcomes had a low opportunity score while having a high importance score. These outcomes are already satisfied. I categorize these as baseline outcomes, meaning that users expect all solutions to achieve these primary results.
At this time, I was able to see opportunities to outshine the solution proposed by me as well as the basic needs I have to provide for the users.
Solutions
Yes, I chose to design a mobile app, which will give the user an efficient reading experience while they are on the go.
Information Architecture
User Flow
Here’s the key user flow I created based on the user’s needs and their behavior.
Sketches
The user flow I created in the previous step made sketching the screens a lot easier because I was clear about the main actions the user needs to take in each screen.
My goal with the sketches was to quickly note down my thoughts, knowing that I’ll probably make some more changes when I create more detailed wireframes.
Wireframes
Visual Design
Here are the visual design and prototypes for the Lit Reader app. In this part, I am going to visualize the features I designed for each page of the Lit reader app.
Discovering articles and save them to read offline
I designed a separate page to explore and discover the articles from different sites. Here I provided some example sites too. The user can search for their interest with the help of Tags, which can provide them with a vast collection of writings under the particular tag. From the discover page, the user can pick any articles to read offline.
This page has picked articles from the discover page. Here, the user can perform the actions to short the article, like it, set a reminder to it, and listen to it as a podcast. And also, the user can get to the site where it has primarily been published.
Unfinished articles and Profile
To make the unfinished articles more prioritized, I designed a specific page to store them. This section of the Lit reader app has two sub-divisions, namely,
- Reminders — items which have the reminders to read.
- Bookmarks — particular lines or paragraphs with bookmarks to read.
User Stories & Solutions
Now I am going to connect the user stories and the solutions to provide a view about how the features I provide will satisfy the user needs.
User Story 1
“When I am waiting for the train, I want to read articles quickly and effectively. So that I can learn something even in a short time.”
To give a solution for this user story, I designed two features,
- Set Reminders
- Magic Shorten and Podcast
The set reminder feature is a tool to make an alert to remind the user about the pending task (reading article).
In the other case, if the user has some time but not enough time to read the full writing, then the Magic Shorten feature will help them to abridge the article without losing its meaning.
And also, if the user wants to read the writing with no effort, then the podcast feature will help them to listen to the article as a podcast.
User Story 2
“When I am facing an interruption while reading, I want to remember the last part I read. So that I can effectively read articles even in an environment with a lot of distractions.”
Bookmark is an option to remember the last read part. It will help the user to get back to the place where they left previously.
Other Important Features
To connect with users emotionally, I have also designed some other crucial features in the Lit Reader app.
These features will help the users to know their controls and their freedom in the app. Some of them are,
- Timeline
- Analytics
The timeline feature will give an overview of the complete activity of the users in this app.
The analytics feature ensures the users get some primary data such as the number of articles read, time saved by the Lit Reader app, most read article sites, most used tags, aspects about the magic shorten, and the podcast features.
Here are some other essential features to improve the experience while reading an article.
The user can use the translate option to translate the whole content of the article to the desired language. Note: This feature needs a network connection.
And also, the dictionary option might help the user to find the meaning of the unfamiliar words.
Lessons I have learned in this project
- Consider the pain points and the goals of the user as the ultimate inputs for the UX process.
- Put the user at the central axis for every solution while designing it.
- Put the creativity and designer ego away while designing a solution for user problems. Of course, creativity is essential. But in some cases, it may spoil the whole idea. So, provide the user with what they already know as the solution. The users prefer the solution to work the same way as all the other solutions they already know.
- Always try to understand the behavior of the target audience while conducting user research.
- Try to present the solutions as much as prototypes. It will give a clear idea about what is the actual purpose of every small thing in the design.
Thanks for stopping by 🎉 do you also love to take design challenges? You can start with any problem you see in your day to day life, or you can take one from UX Challenges by Yachin You
Stay in touch: You can find me on Dribbble and LinkedIn. Visit My Portfolio to see all my works.
