The Opportunity
The Torrance Library app plays a critical role in connecting people living in Torrance, CA with their local library resources such as ebooks, audiobooks, upcoming events, and even tutoring. However, through my initial heuristic analysis I discovered that the app is plagued with critical usability issues. Presented here is a complete overhaul of the app’s user experience.
The Solution
I redesigned the Torrance Library app with a focus on creating a simple and enjoyable experience for users. By creating a hierarchy in both the content and the navigation, users can quickly and easily navigate around the app and parse critical information. The redesign also addresses key usability issues, for instance error prevention, that were lacking in the original app. The final visual design brings in a color palette that emphasizes libraries as a fun resource for their communities.
The Process
I started by conducting a heuristic analysis of the app and determined my recommendations for a redesign. Following the initial analysis I started designing and creating mid-fidelity wireframes and user flows for my concept. After the user flows and mid-fidelity wireframes were finalized, I created high fidelity wireframes and a click-through prototype of the app.
Heuristic Analysis
I used Jakob Nielsen's 10 general principles for interaction design as a basis for my heuristic analysis of the app. From this analysis I determined five key areas needing improvement and developed five recommendations to address each area.
Aesthetic and Minimalist Design
Analysis: There is a large amount of text on each screen, which lacks hierarchy.
Recommendation: Reduce text to only critical information and move extra text items to a supplemental page. Increase variation in text size and weight to improve delineation between text items.
Recognition Rather Than Recall
Analysis: The large amount of text, lacking in hierarchy, make buttons and actions difficult to recognize. The large number of navigation items reduces user recognition.
Recommendation: Reduce text to only critical information. Increase variety of font size and weight to create a visual hierarchy. Reduce the number of navigation items and move noncritical navigation functions to a secondary menu.
User Control and Freedom
Analysis: The only way to undo a navigation mistake is by tapping the “Back” button, however far in the navigation the user is. Users may have to press the “Back” button more than 5 times to reach the main navigation.
Recommendation: Make a centralized bottom navigation with key navigation items. Add secondary navigation items to an expandable menu navigation button.
Match Between System and the Real World
Analysis: The navigation item “Brainfuse” is confusing as it doesn’t match real world conventions.
Recommendation: Change the navigation title to “Homework help & tutoring” to better match real world conventions.
Error Prevention
Analysis:When requesting a hold for an item, users jump from selecting a library location to the item being held with no confirmation or clear way to undo the action.
Recommendation: Add a confirmation pop-up before placing the hold. Add easy undo of action.
Annotated Wireframes
Based on my recommendations from the heuristic analysis, I created mid-fidelity wireframes of my redesign.
User Flows Before and After
These user flows demonstrate the process a user would follow to place a hold on a library book. The user flow prior to my redesign has key usability issues such as a lack of error prevention. A key difference in the user flows is the addition of confirmation windows. Adding confirmation windows to confirm a user’s action can help in preventing user errors. The new flow also presents users with options to undo their action if an error has occurred. Preventing user errors and allowing users the ability to undo their errors helps prevent frustration.
High Fidelity Wireframes
Once the user flows had been determined and the mid-fidelity wireframes had been finalized, I moved into creating high fidelity wireframes of the final design. The high fidelity design brings a light and colorful color palette into the design which reinforces the premise that libraries are a fun resource for their communities.
Check out the click-through prototype