Mobile web app project.
Timeline: 2 months
Methods: User Research, User Testing, Wireframing
Tools: Figma, Adobe XD, Adobe Illustrator, uizard.io
Starting off…
Readhabit.io is a project created together with developer Nick Akey, who wanted to solve the issue of abandoning books halfway through.
As always, the first step is to define the problem. What is it? What causes it? Who suffers from it? Then, onto finding a solution and setting goals that would allow for its creation and implementation.
User Research
As the problem was defined, the question of who suffered from it arose. It is known in the industry that mobile usage is rising, and mobile-first solutions are dominating the market.
Mobile internet traffic accounts for more than 55 percent of total web traffic.
(Statista)
Over 90% of people are using mobile to go online.
(Statista)
We also wanted users to be able to access the app in the places where they read and are around books. The library, their sofa, their bed. Because of this, a mobile web first approach was most appropriate, since full laptops or desktops would rarely be accessible in those situations.
As for the target audience, they would be people who can’t finish books or who need / want to increase the amount of books they read on a regular basis. We identified three potential types of users:
- Busy people who love to or are required to read regularly, such as
- Teachers
- Students
- Researchers
- Casual readers (reading as a habit)
- People who start books but never finish them
- People who would like to (or need to) increase the amount of books they read
At this point, the web app serves people who want to read more as a habit –not as an obligation–, so we decided to focus on two main targets from the list of potential users:
- Busy, casual readers who love to read regularly
- People who start books but have trouble finishing them
With the issue addressed, it was time to put this information to work.
User Flow Process
The project began as a very simple web app with only three steps:
- Choose book – Is this a book they are already reading? One they want to read but haven’t started yet?
- Choose amount of time to spend reading – Everyday?
- Add to calendar – Create a reminder and add it to Google Calendar
While this initial proof of concept “worked”, it made many assumptions and left the user with very little options for personalization. For example, the app assumed that one would read everyday, and only everyday. So, any user who wanted to read every other day, or a couple of days per week was left unsatisfied (for example, a user who only reads during their morning commute Monday – Friday, or a user who doesn’t read during the week but binges on Saturday and Sunday).
In view of this, a new, more complete user flow was proposed:
This let the users personalize the amount of time they wanted to spend reading AND on which days. In addition, the “Add to calendar” step was divided into different screens to be presented in a more digestible form.
User Testing
The newest version of the user flow went live, and a small number of people tried it. Here’s a collection of the most meaningful feedback:
“Don’t know what the point of the app is or how to use it”.
User 1
“What happens after “adding” the event to my calendar? Was it successful? What are the next steps?”
User 2
“A button that takes you to the bottom of long book descriptions would be useful”.
User 3
“The day selection process is too slow if you want to read every day”.
User 4
Final user flow
With these in mind, a new user flow was developed. The additions included a 4-screen introduction feature that talked about the app and provided simple instructions regarding its usage –this intro was made skippable with recurring users in mind; and an end screen informing the user that a calendar event had successfully been created and providing two options: taking them to their Google Calendar or adding another book (in which case, they’d be directly sent to the Book Search page, in order to avoid redundancy.
Wireframes
A clear information architecture is crucial for any project, but it became the driving force of readhabit.io –considering it’s such a simple, straightforward web app. Knowing how everything would fit into the screens made it easier to determine a user flow and allowed for a quick transition to a mockup that could be used for user testing.
Visual Identity
Throughout the wireframing and mockup phases a very simple version of the logo was used. It consisted of the name in what became the secondary font: Chivo. Colors were also defined –orange and dark grey.
Further along, the logo was modified to become more dynamic and memorable.
Readhabit.io’s brand is energetic and youthful while keeping a studious, reliable image that is so strongly associated with reading and study. The mix of clean, minimal design and hand-drawn illustrations helps reflect those qualities.
Conclusion
At this point of the design, readhabit.io is a fully functional web app that helps its users finish books by providing a personalized reading schedule on their Google Calendar. Future iterations of the product could see it become a more complete reading habit tracker.
Marcela Cárdenas 