BIBLIO

Biblio Header

PROJECT OVERVIEW

ROLE: UX/UI Designer, Design Strategist
CLIENT:  Biblio*
TIMELINE: 80 hours over two weeks

*Please note this is a fictional client chosen for my DesignLab capstone

CHALLENGE:
Create the Biblio brand and design an end-to-end mobile application for the new company.

OUTCOME:
A modern, minimal, and sophisticated mobile app for Biblio that makes it fun and easy for users to inventory their books, keep track of what books they want to read next, and view statistics regarding their reading habits.

BACKGROUND:
Biblio has started collecting data on popular books. Inspired by goodreads.com, Biblio wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use. As a new company, Biblio needs to create their brand which should also be reflected in their mobile app.

DESIGN PROCESS:

Design Process

RESEARCH

TOOLS USED: Market Research, Competitive Analysis, User Interviews

In order to differentiate Biblio from its competitors, I used secondary research to discover who our target user may be. The following questions guided my market research:

  • Who are the readers?
  • Who are the non-readers?
  • Why do we read?
  • What are the industry trends?

After gaining a better understanding of the industry and Biblio's competitors, I conducted primary research using the below high level questions to guide my user interviews:

  • Why do users read?
  • How do users discover new books to read?
  • How do users determine which book to read next?
  • Why and how do users talk with others (either in person or online) about books?
  • Why do users need to keep an inventory of books they have read, are reading, and want to read?

The most interesting fact that I learned was that users prefer print books to digital (eBooks) for a variety of reasons: users can let friends borrow print books, print books can be found at the library, and they can be purchased cheaply at used book stores.

chart
chart 2
Compiled

“My friend recommended the book to me because she said it was funny and meaningful"
"Going to a coffee shop and reading is an activity for me"
"I buy physical books because I can let people borrow them"
"I only read books that are available at the library"

RESEARCH SYNTHESIS

TOOLS USED: Empathy Map, Persona, Research Findings Report

The majority of readers I interviewed relied on book recommendations from friends or influencers, read to learn, and will often share what they read with others. For an in depth look at my research, please take a look at my Research Findings Report.

Empathy Map_V2
Persona-01

DEFINE, IDEATE, & STRATEGIZE

TOOLS USED: POV Statements & HMW Questions, Brainstorming, Business and User Goals Diagram, Product Roadmap

I held a small brainstorming session ideating off the four HMW questions I crafted, and spent the rest of the time discussing each one of our ideas.

  • How might we provide users with a way to judge books before they read them?
  • How might we provide users with a way to relate to what they read?
  • How might we help users connect with others about what they read?
  • How might we provide users with a way to track their quotes and books?

Having conducting brainstorming sessions alone and in a group, I can confidently say that I greatly prefer group sessions; in my experience, chatting with others produces more interesting and innovative ideas and also gives you the opportunity to further ideate. Also, it's just more fun!

IMG_9334_edited
IMG_9336_edited
IMG_9338_edited
IMG_9339_edited

The features I decided to focus on would not only solve the user problem but also satisfy company goals and be technically feasible to design within the timeframe. The Product Roadmap I created details priority level, metrics, and notes for the features that will be included in the app.

INFORMATION ARCHITECTURE

TOOLS USED: Application Map

 I decided on a total of four screens for the app: the Home screen will be where users can discover new and trending books; the Search screen will be where users can search for specific books, authors, or genres; the Library screen is where users can access their "bookshelves"; and the Account screen with information about the user, settings, and the user's reading habits.

Application Map_V3

INTERACTION DESIGN

TOOLS USED: UI Requirements, User Flow, Task Flow, Low Fidelity Wireframes, Wireframe Annotations, Mid Fidelity Wireframes

INTERACTION DESIGN

TOOLS USED: UI Requirements, User Flow, Task Flow, Low Fidelity Wireframes, Wireframe Annotations, Mid Fidelity Wireframes

With the IA completed, I created two task flows users would likely take when using Biblio; this also helped determine what I would need to design in preparation for usability testing. 

Task Flow_V2

I sketched out some ideas for the layout of the Biblio app, focusing on clear visual hierarchy so the users could easily browse through the screens and ample white space to let the book covers stand out. For more detail, an annotated version of my Low Fidelity Wireframes is available here.

Low Fidelity Wireframes
Mid-Fidelity Wireframes_Page 1
Mid-Fidelity Wireframes_Page 2

USABILITY TESTING

TOOLS USED: Mid Fidelity Prototype, Usability Testing, Usability Findings Synthesis, Affinity Map

I decided to test my mid fidelity prototype to focus on the layout, visual hierarchy, flow, and IA of the app since I am designing the entire app from ground up. One thing I tried out in the prototype was having a CTA button at the top of the screen (per the suggestion of a group critique session earlier on) but after testing with users, I found that most did not look at the top of the screen for CTAs so it took users significantly longer than expected to find it. 

Affinity Map

USER INTERFACE DESIGN

TOOLS USED: Mood Board, Brand Logo, Style Tile, High Fidelity Wireframes, UI Kit

Bibliio should be an app users will enjoy using, and since most participants during user interviews said they read as a way to unwind, it was important that the app's UI reflect that state of mind. I designed the Biblio logo by drawing inspiration from modern architecture, geometric shapes, and cool blue colors.

IMG_9359
Logo Process-02
Logo

I designed the logo to symbolize a turning page as well as a progress circle as Biblio provides users with a way to track how many books they are reading. Lastly, I updated my wireframes with the visual design and design recommendations from usability testing to create a High Fidelity Prototype which can be viewed here.

Descriptive-Hi-Fi-Wireframes
Biblio_home_optimized
Biblio_book_optimized
Biblio_review_optimized
Hi-Fi-Fleet

PROJECT TAKEAWAYS & NEXT STEPS

Time proved to be a challenge on this project since I had to design everything from scratch. However, having so much to accomplish within 80 hours forced me to be selective and deliberate with my choices, especially when it came to the visual design stage.

There is so much I'd like to do with Biblio with more time. First, I would design for further mobile interactivity to create a more delightful experience for the user (enabling functions to appear on long presses, animated transitions, confirmation pop ups, etc.). Next I would like to implement a more comprehensive book rating system (allowing users to rate the plot, writing style, length, etc.) and also explore different ways users can sort, view, and filter their bookshelves.