One Read — A UX Case Study of a Reading Tracker App
Habit-tracking apps aren’t new to us. There is a lot to choose from. But its also a market that could niche down into specific habits. A good example is the habit of reading books. In this case study, I tried to come up with a product for that particular market.
Overview
This case study is about a solution for readers to log and keep track of their reading habits. It will be in the form of an iOS app. This study will cover the design process, why certain design decisions were made and the deliverables.
Design Process
Problem Definition
At first, I tried to define what the main problems readers are facing when it comes to tracking their reading habits and keeping a log of them. This gives me a better objective to work toward.
After doing some research on the Appstore’s comments section and getting some feedback from friends and family, I came up with the following problems:
- I don’t have a method of tracking my reading habits analytically
- I can’t track when I started to read the book and when I stopped
- I don’t have a way of logging my thoughts about the book
Listing down the problem definition gives me a broader goal and objectives to work towards.
Users and Audience
Identifying who your market is and defining personas helps us empathize with the user and see a product from their perspective. This step makes sure that the designers don’t add features that THEY think should be there, but that every decision is based on user research.
Persona
Following my online research and discussions, I came up with the following persona that I thought fits best as the main user.
Ideate
Sketches
I always start by sketching my ideas on paper. I find it a lot easier to sketch on paper rather than using a tool. I like that experience too. The main goal of this stage is to decide how to provide the solutions through features.
I don’t spend any time thinking too much about the design. The layout of elements and the details can be added in the wireframing stage.
Wireframes
Following the sketches, I made some wireframes where I made the basic skeleton of the app. I might add details to the wireframes but there can be design changes in the UI stage (These are affected by the research that's done on the current design trends).
These are some of the very first wireframes I came up with for this app. I added more wireframes and improved versions of some screens before moving on to the UIs. I couldn’t save them as screens since I converted some of them directly into the UIs forgetting to save them separately.
UI Design and Experience
Color and Typography
For choosing the colors for the UI, I wanted to get inspired by some real-world objects. For this, I looked at pictures of books and how they are stacked on shelves and libraries.
After getting a basic idea for the colors, I used Color Hunt to pick a color palette for the UIs.
For the font, I wanted to keep it simple and not go too crazy with multiple font families. I decided to go with one font and Nunito is a great font that can be used for both headings and body text. So I went ahead with that.
Home
I wanted the user to get motivated the moment they opened the app. The calendar tracker on the top highlights the days you were able to reach your daily goal.
The next section that immediately follows it is the “Daily Goal” section itself. It has this circular progress bar that tracks your daily goal for the day. This is time-based. The user has a pre-selected goal and the bar fills up accordingly.
Following that is the section that contains the books the user is currently reading. It will show a percentage of how much the user has read so far.
The last section of the home page is a bar graph of the user’s reading times for the past week.
Book
The “Book” section will give the user a quick summary of their progress of that particular book. It contains information like how much you’ve read and their best streaks for the app (how many days they have read the book in a row)
The “Start reading” button will take the user to the “reading mode” which I will get into later.
The rest of this section contains the “thoughts log” and the “memorable quotes” sections.
The thoughts log is basically a section for the reader to log personal thoughts and comments about the book.
The “memorable quotes” can be used by the reader to store memorable quotes form the book in a nice cards view.
Daily Goal
The daily goal is a custom-made goal by the user. The user can select the number of minutes from a selector. I got the inspiration for this layout from Apple’s own Books app.
Reading Mode
In addition to the timer, the reading mode contains features the user can use to log their thoughts and memorable quotes from the book.
I wanted the user to have these facilities without leaving the mode so that they can instantaneously log their thoughts or quotes right then and there. An iOS 13 style slide up modal will open up the view when the user clicks either of these buttons.
And lastly, as the user ends a session, they will be prompted to input the page they ended at so that the app can track their reading percentage. The time they spent in this session will automatically update the daily goal.
Roles
This was an individual project and I carried out all the stages in the design process from research to UIs. I’d love to collaborate with my colleagues who specialize in different UX fields for future projects which would give us the opportunity to come up with more sophisticated solutions.
What I learned from this case study
I learned the importance of the different stages of UX design while doing this project. For example, the sketching stage in the ideating phase is often overlooked by designers.
Most UX designers would skip straight to high-end wireframes with the first idea that popped into their heads. But pro tip here, try to always sketch your ideas with a sharpie before opening your design software. Because I didn’t go ahead with the first idea I had for the home, goals or the reading sections for this app. I came up with better ideas as I kept sketching.
Another important thing I learned is the importance of doing case studies and to make one myself. I think the amount of time you invest in it is definitely worth it.
Things I’d like to improve on
Some of the things that I still need to improve on is mostly on the UI stage. For this project, I played it safe with the selection of fonts and colors. I need to work and practice more in these fields in order to build more sophisticated designs.
I’d also like to learn about designing the interactions for the app using something like Protopie or Principle.
Thank you
Thank you for checking out this case study. I’d love to make this a habit and continually work on projects like this. Let's keep in touch.
Follow me on Dribbble
Resources:
Illustration credits to Mitchell Booth at Behance, Alternativemovieposters, and PixelTrue.
Stay safe and stay home ❤
