Project Type and Scope
Viewing Prototype of Site Redesign
This was a collaborative project between myself and a developer in training. She was working to build an online library of resources for speech language pathologists. She wanted help with design, UX best practices and a prototype.
I provided:
~ Style options
~ UX Best Practices Research for filtering
~ Design & layout options
~ Interactive Prototypes showing filter options
Project Overview
The Speech & Language Teletherapy Resource Library is a site in early development by a Speech Pathologist, Amy, who is studying Front End Development. Her goal is to build an online resource of activities for others in her current profession.
Amy had started to build a resource library that allowed users to search by keyword and filter by category.
In this case study, I'll take you through my process of designing and prototyping several options based on existing models and user needs.
Screen from Early Development Work
The Challenge
Design Inspiration
She wanted help with developing the look and feel as well as exploring common UI patterns for filtering and getting a high-fidelity prototype that could be shared with users before continuing to build out the site.
Her inspiration included retail, education and entertainment based sites with various filtering styles - sidebar, inline and filter chips.
She wanted to use up to 20 filter options and she leaned heavily on the idea of using filter chips due to personal dislike of the sidebar and drop down styles.
My Approach
To begin, I spoke with Amy about the goals of the site, who the users would be and what kind of style she had in mind for her site. I wanted to learn what user motivations would be for using the site so I could focus the experience on what would work best for their purposes.
Look for Models
How might we set up filtering to allow users to quickly find resources for their therapy practice?
I began searching for models of filters 'in the wild' that would accommodate a rather large number of options and be user friendly.
I focused on search engines because they are very focused and efficient at helping users find what they are looking for, while being very clear about how to use them.
Screenshots from DuckDuckGo Website
UX Learnings on Filtering
In consulting various UX sources for best practice methods for filtering, I learned there are three typical patterns or layouts - Sidebar, Inline and Filter Bar. In terms of the number of filter options, the consensus was to limit to 10 or less, with a sweet spot around 6-7 before dividing options into categories.
In terms of filter organization, I found the advice mixed on whether to alphabetize or not though a strong recommendation to prioritize based on the content was noted. Ultimately, it was clear that this would be something that would require user testing to finalize.
User Persona
User Personas for Early Career & Experienced Professionals
Because the focus of the site was for a very specific group of users, I developed a behavioral based persona that would help me focus on what users wanted and how they wanted it presented.
Filter Results Takeaways
Options for Look & Feel
Trying on Color
Amy had shared several color styles that she liked. Based on these, I put together a selection of color palette options that incorporated her ideas.
Checking for Contrast Accessibility
I utilized a Figma plugin to check colors and text for contrast accessibility of headings, page text and buttons.
Color Palette Studies
Typography Options
Font Pairing Options
Based on Amy's desire for a 'minimalistic aesthetic' for her site, I selected san-serif font combinations that had clean lines and high legibility.
Option 2 was eliminated in early discussions. Designs and prototypes incorporated Options 1 and 3 to help Amy decide which look and feel she felt most comfortable with.
Designing Options
Combining what I learned during my research on filtering, motivations of the user and Amy's ideas for color, I began to design layout and filtering options.
Amy had a strong disinterest in a sidebar filter, so I decided to work with the filter chips inline and with drop-down and to try a more typical drop-down style. She separated her initial filter list of options into two categories, which helped to display options with some clarity.
Filter Chips Light Mode
Drop-down Filter in Button Style
Drop-down Filter Using Arrow Icon
Filter Chips Dark Mode
Filter Option Takeaways
Prototyping
Filter States
To meet stakeholder goals of aligning the site design with UX best practices, I wanted to show the different states for the filter options, based on Google's Material Design standards.
Amy's initial work had shown enabled, hover, and active states. I included focused to make the site accessible for those using keyboard navigation. Dragged and Disabled states were not included because they did not apply to the site usage.
Filter Chip Design
Button States
Inline / Filter Bar Filtering States
I wanted to show default, hover, focused and active states of the filter chips. I set up a button component, created the enabled, hover and checked states, then worked on setting up the interactive prototypes.
Drop-down Filtering States
I wanted to have interactions trigger a menu selection change from hover to checked and also change the visible result cards to show how the filtering action would work.
Filter Result Cards
After building the menu selector interaction for hover and checked states, I set up card variants to align with different selection patterns.
Menu Interactions
Figma Error Message
Unfortunately, the Figma free plan only allows a single interaction to be fired.
I was not able to prototype the various filter states for either inline or drop-down menus. Nor was I able to show card filtering based on filter selection. The prototype would have limited ability for user testing.
Two interactive prototypes were created to show the filtering pattern options.
Interactive Prototypes
Inline Filter Prototype
Drop-down Filter Prototype
Next Steps
Amy used the work I completed to continue building out her site. If the project were to continue, next I would like to test the prototype with users and conduct a card sorting exercise on the filter options to determine an optimal order for the filter categories and items based on user preference.
What I Learned
Designing this one page activity resource library, I learned a lot about filtering and state design. This project helped me dig into Google’s Material Design standards, learning about filter chips. Building multiple interactive prototypes helped me advance my Figma skills, creating overlays, components and state variants, in order to create a highly interactive prototype. A limitation I found was that Figma limits interactive design features in the free plan. I unfortunately wasn’t able to show various states of the filter chips or how result cards would be removed when using the filter options.
This was my first project collaborating with a developer and it helped me understand the importance of good communication and finding a common language.
