The Friends of the Ann Arbor District Library is a volunteer organization designed to support the Ann Arbor District Library’s mission to “[assure] public ownership of and access to information and services” and foster community connection between the library system users and Friends volunteers. The primary function of volunteers is to process and resell donated books and materials through Friends Book Shops located within most branches. The organization donates approximately $100,000 toward the District Library’s youth programming every year.
With the onset of the pandemic, the Friends Book Shops had to cease in-person operations, severely limiting their opportunities to reach buyers. To help boost online revenue and foster community connection, we set out to create an engaging online shopping experience with familiar patterns and opportunities to bolster the relationship between Friends volunteers and shoppers.
Duration September 2020 - December 2020 (4 months)
Client Course project for UMSI’s Introduction to Interaction Design with Nazanin Andalibi
Process & Tools Competitive Analysis, User Interviews, Personas and Scenarios, Sketches and Storyboards, User Flow Diagrams (Miro), Paper Prototyping, Wireframes, and Digital Prototyping (Figma)
My Role As a course project, every member of our team was responsible for each step of the process as listed above. In addition to those steps, I also led the effort in styling the look-and-feel of the site and finalizing the hi-fi prototype.
Team Emily Hobrla, Sasha Kapur, and Angelina Miller
The Challenge
Due to the pandemic, the Friends of the Ann Arbor District Library (FAADL) has relied heavily on their online book shop to continue operations. Their current shopping site is difficult to navigate, requires off-site steps to complete a purchase, and doesn’t facilitate community connection – a key component of the in-person Friends shopping experience. Our website redesign aimed to make the Friends online shopping experience organized, efficient, and community-oriented.
Competitive Analysis
Before diving into designing, our team started by researching and analyzing competitors to gain a better understanding of their systems our users may already be familiar with as a starting point for our design.
During our competitive analysis, our team looked at ThriftBooks, Etsy, Facebook Marketplace, and Netflix to identify potential solutions and design patterns related to online shopping and media browsing.
From this research, we identified several important components we wanted to include in our design:
Product sorting and filtering options
Large product images to create visual interest and impact
Robust product pages showing various conditions and formats of available items
Carousel menus to help condense information and minimize scrolling
User Interviews and Analysis
With a foundation of research, we moved to interviewing real book buyers to get a better sense of their needs. Conducting semi-structured interviews via Zoom, we gathered additional information on how users would interact with the service, their needs, and the context in which they may use the online shop.
Key takeaways from our interviews that informed our design:
Users expressed dissatisfaction with existing online book buying sites, particularly Amazon, saying that the search results and product pages were overly cluttered
Buying experiences changed significantly due to the pandemic with many of our users moving toward online shopping – and increased interest in shopping to support local businesses
Product reviews were less important than our team originally thought – our interviewees expressed interest in seeing 1 or 2 in-depth reviews compared to star rankings during shopping
When shopping for books, our users wanted flexibility to search for a specific title or browse more generally
Personas and Scenarios
Our user interviews helped us develop a set of personas for a “typical” user of the site and scenarios of how they might use the online shop. Synthesizing our user group into personas helped us target features directly to the needs of various user groups, including young adults, older retired adults, and teachers. Each of these groups have similar motivations for seeking out used books, including cost and availability, but differing goals and frustrations when it comes to online shopping.
Sketches and Storyboarding
The user personas and scenarios informed the next phase of our design, sketching and storyboarding. Our personas helped us identify potential problems and tasks to illustrate, while our scenarios informed the narrative of our users’ journeys through our design.
Each team member sketched individually, concentrating on potential interfaces and devices, user emotions, and potential actions required from the interface. From these individual sketches, our team compiled a visual narrative to illustrate how the shop might be used in practice.
Right: A selection of sketches I created to help visualize our page layouts, user emotions, and site use contexts.
Below: Our team compiled our different sketches to create storyboards based on our scenarios from the previous step.
User Flow Diagram
Our next step in the design process was to create a user flow diagram. This diagram helped us outline the steps our users would need to take to reach their goal on the site.
The user flow diagram also helped solidify our site map and determine the screens we would need to create for our users to achieve their goals.
At this stage, we started to determine the placement of important features, including our main menu, search results, product pages, and volunteer recommendation interactions.
Paper Prototype and Usability Inspection Reports
Each team member created a separate paper prototype for our proposed design, highlighting a different set of necessary features identified in our earlier research.
My prototype focused on the pop-up volunteer reviews and interactions related to browsing the homepage and individual product pages. The paper prototype was also an opportunity to take a low-fidelity pass at designing the consistent elements of our design, including menus.
Usability Inspection Reports
My paper prototype was a great resource for additional user testing, giving me the opportunity to document user interactions in a way that allowed for fast iteration before we moved to our digital prototype. While most feedback on the paper prototype was positive, these tests highlighted areas for improvement, including creating a new screen to share all recommendations from an individual volunteer and including consistent breadcrumb menus for easier navigation.
Wireframes
Building on the best elements of each team member’s low-fidelity prototype, our next step was to create a comprehensive set of wireframes in Figma. These wireframes helped us establish the structure of our pages and visual components, with a strong focus on navigation features and page layout.
Digital Prototype and Usability Logs
With our wireframes in place, we moved into high fidelity prototyping and polishing our prototype for final testing. I was responsible for the look-and-feel of the site, implementing a color scheme that played on the style of the Ann Arbor District Library’s main site, but that would be distinct enough that users wouldn’t get confused about which site they were using.
From the testing of this prototype, we discovered some additional challenges related to the checkout process. From this feedback, we created additional error messages and supporting text to help users understand the steps needed to pick format and condition before adding an item to their cart.
Final Report and Prototype
To review the final prototype, click on the video walkthrough below or follow the links to see our final presentation slide deck or test the prototype in Figma.
Key Takeaways
Despite the popularity of some frequently used sites (like Amazon), some buyers appreciate a less cluttered online shopping experience when it comes to buying books
Establishing a style guide early-on is an effective way to start more effective user testing as soon as possible
Consistency between screens, especially with menus, is key to a better user experience
Next Steps
Outside the scope of this assignment, there are still many features that could be built in future iterations of this design, including:
Building out additional pages and interactions for creating a frequent-shopper account
Increasing the visibility of information regarding volunteering and donation opportunities to help more people get involved in the Friends community
Creating additional sorting options on the volunteer recommendations page, allowing users to search recommendations by genre
Clarifying the interactions for more involved or advance search options, such as selecting multiple categories at once