1000 Books Before Kindergarten App, Las Vegas NV

Creation of a well-defined UX and UI roadmap for 1000 Books Before Kindergarten’s iPhone app redesign.

Role: User Research / UX Design / Content Audit

The Team: 

  • Charlie Luh / Executive Board Director
  • Mark Borghese / Development Lead (using React Native)
  • Jess Chua / UX Designer

Overview

The 1000 Books Foundation is exclusively operated for literary and educational purposes.

The organization’s objectives are to:

  • promote reading to infants and toddlers
  • encourage parent-child bonding via reading

While the app had thousands of downloads since its launch in 2014, many users were frustrated with the interface.

As the app had grown unwieldy, I connected with 1000 Books through the Taproot+ platform to work on the mobile app redesign.

1000_app_or
Original App UX / UI
1000_dev_ux
Revised UX/UI by the development team.

The objective was to create a roadmap to make the project appealing to developers, and result in a faster turnaround and better app overall.

User Research

The process began by gathering insights from users.

Based on their common pain points while using the app, I created a list of user goals to explore initial low-fidelity wireframes.

Here are a few points that were gathered:

  • I would like the scanner to be more consistent
    The app was described by users as “clunky.” How could we make the search or scan feature less cumbersome?
  • I need to easily differentiate between read and unread books
    How can we offer an option to users to add a book and immediately mark it as read? (Instead of having to add a book to the library before marking it as read.)
  • Allow me to search using a single word in a book’s title instead of just the first word
    How can we improve the library search bar feature?
  • Create a community or achievement levels aspect
    How can we make keeping track of the number of read books a fun process to encourage ongoing engagement?

User Journey

A user journey map was created to show an ideal flow through the revised app.

Users who have a positive experience are more likely to mention the app to their friends, which could lead to more volunteers and donations.

1000_userjourney

Mood Board

A mood board was created to give a visual frame of reference to the vibe and essence of the organization.

books_moodboard

Sitemap + Wireframe Sketches

Because the organization works on a volunteer basis, we decided to initially focus on the library and scanner option and incorporate social media sharing into the app (versus extensively expanding the community aspect which would require more development).

books_sitemap

Wireframes were created to explore design solutions.

In the sample below, we decided to go with option 1 in the Menu Wireframe, as option 2 would require more scrolling by the user.

1000books_wf_menu

Refining

A basic UI style guide was created to show the color palette

The font “Poppins” was selected for its friendly and legible nature to appeal to both kids and parents.

1000books_basic_ui

A dark shade of blue was selected for the launch screen to provide better contrast against the logo.

I selected a short and memorable tagline for the launch screen, as the text in the original version was very wordy. A progress page adds a fun element to the journey of reading 1000 books.

1000_first_screens

A “Follow Us” screen was added to add a sense of community from within the app. The branded hashtag is active on various social media and is one way to connect app users to each other.

1000_about_first
About Menu and Screens

As for the “Readers” section, the top consideration was making it easier for readers to add “read books” to their shelf.

I suggested using WorldCat Search API (a global catalog of library collections) for the book search database, as:

  • It offered more robust results compared to the original API the app was using.
  • WorldCat might be open to providing more support due to 1000 Books Foundation’s close association with libraries.1000_readersbig

Conclusion

The set of screens is almost fully completed and will be sent to the developers to reference.

We are looking forward to reviewing some quantitative user data once the redesign is released.

Leave a Reply

Your email address will not be published. Required fields are marked *