Willa's Simplifies Information Architecture For the Mobile User
Willa’s is a neighborhood restaurant in South Tampa, FL. The goal of this case study was to reduce excess information and create a mobile friendly design. On this project I implemented product strategies, ideation techniques, created lo-fi and hi-fi prototypes to reach this goal.
Role
User Research
Product Strategy
UI Design
Interaction Design
Usability Testing
Tools
Figjam
Notion
Maze
Figma
Timeline
4 weeks
The Problem
Willa’s current website overwhelms the user with information, and most users aren't navigating past the home page. The website's colors are low contrast resulting in low readability.
The Solution
I believe reconstructing the information architecture to give users access to the most desired details and adjusting the design for mobile devices by utilizing the brand's green color palette (for visibility) and improving spacing to adhere to the 4PX rule will provide users with a simplified and efficient experience.
Business Goals
From a business perspective, Willa’s would like to create an online space that feels welcoming and community building.
User Goals
Users are most interested in how to find Willa’s and viewing their offerings.
Usability Review
Auditing the current product allowed me to identify "wow moments" and "pain points". Reviewing the site gave insight into the user's experience.
User frustrations
The website contains excess and repetitive information. The website's analytics revealed most users weren't moving past the home page and clicks geared toward menus and directions, in addition to this the majority of users are accessing the site from their mobile devices.
Primary Pain Point
Information overload - the site contains details users aren't interested in and lays it out inefficiently.
Secondary Pain Point
There is is low view-ability. The color palette lacks contrast for readability, spacing (especially of text fields) doesn't adhere to the 4 PX rule, and overall the design doesn't translate well to mobile devices.
Competitor Benchmarking
After discussing the usability review with Willa's owner we audited direct and indirect competitor products the owner felt inspired by. We assessed them both by six key metrics: strengths, weaknesses, ux, design, content, and opportunities for improvement.
Direct Competitor - Supericia (Restaurant)
Strengths: Fun and unique design
Weaknesses: Poor UX and disruptive display of information
Indirect Competitor - Blank Street Coffee
Strengths: Beautiful and clear design.
Weaknesses: Map was difficult to view and some information was wordy.
Information Architecture
Current IA
Mapping out the current architecture allowed us to see where information was repeating and how we could rearrange and consolidate the top priorities. We implemented card sorting to help determine content that best suits both business and user needs.
Improved IA
The simplified structure condensed the top bar navigation to four pages and moved the least prioritized details of the site to the footer (i.e. site info) and the highest priority content (hours, location, menus) to the homepage.
Problem Space
Willa's describes themselves as a brand first and a restaurant second. However, it's current design is not catering to the needs of users: to locate the space, and to be informed of their offerings. Once users are drawn in, then they can experience the great community vibes!
How Might We… create a simplified and beautiful mobile experience.
Ideation
Once the problem was identified and the information architecture had been restructured, I began to brainstorm solutions with a mind map. I organized my ideas by what could be added and iterated.
What can we improve
Spacing to abide by the 4PX rule - especially in text forms and restructuring the IA.
What can we add
Animated press banner, buttons and links to a google/apple map, and implementing the brand's green color for accessibility.
Rapid Prototyping
Using Figjam I sketched my ideas in a low fidelity prototype. I worked first with desktop designs and annotated components needed to build and include on each page. I chose to focus on only the pages with the highest priority content: home, menus, events & catering, and an about page. Once I moved into the hi-fi design, I recognized that I lost focus at this step and would have benefited by creating mobile wireframes as well.
Styles & Components
For this project, I consulted on the UX of the website and got to work with the owner to gain insights. However, since I am not the UI designer for Willa's I created my own text and color styles to practice my design skills. I utilized Figma's component sets to build components I could easily edit, reuse and access in assets for both mobile and desktop usages.
High Fidelity Prototype
For my Hi-Fi prototype I chose to just work on the pages that contain the highest priority content: home page, menus, events, and an about page. Going into the project, I had a lot of ideas to create a product that felt inviting and personal. However, as I began working I found that the most glaring issues really lied in the site's UX. This resulted in creating a home page that presents the users' most pressing needs, creating a color palette that is clear and readable, and cleaning up the booking form to improve visibility and usability.
Three key learnings
1. Know what device is being used most. Keeping focus on the device you are designing for helps us to decide the right problems to solve.
2. Acknowledge business needs, while keeping user needs at the forefront. Willa's wanted the website to be more than a hub of information and reflect a lifestyle brand. We had a lot of ideas about how to make this happen, but research was showing that what users needed was a clear and easy to use resource for menus and directions. I wanted to balance both of these needs, however making sure users had their needs met became my number one priority.
3. You Can't Fix It All. Going in I had a lot of notes and ideas, but it was most important to improve the usability of Willa's website. The beauty of the design process is that it's continuous, and changes aren't made and left for dead. We continue to assess and improve our designs, this mindset makes it much easier to prioritize decisions and let go of perfectionism.
Next steps
The next crucial step is to test the current interface with mobile users - using Maze to conduct an unmoderated usability test. With those results, I would ideate solutions to iterate my current design according to user needs. If I were continuing on this project, I would then build out the rest of the interface for both mobile and desktop including the shop page and site info. Again, I would start by laying out the informational architecture of these pages, map out the user flow for the shop experience, sketch wireframes, build components, and design the first Hi-FI prototypes for the entire website.