LAURA
DESIGNS
Project Overview
The Product
In the Lou is serves as a resource for the St. Louis, MO community and its visitors to easily browse and find local small businesses in the area especially those who love to support small businesses.
Project Member(s): Laura Ortega, UX Designer
Project Duration: December 2022 - January 2023
The Problem
Currently, there is no concise and easy to use resource where users can go and locate small businesses in the St. Louis, MO area.
The Goal
Design an easy to navigate website resource where the St. Louis, MO community or any visitor to the area can easily find local and small businesses in the area.
User persona profile
User journey map
Understanding the User
I wanted to understand what features users wanted to have in our resource of finding small and local businesses as well as making that resource easy to navigate.
Personas and Empathy Maps
I conducted user interviews which later turned into empathy maps which allowed us to better understand the target user and their respective needs.
Our findings indicated that smooth navigation in a website with overwhelming information is important and therefore our focus needed to be on easy and simple navigation.
User Research
I conducted a usability study and found some pain points users had when using the app. These included:
A website with too much information can be overwhelming
Visible icons like a “back” and a “liked” icon need to be easily visible and accessible
Competitive Audit
A competitive audit was performed on both direct and indirect competitors to gather a better understanding of what is available in the market.
Starting the Design
Sitemap
Difficulty with website navigation was a pain point for users in the study, therefore the use of a site map was a great tool choice to effectively layout the website organization.
My goal was to make strategic information architecture decisions that would improve my overall design and navigation.
Sitemap of In The Lou website
Digital wireframe emphasizing the major features to consider such as a search bar and "Business type" categories
Wireframes
I began by sketching out paper wireframes which soon moved to digital wireframes (to the left) to address user pain points and improve the user experience. Prioritizing useful icons and primary information was the main goal.
I worked on a variety of different devices as the target users would most likely access the website via different devices, making sure the site would be fully responsive.
Low Fidelity Prototypes
To create a low fidelity prototype, I connected all the screens involving the main user flow from the home screen to the saved places screen.
The low fidelity prototype contained digital wireframes like those to the left.
Usability Studies
The first round of usability studies gave me insights on which features of the website I needed to improve for easy navigation. These included adding a "Back" icon, reformatting the "Results" page, and improving the flow of navigation throughout the website.
Round 1 Usability Study Findings:
Once outside of the "Home" screen, users didn’t have a way to exit back to the previous screen.
Users found the "Results" page overwhelming.
Users couldn’t figure out a clear and simple way to navigate through the "Results" page.
Refining the Design
Early designs demonstrated that the layout of the "Results" page and navigation users were the main features to improve. It was clear I needed to make improvements to decrease the feeling of overwhelming that the layout was causing as well as improve navigation for a smoother user experience.
Mockups
Before usability study
After usability study
Before usability study
After the usability study
Accessibility considerations:
Made use of bigger font to emphasize headings for clear visual hierarchy
Utilized universal icons to help users navigate the site easier
Incorporated landmarks to help users navigate especially those needing assistive technology
High Fidelity Prototypes
The final high-fidelity prototype followed the same user flow, but presents cleaner user flows compared to our first designs. I also made sure to incorporate accessibility considerations when polishing the designs.
View the high fidelity prototype here.
I included considerations for an additional screen sizes including mobile device because the is the predicted device most users will utilize hen making use of this resource.
Going Forward
Impact
Our target users shared that the website created served as a helpful resource that is easy to navigate and displayed useful information in a simple format.
Learnings
It important to focus on the target user while always being accessible this way you encompass the maximum amount of users.