Goodreads App
Finding good books to read shouldn't be rocket science
My role
This project was part of my User Experience Design certificate course at IADT - Ireland. The research phase was conducted with the help of two other designers and the prototype and visual design phases were done by me alone. What I did in this project involved:
User research (Survey, Interview and Observation, Guerrilla Testing, Formal Usability Testing) • Brainstorming session• Wireframing • Prototyping • Visual design • Animation for interaction
Tools used
Survey Monkey • Adobe XD • Marvel App • Protopie • Illustrator • Photoshop
A mix of qualitative and quantitative research methods were chosen, as combining methods would allow me to determine the strongest insights from each one of them, resulting in a better understanding of users.
Survey
The survey was designed focusing on understanding how real users use the app, which features they use most, what they like about the app and what they don’t.
What they like most about the app: "getting book suggestion" and "being able to see what friends are reading".
Importance of social features for the users in order to find new book recommendations
Use of List/Shelves to organize and keep track of readings
Low frequency in which some of the features are used suggest poor information architecture or unnecessary tools
Observation and Interview
3 new users were observed using the app, 2 of them being male and one female, all aged between 36 and 44 years old and with good level of familiarity with using digital apps.
The tasks were:
- “Log In, find a new book to read and add it to a shelf.”
- “Find a book you’ve already read and add it to your ‘Read Shelf’.”
After the observation, the same subjects were interviewed.
Guiding Questions:
What was the most enjoyable part of using the app?
What was the most frustrating part of using the app?
Are there any improvements you would make to the app?
How would you describe the experience of using the app in one word?
Conclusion... so far
Positive aspects:
- Subjects found the idea behind the app simple and useful
- They enjoyed using features like the search bar and the cover scanner
Negative aspects:
- Subjects struggled to complete tasks due to lack of affordance, confusing navigation and lack of feedback from their actions.
- Low contrast between elements, with buttons and fields faded into the background
User Scenarios
In order to better understand users motivation when using the Goodreads app, I used the data collected to construct Personas and Scenarios.
"As is" Scenarios described the main task each persona would be motivated to achieve, being important to identify pain-points and possible struggles when using the product.
After this step, "To be" Scenarios were designed in order to address the pain-points found, showing how these tasks should be achieved in an ideal situation.
Key problems identified
- Lack of feedback when adding books to shelves
- Confusing information architecture/menus
- Search field didn't take into account finding friends
Brainstorming + Sketches
Ideas sketched on paper were later translated to Adobe XD, creating an interactive prototype adding:
- Feedback dialog when adding books + button status
- Feed and recommendation tabs with different content
- Search filter
Guerrilla Testing
The Version 1 of the interactive prototype shown above was tested with two people who were asked to perform 4 tasks:
- Find the profile page of your friend “Mary Smith”
- Find books recommended for you
- Add a book named “Book of Mine” to your one of your shelves
- Find a list with your friends’ activities
After the interaction, the "Like, Wish, What if" protocol was used as a tool to help users talk about their experience.
1st Iteration
Problems found:
- Users were unsure about what they would find in a tab called "Explore"
- Users were confused about the layout on "Add to shelf" dialog box
Positive/Liked aspects:
- Carousel to explore book recommendations
- Search filters
- Explore by gender
Formal Usability Testing
We conduct a moderated in-person usability study using Version 2 of the prototype, following a within-subjects design, where all participants perform all tasks, and used a technique called counterbalancing, whereby the order of tasks is randomized to limit the effects of learning transfer. 6 users evaluated the prototype and all of them shared similar demographic characteristics with the personas.
Tasks performed:
- Find the profile page of your friend “Mary Smith”
- Find books recommended for you.
- Add a book named “Book of Mine” to your one of your shelves
- Find a list with your friends’ activities
After the tasks, participants were asked to complete the “Like, Dislike, Wish and What if” Protocol, which helped them to talk about their experience.
The full testing protocol can be seen here.
Findings and 2nd Iteration
A summary of the user testing findings:
- All participants completed all tasks, but needed a large number of prompts to finish Task 1.
- Participants enjoyed the quick access to tabs and menu, but also liked the idea of having a search field on the top.
- Navigation and the overall interface was described as intuitive and clean.
- The search box was not prominent enough.
- Filter in search was not visible enough.
Proposed "Discover" tab
The final step was to design the screens in Adobe XD, also using Protopie to animate interactions. Changes made in the visual aspect of the app focused on improving problems found in the research phase as:
- Busy screens
- Low contrast text and buttons
- Low readability and discoverability
- Not consistent UI elements
Fonts and main brand colors were kept to be consistent with brand guidelines
Search filter
One of the problems found in the research phase was the search feature, which can only be used to search for book titles or authors. In the new proposed search field you can also look for friends and filter your search results.
Adding books to shelves
Another problem was the lack of affordance when adding books to shelves. In the proposed flow, users are presented with a pop up to choose their options and then, a confirmation message. The button also changes to inform the book was successfully added and name the shelf it is on.
Discover tab
Carousels were used in the Discover tab to encourage users to inspect what's next, also being a better solution for small screens than a thumbnail grid.
Learnings
- The importance of giving some level of control to users: some of them wanted to look for friend's profiles using the search box, others wanted to see a full list of friends.
- Users can provide designers with valuable insights and ideas they never thought of: one of the users said she would like to quickly bookmark books without having to organize them into shelves.
- At a personal level, I had the opportunity of updating my knowledge on Mobile Interface Design.
Thanks for taking this time to see my work!
If you have any questions or simply want to talk about design stuff, don't be shy and contact me!