UX/UI case study: NovelNoshes
A book discovery app for foodies
Brief
While I have a certification in UX Design, I wanted to challenge myself and learn UI design as well. One of the best ways to learn is to do and I started to take on weekly Design Challenges. At first, I was scared at still tackled them as UX Design, thinking about user flows and content more than anything else. But slowly each week, I gained confidence with my visual design skills.
One of my favorite design challenge websites is Designercize. It’s fun to keep hitting reload challenge until something strikes! But there seems to be endless combinations, even though some can get a little wonky in the “hard” category.
Since I was focusing on my UI skills, I had to make a lot of UX assumptions for this challenge. I quickly looked at how other apps and websites handle search bars and picked out elements I thought would be useful. I also took a look at GoodReads and Amazon to see what information about the books they included.
Home Screen
- The search bar at the top is a common pattern, whether on the web or on mobile. I realized it was also helpful to include what key terms people can actually search for.
- I included a categories section to help guide users in discovering new books. Selecting one will filter out the home page to only reflect related books.
- Another way for easy discover is to highlight what is currently popular. This section would feature books with the most searches and views that day.
- Suggesting books based on a user’s preference makes it more personal.
- I used text under the icons on the bottom navigation to clear any confusion. Discover is the home screen. Bookshelf will be were all the bookmarks live. Notifications would be for news, such as a book release. Profile will be where the users can modify their account settings.
Search
- Tapping into the search bar will bring up this focused state. To return to the home page, the user will click cancel on the side of the bar.
- Again to help discovery, the focused search state will give suggestions of what other users are currently searching for.
- Recognition and not recall is important for users. Adding in recent searches will help them find a book that they maybe forgot to bookmark during their last session on the app.
- Give the user an option to clear both popular and recent searches. If for instance the user is not interested in Mediterranean food and never will be, they can clear it and it will be replaced by another suggestion.
Search Results
- Displaying the number of results will help the user decide if they need to be more specific in their search terms or to filter for quicker discovery.
- Filtering will automatically set to “most relevant.” Clicking on the filter/sort button will give the users options on how to display results.
- Flags will be placed on books to show any notable information, such as #1 in a category or new release.
- Bookmark option on the search results will make it quicker for users to scan and review the books at a later time.
Colors
I decided to keep the color scheme monochromatic. To help the focus remain on the books and cover art, the app is mainly black and white with the use of gold to accent any important information or functions.
Next Steps
While I had a very specific focus on the UI of the search process, I would love to expand this app. Some unanswered questions I had while designing include:
What happens if a user has read a book and wants to keep it under bookmarks but separate from books they want to read?
Should this app include ratings from users? Would that be useful or overkill?
What about a social aspect? You can send book recommendations to friends and see which ones they liked.
