This case study details an evaluation and redesign of VPL's Android App. We found issues regarding a lack of feedback, poor visual hierarchy, and generally an unintuitive user flow when placing a hold on a book. With our redesign, we resolved some of these usability issues while modernizing the look and feel of the app, abiding by VPL’s current branding.
Partner:
Timeline:
Context:
Roles:
Tools:
Corinna Jin
2 weeks
Academic
Researcher & UI Designer
Figma
VPL is the public library system for the city of Vancouver, consisting of 22 branch locations and serves close to 7 million visitors per year. Vancouverites look to VPL for all their reading, information and lifelong learning needs. To our surprise, VPL is actually the most-visited major urban library per capita in Canada across all it's locations.
During our brainstorming, we found that we wanted something that stands by something we both value: lifelong learning. Initially we looked into online learning platforms, but realized we also wanted to tackle an in-person experience that was relevant to our immediate community.
We found that VPL has close to 7 million visitors a year, making up a large proportion of Vancouverites. Given the organization’s value for the whole city and mission, the experience of borrowing and placing holds on books should be highly accessible. As of February 2022, the Android app has a rating of 3.5/5.0, and about 50,000 downloads.
We wanted to improve the number of users on the app, and looked to current user reviews to get a better picture of what could be improved:
"This app is terrible. It is sorely outdated."
"clunky, but serviceable. does basic functions as intended. not outstanding in any sense, but not lacking much in terms of core functionality either."
“It seems very unfinished and I recommend using the website (which you will be redirected to soon enough in the app anyway)”
"Good concept, UI needs improvement, ability to manage multiple accounts would make it better"
To guide our usability evaluation, we took inspiration from Nielson-Norman’s 10 Usability Heuristics and looked at what could be improved when following the user flow of booking a specific book and placing it on hold.
The Task: Place a hold on "The Design of Everyday Things"
A video demonstrating the task flow on the current VPL app
As we performed a cognitive walkthrough of our task flow, we noted down any violations of the 10 usability heuristics, and ranked them based on their impact on usability, ranging from a 1 (cosmetic problem) to a 4 (usability disaster).
We found 10 violations in total, with the biggest offenders to be on these heuristics:
Heuristic 1: Visibility of System Status (3 violations)
Heuristic 4: Consistency and Standards (3 violations)
Heuristic 8: Aesthetic and Minimalist Design (3 violations)
With these usability violations identified, it was time to tackle the redesign. Before that, we wanted to first map out which violations should be prioritized based on the effort and impact it would have given our project time constraint. As a result, we first focused on the top left quadrant, before moving into the other two quadrants as time allowed.
While one of our goals was to modernize the visual feel of the app, we made sure to work under the constraints of VPL’s current branding. Looking at their current website showed a night and day difference in terms of the visual design, and we hoped to incorporate this into our mobile redesign.
A screenshot of VPL’s current desktop landing page
With this, we laid out the start of the design language we'd use to style the redesign.
A style guide for our UI elements, showing the colors and fonts used for our app redesign
Below is a video showcasing our redesigned task flow of placing “The Design of Everyday Things” on hold. Due to our time constraints, we were only able to develop the “happy path”, or ideal case, of this task flow. Below the video is a detailed breakdown of the changes we made for each screen to address respective issues.
With this redesign, we were able to:
1. Modernize the look and feel of the app to fit VPL’s current branding, helping their presence to be felt more in the digital space and be consistent with their desktop site, and
2. Improve the visual hierarchy to not only create a more intuitive and consistent experience throughout the app, but help their mobile app promote their mission of “A free place for everyone to discover, create, and share ideas and information.”
1. Practicing good communication of ideas is crucial to success. Because this wasn’t a solo project, we both learned what it’s like to work when you’re not the one solely in charge of a project. Being clear and transparent about our ideas would not only help with working with other designers, but in working with developers, project managers, and other stakeholders.
2. Experience working with existing branding guidelines. With this project, we needed to consider whether our proposed changes would conflict with both the current UI’s existing mental models, and the branding constraints placed by VPL.
3. Keep it simple and focused. Throughout this project, it was important for us to keep in mind that we were not responsible for a rebrand, but rather to examine any issues that could negatively impact the usability. We also had to keep in mind that by only focusing on one key task flow, we can put all our efforts into improving one key functionality, instead of going into other areas of the app.
1. Explore other user flows within the app. Examples of these can be checking on current borrowings, scanning a library card, and checking and existing fees.
2. Testing, testing, testing. Conduct usability testing and user interviews to validate the redesign concept, making sure that we are including different types of users.
3. Examine the accessibility of the app. With VPL’s focus on inclusivity, we would look to see how we may include different language options, especially to accommodate for Vancouver’s diverse cultural scene.
4. Extend the range of features to provide for the community. Consider include listings of community events to support VPL’s mission.