Responsive Website Redesign
Horrocks Market
Revamping the informational website of a local fresh market to enhance customer conversion.
Role
UI/UX Designer
Researcher
Duration
5 weeks
April 2024
Deliverables
User Interviews, User Testing, Personas, Problem Statement, User Flows, Usability Testing, Wireframing, Prototyping
Tools
OVERVIEW
Horrocks Market is a family-run business that has been serving customers since 2002. It offers a diverse selection of gourmet groceries, fresh produce, and high-quality meats, along with a greenhouse.
PROBLEM
Horrocks' website is not optimized for mobile devices, is outdated, and is overwhelming for users, which could lead to a loss of potential customers since 95.2% of internet users in the US use mobile devices. [1]
GOAL
The proposed redesign will adopt a mobile-first approach, ensuring full responsiveness. This will not only simplify the content in a cleaner and more balanced way but also enhance the user experience, leading to increased customer engagement and potential sales.
— DESIGN PROCESS —
Iterate
Empathize
Define
Ideate
Prototype
Test
DISCOVERY
Usability Testing
I conducted moderated usability testing on the current website with five participants to gain insights into their experiences. Using Zoom, they were asked to complete 4 tasks while providing feedback in response to interview questions.
Find the location of the store
Direct Success
20%
Satisfaction Rating
1.6/5
Direct Success
100%
Satisfaction Rating
4.8/5
Find event details
Find information for ordering party trays
Direct Success
40%
Satisfaction Rating
2.4/5
Find the weekly ad
Direct Success
80%
Satisfaction Rating
2.8/5
Participants found the header confusing due to the unfamiliar design.
The copy is unclear and unintuitive, causing frustration and confusion.
There is too much content that overwhelms the users.
The information architecture is unintuitive with a disorganized hierarchy.
Key Insights
DEFINE
User Personas
I developed two personas to represent the challenges faced by my users. These personas allowed me to empathize with end users and remain attuned to their wants and needs throughout the project.
Problem Definition
I used point of view statements (POV’s) and how might we questions (HMW’s) to come up with ideas that I then translated to features. This process helped me hone in on the user’s challenges and motivations.
POV Statement
I’d like to explore ways to optimize Horrocks Market’s website navigation to provide users with an intuitive and effortless experience when seeking specific information.
How Might We…
Help users feel confident they can quickly and easily find the desired information?
Streamline the process for users looking for specific information?
Refresh the design and content to provide concise information?
IDEATE
Feature Set
Given the time constraints, I prioritized features for the Minimum Viable Product (MVP) using a value matrix. I decided to design the P1 features for this project, ensuring a focused and effective web experience.
P1: Must Have
Responsive Design
Site Search
Clear Hierarchy
Clear CTAs
Updated UI
Content First Approach
P2: Nice to Have
Event Calendar Integration
Comprehensive Filter Options
Customer Testimonials
P3: Can Come Later
Multiple Contact Options
Cart and Checkout
User Flows
User flows were developed to detail user interactions with the website and outline the steps required to accomplish key tasks. This allowed me to pinpoint the crucial screens that needed my design efforts.
Find Weekly Specials
Explore Events
PROTOTYPE
Wireframes
I used wireframes to develop a clear design plan, which simplified communication and served as a solid foundation for the final product. After gathering feedback on the low-fidelity wireframes, I improved them to high fidelity for additional testing.
Low-Fidelity Wireframes
To begin to envision what the web experience would look like, I first sketched the key screens on paper and then digitized them in Figma.
User testing was then carried out on those key screens via Zoom. These tests were completed with 3 out of the 5 original research participants and 1 new participant.
Key Insights
Site Search: Despite the absence of the site search functionality, testers attempted to use it, highlighting a user need that could be addressed in future iterations.
Positive Impressions: All participants were able to complete the tasks with increased proficiency.
Visual Balance: The majority of the suggestions for UI changes focus on resizing elements and adjusting spacing. One of the returning participants stated that there is still too much content.
High-Fidelity Wireframes
Prioritizing and applying changes based on the user testing findings I brought lo-fi wireframes to a higher-fidelity.
TESTING
Usability Testing
Usability testing was conducted via Maze evaluate the app's functionality, user satisfaction, and areas for improvement. Five participants were asked to complete 2 tasks and provide feedback.
Find event details for 'Wine Social"
Look for any deals for the month of June
Key Insights
Add search feature to events page: 3/8 testers suggested adding a search feature to the events page. Many of the testers found this page difficult to navigate and adding this feature will alleviate frustration.
Make search more visible: none of the testers used the website search feature, even though they suggested adding one. Making this feature more prominent will solve this issue.
Revisit hero banner CTA button: 1/9 of testers misclicked on this button for task 1 while the rest did not have any issues.
Revisit copy for specials page: 1/8 testers reported the copy confusing and 1/8 misclicked the wrong button. This can be resolved by changing the copy and can be addressed at a later time.
ITERATE
Design Iterations
After the prioritizing the revisions, the changes were applied to produce an updated prototype.
Iteration 1
To address both priority revisions (1-Add search feature to events page; 2-Make search more visible) the mobile navigation was updated with a readily accessible search field.
Iteration 2
Copy for the hero banner CTA button was changed from “View our weekly specials” to “View Deals and Specials” to clarify where the button leads you to.
Iteration 3
Copy for the weekly ad button was updated from “Download Weekly Ad” to “Download Weekly Ad for Deals” to reinforce that the button will do.
REFLECTION
What did I learn?
This project helped me improve my UI and UX skills while providing insights into working in an environment with limited to no design system or structure.
What didn’t go as planned?
Due to the lack of actual clients and defined problem I was left overwhelmed by the numerous options for my project. I struggled to manage and organize the large volume of existing text, unsure of what to prioritize or how to create a cohesive narrative.
What could I have done better?
Establishing a solid foundation before starting the design. I spent too much time experimenting with the UI. I found later that sketching and creating mood boards help to focus my ideas.