Local Pros
UX/ UI Responsive Website
Local Pros (LP) is an online search platform and its goal is to help users to find, get quotes, and book local professionals in their neighborhood more easily and quickly. The typical user is anyone between 18- 75 years old in the US.
The Local Pros Website
Project Overview
Product: Website Design
Project Duration: June 2022- July 2022
My Role: UX Researcher, UX Designer
The Problem: Available online search websites have cluttered designs as well as confusing and inefficient searching, quoting, and booking process.
The Goal: Design a local pros finder website to be user-friendly by providing clear navigation and search process, and offering a fast and easy quoting and booking process.
.
Design Process:
Understanding the User
User Research
Summary
I conducted user interviews to identify the process and common challenges people face trying to find local businesses in a specific location. The interview, then turned into empathy maps to better understand the target user and their needs. Based on the users research, some of the major users' pinpoints include:
Pain Points:
• Find Verified Pros: Difficulty to find authentic top-rated businesses
• Navigation: Searching website designs are often busy, which results in confusing navigation
• Quoting Process: Quoting process is confusing and time and energy consuming
• Cluttered Design: Searching website designs are often cluttered, which may be overwhelming
Persona
“ I am not a tech-savvy person and can get lost easily on busy websites. A friendly platform that helps me to find top-rated pros for my house services would be ideal”.
Age: 63
Hometown: Jacksonville, FL
Family: Live with his wife and three dogs
Occupations: Retired teacher
Jake loves plants and gardening. However, recently, he feels that long hours of gardening work make him exhausted and he needs some help with that. Jake needs to find local pros and service businesses and he is looking for an easy-to-understand and friendly platform to find services easily.
Problem Statement: Jake is a non-tech-savvy senior who needs an easy and user-friendly platform to find local service pros because he gets anxious and feels lost searching various web pages with overwhelming information.
Jake
User Journey
I created a user journey map of Jake’s experience using the site to help identify possible pain points and improvement opportunities.
Goal: Find a top-rated small business online for house services
Starting the Design
Information Architecture
Difficulty with website navigation, quoting process, and UX design was the primary pain points for users, so I used that knowledge to create a sitemap and improve overall website navigation. 
Digital Wireframe Screen Size Variations for the Homepage of the LP
Usability Study
After creating wireframes and low-fidelity prototype, I conduced an unmoderated usability test on 5 participants and here are the main findings:
Quoting Process
Enabling users to edit a specific step of quoting process, add notes in the overview, and log in or sign up, before submitting a quote request
Easier Searching
Adding service categories to the search process
More Clear Design
The homepage has pictures of offered services, but it makes the homepage looks cluttered
Refining the Design
Before - After the usability study
Based on the insights from the usability study, I made changes to improve the site’s quoting flow. Some updates include adding the option to “edit” the details of the quote requests on the review page as well as the ability to log in or sign up before submission. A “special note” section is also added, in case users need to add more details regarding the required service.
Before - After the usability study
Searching specific keywords for required services could be difficult. So, I added the service categories to the top bar to improve the search experience.
Before - After the usability study
The homepage had pictures of offered services to emphasize the variety of services, but it made the homepage looks cluttered. Based on the usability study, users preferred a clearer design that highlights the search function. So, I changed the website’s layout to a featured image layout and selected only one picture with bright colors. As whitespace defines the focus, I highlighted the website’s purpose with a bright picture and whitespace to avoid distracting users from the main goal, which is finding local pros.
Mockups and High-Fidelity Prototype
After all of the previous phases, I added imagery, icons, and text in order to create mockups and high-fidelity prototypes.
Final Mockups of the Local Pros
Screen Size Variations Mockups of the Local Pros
I included considerations for additional screen sizes in my mockups based on my earlier wireframes.
Since users search from a variety of devices, it is important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Since users search from a variety of devices, it is important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Accessibility
When designing, I made sure to include accessibility factors in the design process.
• I used headings with different-sized text for a clear visual hierarchy
• I checked color contrast with WebAIM to make sure I used adequate contrast between the text and background. Also, I used both color and text to convey meanings and avoided vibrating color combinations
• I used icons as well as labels to better communicate the meanings
• I checked color contrast with WebAIM to make sure I used adequate contrast between the text and background. Also, I used both color and text to convey meanings and avoided vibrating color combinations
• I used icons as well as labels to better communicate the meanings
Going Forward
Takeaways
Impact: Our target users shared that the design was user-friendly, clear, and easy to navigate and follow, and they like working with that.
What I learned: I learned to always put users and users' need front and center. So, I need to focus on the project’s main goal, research questions, and users' needs, and try to ideate and come up with the best ideas to address users' issues and needs.
Next Steps
• Conduct another round of usability testing on the new website
• Have more research on different local businesses’ procedures. Then optimize and facilitate the connection of users and businesses owners through the website
• Identify potential new features and scopes of work
