FAADL Individual Project
Background:
This project tasked me with finding a local Ann Arbor website that did simple retail and work through a redesign. I chose the Friends of the Ann Arbor District Library, a volunteer run bookshop that donates all profits to the public library. They have a physical bookstore along with an online shop that I focused on for this project.
Problem Statement:
The FAADL website is difficult to navigate, and customers have a hard time finding the books they want. Finding the search feature was a particular hardship for users. The page also can be difficult to read due to large volume of text.
Interactive Prototype:
The final design is intended to keep the fun colors and simple layouts of the current site, while also making navigation easier. I prioritized chunking information and reducing the onboarding process.
Design Process:
User Research:
Before beginning the design process, it is important to assess the current state of a site. I began with a user interview, and heuristic evaluation on the current FAADL website. This gave me insight into where the pain points might be, and how users feel about navigating the current site. Navigation turned out to be a major struggle.
Get Audrey Whitton’s stories in your inbox
Join Medium for free to get updates from this writer.
Key Quote: “Where do I find the books?”
Competitive Analysis:
As a portion of my user research, I did a competitive analysis between FAADL and another Ann Arbor bookstore, Booksweet. I wanted to see how the two sites compared generally, and take some inspiration on common features and affordances.
Persona:
I developed a user persona for Sam, someone who would be likely to use the FAADL website to purchase books for her kids. Picture books are one of the bestselling items in the Friends shop, which makes Sam a good example user. It was very helpful to map out Sam’s goals and motivations prior to designing.
Product Vision Board:
The goal of this exercise was to determine business needs and goals. I used the template to map out different aspects of how FAADL functions, and determine how this would affect my redesign.
Sketching:
I began the sketching phase with a crazy 8s exercise, which then developed into the slightly more detailed sketch shown on the right. Both sets of sketches were done rapidly, forcing me to come up with quick, rough concepts.
Design Components:
One of the first steps in my design process was to create components for the elements I would be reusing multiple times. This included headers, buttons, and also building text and color styles. By adding styles and components I saved a lot of time replicating things I had already made.
Wireframing:
The first set of frames I put together were intended to test out some elements from the sketch phase. I used the components and styles from the previous phase and designed a mockup for the website’s homepage. There were several rounds of designing, testing, and adjusting before the final design was done.
User Testing:
After I had a mockup of all pages completed, I put my protoype out for a user test. Three users went through my prototype as well as the current website so I could compare reactions to both pages. I used the feedback I got from user testing to do some analysis and adjust my designs. It was also helpful to note participant strengths and weaknesses. This gave me something to consider while thinking about the reliability of their feedback.
Affinity Diagram:
After reviewing the results from my user tests, I collected key moments and quotes in an affinity diagram. I then organized them into categories to find common themes.
Revised Design:
After reviewing my affinity diagram I was able to make more revisions and finetune my designs. I also made mobile frames at this stage, which mainly consisted of adapting my desktop designs for the smaller screen.
Accessibility Check:
During the finetuning process, I did a lot of checking to ensure my design was accessible. I confirmed that there was the appropriate amount of contrast between all my chosen colors. I also checked font sizes for readibility, and ensured that images had alt text.
Annotating/prep for Dev handoff:
In order to prepare the final design for developers, I annotated significant interactions, tool tips, and alt text for images. These things would make the handoff smoother and provide more insight into the way I intend for the site to function.
Before vs After:
The majority of the content is unchanged, but I worked to make things easier for users to navigate. One big example is the navbar. It’s a simple part of the page, but makes a big difference in navigation. I reduced the number of options to decrease decision fatigue, and added the search feature prominently. The current design has the search hidden below a wall of text and that was a major frustration discovered through user testing. Between the two sites, users were quicker to find their product and complete the checkout process on my prototype than the current site.
Conclusions:
There are so many elements that go into making a website work, and there is no way to perfect them all. This attempt was not to make the FAADL website perfect, rather easier for users. Through my research I found that the main pain point was navigation, and especially finding the search feature. I worked to improve the user experience through several rounds of user input and design iteration. My final design is functional for both mobile and desktop breakpoints, and attempts to simplify the large amount of content on the FAADL site.
