Home Depot Store Pages Refresh
Customers struggled to find store information
Customers struggled to find store information
Customers struggled to find store information
This page’s purpose is to provide relevant information to users in an efficient manner. However, it was outdated and did not meet the current UX best practices and user expectations.
This page’s purpose is to provide relevant information to users in an efficient manner. However, it was outdated and did not meet the current UX best practices and user expectations.
This page’s purpose is to provide relevant information to users in an efficient manner. However, it was outdated and did not meet the current UX best practices and user expectations.
Client
Home Depot Canada
Services
UX & UI Design Visual Design Project management User Research Prototyping Competitive Research Concept ideation
Industries
Ecommerce
Date
April 2022 to September 2022
Problem
People who want to explore new cities often lack the guidance and support they need to make the most of their trip. They have difficulty finding relevant information about the places they visit, and they miss out on opportunities to connect with other travelers and locals. Many of them feel bored and frustrated by the lack of engagement and interaction in their travel experience.
What are the needs of explorers when they travel to new cities?
Explorers and travelers want to break free from their routine and broaden their horizons by having new experiences. They seek reliable and relevant information to help them navigate the places they visit. They also want to connect with people who share their interests and engage with the local culture and environment.
Experiences
Reliable Info
Connection
Engagement
What is wrong with the existing solutions?
Explorers and travelers want to break free from their routine and broaden their horizons by having new experiences. They seek reliable and relevant information to help them navigate the places they visit. They also want to connect with people who share their interests and engage with the local culture and environment.
Not providing timely or accurate information
Not offer a way to purchase tickets or access transportation options
Rely on existing platforms that are not tailored to travelers’ needs
Not create a sense of discovery or adventure
Lack personalization or gamification features
Google Maps
Meetup
City Mapper
Trip Advisor
As a result...
“I’m not sure where to find other
travelers like me”
“I wish I could purchase tickets
without going to so many websites”
“I don’t feel motivated to explore
this city I’m in”
“I want travelling to be less
overwhelming but easier”
“I wish the locals could tell me
what the best restaraunt in town is”
?
How might we design a social companion app that help travelers discover new places, connect with others, and have fun in new cities?
The Solution
We designed a social companion app that helps explorers and travelers discover new places in the cities they visit. The app allows users to tap their phone’s NFC chip on specific bus stops and get relevant and timely information about the nearby attractions, activities, and events. Users can also purchase tickets for transportation and entertainment through the app, and connect with other explorers who share their interests and preferences. The app enhances the exploration experience by offering a gallery of pictures of places visited by other explorers, and by gamifying the exploration process with rewards and challenges.
My Role
UX/UI Designer
Team Members
Manan Monga, Jackson Howlette
Tools
Figma, Sketchup, Adobe XD, Miro, Photoshop, Illustrator
Location-Based Notifications
Get real-time information and tickets for attractions and points of interest with Alerts
Alerts that show up on your phone when you are near a point of interest or attraction. They help you learn more about the place, find other explorers, and tap your phone’s NFC chip on bus stops for information and tickets. They make your exploration experience more engaging, interactive, and fun.
Discover with other explorers
Explore your city with like-minded people and make new friends with the Connect feature
Connect with other users of the app in the same city as you. You can chat with them, share tips and recommendations, ask questions, and see what they have discovered. You can also find other explorers who have similar interests and preferences as you, and join them for an adventure. This feature helps you make new friends, learn from others, and have more fun in your exploration.
Explorer’s Gallery
Discover the hidden gems of your city and share your own with the community using Explorer’s Gallery
Explorer’s Gallery is a feature that lets you see pictures of places visited by other explorers using the app. You can browse through the gallery and get inspired by the beautiful and interesting sights that others have seen. You can also upload your own pictures and share your discoveries with the community. Explorer’s Gallery is a feature that helps you appreciate the diversity and beauty of the cities you explore.
Tap to collect
Discover new places and collect achievements with the Tap to collect feature
This feature allows you to get relevant and timely information about nearby attractions, activities, and events by simply tapping your phone’s NFC chip on specific bus stops. This feature is designed to enhance and gamify your exploration experience by providing you with the most up-to-date information about the places you visit while collecting achievements.
My contribution
My teammate and I worked collaboratively on this project as part of a design course in 2020. We both contributed equally to the project, including tasks such as prototype and photoshop designs, creating presentation materials, and participating in the ideation process. Our roles and responsibilities were shared equally, with both of us contributing to the various tasks and activities required to complete the project.
Tip: The key take-aways are highlighted in yellow for your convenience :)
Problem
People who visit the Home Depot website often struggle to find the store information they need. Even the most basic details like location, hours, and services are hard to access or understand due to the outdated design. Many of them feel annoyed and disappointed by the website, and end up not visiting the store or choosing a different brand.
What do people look for on the store pages?
The store pages are vital for helping customers locate their closest store and contact them easily. They also show the unique services that each store provides.
Location
Store Hours
Phone Numbers
Services
What was wrong with the page?
We identified several user experience issues with the page that needed to be addressed. The navigation was not intuitive and users had difficulty finding the store hours and home services. The page also had a lot of empty space that made it look dull and unappealing. The readability of the copy was low and the page lacked accessibility features and reviews that could enhance the credibility and trustworthiness of the store.
Difficulty finding store hours and home services
Page has a lot of empty space that makes it look dull and unappealing
Readability of the copy is low
Navigation is not intuitive
Page lacks accessibility features and reviews
As a result...
“I can’t find the Pro Desk hours”
“Does this store have a
wheelchair accessible entrance?”
“Where is the Pro flyer?”
“What's the phone number for
the Tool Rental Department?”
“What's the phone number for
the Tool Rental Department?”
?
How might we redesign the Store Details Page to make the store information more accessible and understandable for the visitors, and increase their satisfaction and loyalty to the brand?
The Solution
Our new store details page has a revamped store hours widget with more features, accessibility icons for easy recognition, redesigned home services elements for better visibility, clearer and simpler copy, and a google reviews element to showcase customer feedback.
My Role
UX/UI Designer
Timeline
May. 2022 - Sep. 2022
Team Members
Manan Monga, Aleks Kmieciak, + 9
Tools
Figma, Miro, Survey Monkey, Photoshop, Illustrator, UserTesting, Confluence,
Store Details Widget
Getting all the information you need in one convenient place
Before
After
Why?
To make the widget compliant with legal regulations and current usability accessibility standards, we simplified the layouts and added accessibility icons to the store details. We also featured COVID-19 safety information and delivery and pickup options for each store. A pro flyer button was also included for our pro customers.
Take aways
Widget redesigned to comply with legal and accessibility standards
Accessibility icons and COVID-19 safety information added to store details
Delivery and pickup options featured for each store
Pro flyer button included for pro customers
User testing confirmed the new design’s ease of use and helpfulness
Store Hours Widget
Finding store hours made easy
Before
After
Why?
After conducting user research and testing on the old widget, we discovered that users were confused by the widget’s design and assumed that the hours listed were for all the departments when in reality it was only for the specific department that was selected. This caused a lot of confusion. To address this issue, we focused heavily on redesigning the widget to make it more intuitive and user-friendly.
Take aways
The original store widget was outdated and difficult to use.
Users were confused by the widget’s design and assumed that the hours listed were for all the departments when in reality it was only for the specific department that was selected.
We redesigned the widget to make it more intuitive and user-friendly.
The new design proved to be user friendly and easy to understand through user testing and interviews
Home Services List
Visualizing home services
Before
After
Why?
We redesigned the home services from a long and cognitively demanding list that users had to scan through to cards with icons and names. User testing proved this made it easier and more user-friendly for users to find the home service they needed.
Take aways
Home services redesigned from list to cards with icons and names
User testing confirmed improved ease of use and user-friendliness
Users can find the home service they need more easily
Google Reviews Section
Visualizing home services
Before
Why?
At the request of the stakeholders, we incorporated a Google Reviews section into the page to improve SEO by increasing relevant keywords. To achieve this, we designed a section that would theoretically scrapes reviews from Google for each store being viewed. Testing proved it was easy and user-friendly to use.
Take aways
At the request of the stakeholders, we incorporated a Google Reviews section
Improve SEO by increasing relevant keywords
Scrapes reviews from Google for each store being viewed
Testing proved it was easy and user-friendly to use
Our Approach
01
Research
Current state analysis
Competitive Analysis
User Research
“How might we” exercise
Problem statement
02
Ideate
Informed Brainstorming
Crazy 4s Exercise
Sketching Exercises
Lo-fi wireframes/sketches
Final sketch review
Stakeholder Feedback
Final Sketch dot voting
03
Design
Hi-fi Interactive prototypes
Mobile and Desktop variants
Feature implementation
Team prototype reviews (3)
Design iterations
04
Test
Usertesting.com tasks planning
User Testing
Affinity mapping
Design iterations
Final design presentation
Developer specifications
Handoff to devs
My contribution
My role as the lead UX Designer and Project Manager on the store details project was to advocate for user research, competitive analysis, ideation and design. I collaborated with my team mate Aleks to conduct research and design activities, and to produce wireframes, high fidelity designs and interactive prototypes for user feedback and testing.
I applied a user-centered design process to redesign the store details page. This involved: analyzing the current state and competitors; defining and aligning on the main problem; and generating and evaluating ideas using sketching, wireframing, prototyping, and feedback sessions. The final solution is live on the site now.
01
Research
Current state analysis
To begin our research, we first had to pinpoint the problems and opportunities for enhancement in the current store details page. I facilitated meetings with the SEO team (our stakeholders) to gain more insights into the issues.
As a result of the discussions and meetings, we identified 7 key aspects of the store details page that the stakeholders prioritized by importance.
Displaying store hours information clearly
Enhancing the accessibility of store hours widget
Presenting the accessibility features of the store
Improving the visibility of home services links
Indicating the options for delivery in-store or curbside
Optimizing the placement and presence of Google reviews
Simplifying the layout of vehicle rental information
Utilizing whitespace effectively
Competitive Analysis
Our first step was to analyze the store details pages of our competitors and see if we could learn from their design choices.
We found that:
For the store hours widget:
Most competitors, such as Lowes, Rona and Benjamin Moore, displayed the department hours without requiring any user interaction.
Lowes was the only competitor that had a Pro Desk feature in its widget.
Best Buy had a unique feature that showed the peak hours of the store traffic.
Lowes also had an interactive map that linked to the store location.
Our objective was to leverage competitive research in order to devise a solution that caters to the needs of Home Depot customers by providing them with a convenient and straightforward way to access store and department hours, address, and accessibility information.
User Research & How Might We exercise
To better understand how Home Depot customers utilized the existing experience and to identify potential problems, I advocated for conducting user research and How Might We’s first before diving into solutions. I also invited our stakeholders to participate in the HMW and affinity mapping sessions with us, so that as a group, we can brainstorm solutions based on our findings.
We identified 8 key areas and formulated the most relevant HMWs that will guide us. Based on this, we created a main How Might We question that encompasses all the key aspects to help us in the ideation process.
How might we improve the visibility of home services links without cluttering the page?
How might we display store hours information clearly and consistently?
How might we enhance the accessibility of store hours widget for users with different needs and preferences?
How might we indicate the options for delivery in-store or curbside in a way that is easy to understand and choose?
How might we optimize the placement and presence of Google reviews to increase trust and engagement?
How might we present the accessibility features of the store in a way that is informative and inclusive?
How might we simplify the layout of vehicle rental information to reduce cognitive load and confusion?
How might we utilize whitespace effectively to create a balanced and appealing design?
?
How might we improve the Store Details Page to provide a user-friendly, accessible, and visually appealing experience for the visitors?
?
02
Ideate
Ideate
Crazy 4s
With our HMW and research findings as our guide, we invited the design team and stakeholders to join us in a creative brainstorming session using the Crazy 4s method with four sets of quick two-minute sketching. Our goal was to generate ideas on how the user experience of the new features and ideas would feel like.
By doing the crazy 4s exercise, we explored different perspectives and approaches to the various features of the page and collaborated as a team to generate ideas and approaches we all agreed with.
We agreed to:
Use an accordion for the store hours widget to simplify the user experience
Display the home services list as cards
Adopt horizontal layouts for better use of whitespace
Include accessibility icons in the store details widget
Place the Google reviews section under the truck rental section
Wireframes/sketches
By doing the crazy 4s exercise, the design team was able to combine various ideas from the crazy 4s and HMWs and produce mockups of them.
Based on the final wireframes and sketches, the design team and stakeholders dot voted to select the most feasible solutions and ideas.
We learned that:
Based on feedback from stakeholders, we identified the need to align our designs more closely with the existing design system used by Home Depot
We encountered constraints related to the use of maps from external sources that we needed to address in our design process
We decided to prioritize the development of an accordion layout for the store hours widget as part of our design strategy
Using wireframes and sketches helped us refine our design goals and iterate on different layout options to integrate features into the user interface. For example, we tested several accordion layouts for the store hours widget and used sketches to find visually appealing and user-friendly options for the home services list. This process helped us create an effective and aesthetically pleasing user interface that met the needs of our users and aligned with our design vision.
03
Design
Hi-Fi Prototypes
We incorporated feedback from stakeholders throughout the design process by presenting wireframes and hi-fi prototypes and gathering feedback through design critiques. Based on the feedback, we made changes and iterations to our designs to ensure they aligned with stakeholder needs and expectations. Working closely with the design team, we redesigned the page meeting stakeholder needs while aligning with the company's design standards.
04
Test
Hi-Fi Prototypes
User testing
User testing
We tested the refreshed Store Details page with 12 participants through UserTesting.com, equally distributed between mobile and desktop users. During the testing sessions, we asked participants to complete tasks related to store hours, finding services, holiday hours and suggestions for improvement. The tasks included finding store hours, home service information, and navigating the accordion layout for store hours. Participants were also asked to find upcoming holiday hours for specific departments and to identify which departments were currently closed.
Through user testing, we were able to identify pain points and areas for improvement in our design. The feedback we received helped us improve the user experience and ensure that our final design met the needs and expectations of our users.
Results
We gathered a significant amount of positive feedback on our prototype during the user testing sessions. Participants found the store hours header and accordion functionality to be intuitive and easy to use. They especially liked how the headers stated if the department was open or not and what time it closes. They also appreciated the clear and concise presentation of the home services information. Additionally, participants rated the overall ease of use of the prototype highly, with many describing the interface as straightforward and user-friendly.
However, we also received valuable feedback on suggestions we could possibly make to improve the experience further as noted on the summary slides below:
Design iterations
The feedback we received from our user testing sessions helped us identify areas for improvement and make design decisions to enhance the user experience. Here are the main areas of feedback we received:
Mobile Optimization: Testers noted that there was too much excess information on the mobile version of the prototype, which required a lot of scrolling.
Hierarchy: Testers suggested moving the store services above the banner and placing quick links underneath the phone numbers to improve the hierarchy of the page.
Desktop Optimization: Testers noted that the desktop version of the prototype was crowded and required too much scrolling.
Holiday Header: Testers suggested removing the holiday header and replacing it with a date to avoid confusion.
Quick Links: Testers recommended adding quick links or anchor buttons for different sections of the page on desktop.
Incorporating feedback from user testing allowed us to identify pain points and areas for improvement. By addressing these issues, we were able to create a final design that is more streamlined, easier to navigate, and less confusing for users.
Mobile Optimization: Testers noted that there was too much excess information on the mobile version of the prototype, which required a lot of scrolling.
Hierarchy: Testers suggested moving the store services above the banner and placing quick links underneath the phone numbers to improve the hierarchy of the page.
Desktop Optimization: Testers noted that the desktop version of the prototype was crowded and required too much scrolling.
Holiday Header: Testers suggested removing the holiday header and replacing it with a date to avoid confusion.
Quick Links: Testers recommended adding quick links or anchor buttons for different sections of the page on desktop.
Final Live Design
Our final design is the result of incorporating feedback from user testing and making design decisions to improve the user experience. The design is streamlined, easy to navigate, and presents information in a clear and concise manner.
I design intuitive, data-informed digital tools that solve complex problems — with a focus on clarity, usability, and business impact.
I design intuitive, data-informed digital tools that solve complex problems — with a focus on clarity, usability, and business impact.
Tip: The key take-aways are highlighted in yellow for your convenience :)
Problem
People who visit the Home Depot website often struggle to find the store information they need. Even the most basic details like location, hours, and services are hard to access or understand due to the outdated design. Many of them feel annoyed and disappointed by the website, and end up not visiting the store or choosing a different brand.
What do people look for on the store pages?
The store pages are vital for helping customers locate their closest store and contact them easily. They also show the unique services that each store provides.
Location
Store Hours
Phone Numbers
Services
What was wrong with the page?
We identified several user experience issues with the page that needed to be addressed. The navigation was not intuitive and users had difficulty finding the store hours and home services. The page also had a lot of empty space that made it look dull and unappealing. The readability of the copy was low and the page lacked accessibility features and reviews that could enhance the credibility and trustworthiness of the store.
Difficulty finding store hours and home services
Page has a lot of empty space that makes it look dull and unappealing
Readability of the copy is low
Navigation is not intuitive
Page lacks accessibility features and reviews
As a result...
“I can’t find the Pro Desk hours”
“Where is the Pro flyer?”
“Does this store have a
wheelchair accessible entrance?”
“What's the phone number for
the Tool Rental Department?”
“What's the phone number for
the Tool Rental Department?”
?
How might we redesign the Store Details Page to make the store information more accessible and understandable for the visitors, and increase their satisfaction and loyalty to the brand?
The Solution
Our new store details page has a revamped store hours widget with more features, accessibility icons for easy recognition, redesigned home services elements for better visibility, clearer and simpler copy, and a google reviews element to showcase customer feedback.
My Role
Lead UX Designer / Project Manager
Timeline
May. 2022 - Sep. 2022
Team Members
Manan Monga, Aleks Kmieciak, + 9
Tools
Figma, Miro, Survey Monkey, Photoshop, Illustrator, UserTesting, Confluence,
Store Hours Widget
Finding store hours made easy
Before
After
Why?
After conducting user research and testing on the old widget, we discovered that users were confused by the widget’s design and assumed that the hours listed were for all the departments when in reality it was only for the specific department that was selected. This caused a lot of confusion. To address this issue, we focused heavily on redesigning the widget to make it more intuitive and user-friendly.
Take aways
The original store widget was outdated and difficult to use.
Users were confused by the widget’s design and assumed that the hours listed were for all the departments when in reality it was only for the specific department that was selected.
We redesigned the widget to make it more intuitive and user-friendly.
The new design proved to be user friendly and easy to understand through user testing and interviews
Store Details Widget
Getting all the information you need in one convenient place
Before
Why?
To make the widget compliant with legal regulations and current usability accessibility standards, we simplified the layouts and added accessibility icons to the store details. We also featured COVID-19 safety information and delivery and pickup options for each store. A pro flyer button was also included for our pro customers.
Take aways
Widget redesigned to comply with legal and accessibility standards
Accessibility icons and COVID-19 safety information added to store details
Delivery and pickup options featured for each store
Pro flyer button included for pro customers
User testing confirmed the new design’s ease of use and helpfulness
After
Home Services List
Visualizing home services
Before
After
Why?
We redesigned the home services from a long and cognitively demanding list that users had to scan through to cards with icons and names. User testing proved this made it easier and more user-friendly for users to find the home service they needed.
Take aways
Home services redesigned from list to cards with icons and names
User testing confirmed improved ease of use and user-friendliness
Users can find the home service they need more easily
Google Reviews
Increasing trust through reviews
Why?
At the request of the stakeholders, we incorporated a Google Reviews section into the page to improve SEO by increasing relevant keywords. To achieve this, we designed a section that would theoretically scrapes reviews from Google for each store being viewed. Testing proved it was easy and user-friendly to use.
Take aways
At the request of the stakeholders, we incorporated a Google Reviews section
Improve SEO by increasing relevant keywords
Scrapes reviews from Google for each store being viewed
Testing proved it was easy and user-friendly to use
Our Approach
01
Research
Current state analysis
Competitive Analysis
User Research
“How might we” exercise
Problem statement
02
Ideate
Informed Brainstorming
Crazy 4s Exercise
Sketching Exercises
Lo-fi wireframes/sketches
Final sketch review
Stakeholder Feedback
Final Sketch dot voting
03
Design
Hi-fi Interactive prototypes
Mobile and Desktop variants
Feature implementation
Team prototype reviews (3)
Design iterations
04
Test
Usertesting.com tasks planning
User Testing
Affinity mapping
Design iterations
Final design presentation
Developer specifications
Handoff to devs
My contribution
My role as the lead UX Designer and Project Manager on the store details project was to advocate for user research, competitive analysis, ideation and design. I collaborated with my team mate Aleks to conduct research and design activities, and to produce wireframes, high fidelity designs and interactive prototypes for user feedback and testing.
I applied a user-centered design process to redesign the store details page. This involved: analyzing the current state and competitors; defining and aligning on the main problem; and generating and evaluating ideas using sketching, wireframing, prototyping, and feedback sessions. The final solution is live on the site now.
01
Research
Competitive Analysis
Our first step was to analyze the store details pages of our competitors and see if we could learn from their design choices.
We found that:
For the store hours widget:
Most competitors, such as Lowes, Rona and Benjamin Moore, displayed the department hours without requiring any user interaction.
Lowes was the only competitor that had a Pro Desk feature in its widget.
Best Buy had a unique feature that showed the peak hours of the store traffic.
Lowes also had an interactive map that linked to the store location.
Current state analysis
To begin our research, we first had to pinpoint the problems and opportunities for enhancement in the current store details page. I facilitated meetings with the SEO team (our stakeholders) to gain more insights into the issues.
As a result of the discussions and meetings, we identified 7 key aspects of the store details page that the stakeholders prioritized by importance.
Displaying store hours information clearly
Enhancing the accessibility of store hours widget
Presenting the accessibility features of the store
Improving the visibility of home services links
Indicating the options for delivery in-store or curbside
Optimizing the placement and presence of Google reviews
Simplifying the layout of vehicle rental information
Utilizing whitespace effectively
Our objective was to leverage competitive research in order to devise a solution that caters to the needs of Home Depot customers by providing them with a convenient and straightforward way to access store and department hours, address, and accessibility information.
User Research & How Might We exercise
To better understand how Home Depot customers utilized the existing experience and to identify potential problems, I advocated for conducting user research and How Might We’s first before diving into solutions. I also invited our stakeholders to participate in the HMW and affinity mapping sessions with us, so that as a group, we can brainstorm solutions based on our findings.
We identified 8 key areas and formulated the most relevant HMWs that will guide us. Based on this, we created a main How Might We question that encompasses all the key aspects to help us in the ideation process.
How might we improve the visibility of home services links without cluttering the page?
How might we display store hours information clearly and consistently?
How might we enhance the accessibility of store hours widget for users with different needs and preferences?
How might we indicate the options for delivery in-store or curbside in a way that is easy to understand and choose?
How might we optimize the placement and presence of Google reviews to increase trust and engagement?
How might we present the accessibility features of the store in a way that is informative and inclusive?
How might we simplify the layout of vehicle rental information to reduce cognitive load and confusion?
How might we utilize whitespace effectively to create a balanced and appealing design?
?
How might we improve the Store Details Page to provide a user-friendly, accessible, and visually appealing experience for the visitors?
02
Ideate
Crazy 4s
With our HMW and research findings as our guide, we invited the design team and stakeholders to join us in a creative brainstorming session using the Crazy 4s method with four sets of quick two-minute sketching. Our goal was to generate ideas on how the user experience of the new features and ideas would feel like.
By doing the crazy 4s exercise, we explored different perspectives and approaches to the various features of the page and collaborated as a team to generate ideas and approaches we all agreed with.
We agreed to:
Use an accordion for the store hours widget to simplify the user experience
Display the home services list as cards
Adopt horizontal layouts for better use of whitespace
Include accessibility icons in the store details widget
Place the Google reviews section under the truck rental section
Wireframes/sketches
By doing the crazy 4s exercise, the design team was able to combine various ideas from the crazy 4s and HMWs and produce mockups of them.
Based on the final wireframes and sketches, the design team and stakeholders dot voted to select the most feasible solutions and ideas.
We learned that:
Based on feedback from stakeholders, we identified the need to align our designs more closely with the existing design system used by Home Depot
We encountered constraints related to the use of maps from external sources that we needed to address in our design process
We decided to prioritize the development of an accordion layout for the store hours widget as part of our design strategy
Using wireframes and sketches helped us refine our design goals and iterate on different layout options to integrate features into the user interface. For example, we tested several accordion layouts for the store hours widget and used sketches to find visually appealing and user-friendly options for the home services list. This process helped us create an effective and aesthetically pleasing user interface that met the needs of our users and aligned with our design vision.
03
Design
Hi-Fi Prototypes
We incorporated feedback from stakeholders throughout the design process by presenting wireframes and hi-fi prototypes and gathering feedback through design critiques. Based on the feedback, we made changes and iterations to our designs to ensure they aligned with stakeholder needs and expectations. Working closely with the design team, we redesigned the page meeting stakeholder needs while aligning with the company's design standards.
04
Test
User testing
We tested the refreshed Store Details page with 12 participants through UserTesting.com, equally distributed between mobile and desktop users. During the testing sessions, we asked participants to complete tasks related to store hours, finding services, holiday hours and suggestions for improvement. The tasks included finding store hours, home service information, and navigating the accordion layout for store hours. Participants were also asked to find upcoming holiday hours for specific departments and to identify which departments were currently closed.
Through user testing, we were able to identify pain points and areas for improvement in our design. The feedback we received helped us improve the user experience and ensure that our final design met the needs and expectations of our users.
Results
We gathered a significant amount of positive feedback on our prototype during the user testing sessions. Participants found the store hours header and accordion functionality to be intuitive and easy to use. They especially liked how the headers stated if the department was open or not and what time it closes. They also appreciated the clear and concise presentation of the home services information. Additionally, participants rated the overall ease of use of the prototype highly, with many describing the interface as straightforward and user-friendly.
However, we also received valuable feedback on suggestions we could possibly make to improve the experience further as noted on the summary slides below:
Design iterations
The feedback we received from our user testing sessions helped us identify areas for improvement and make design decisions to enhance the user experience. Here are the main areas of feedback we received:
Mobile Optimization: Testers noted that there was too much excess information on the mobile version of the prototype, which required a lot of scrolling.
Hierarchy: Testers suggested moving the store services above the banner and placing quick links underneath the phone numbers to improve the hierarchy of the page.
Desktop Optimization: Testers noted that the desktop version of the prototype was crowded and required too much scrolling.
Holiday Header: Testers suggested removing the holiday header and replacing it with a date to avoid confusion.
Quick Links: Testers recommended adding quick links or anchor buttons for different sections of the page on desktop.
Incorporating feedback from user testing allowed us to identify pain points and areas for improvement. By addressing these issues, we were able to create a final design that is more streamlined, easier to navigate, and less confusing for users.
Mobile Optimization: Testers noted that there was too much excess information on the mobile version of the prototype, which required a lot of scrolling.
Hierarchy: Testers suggested moving the store services above the banner and placing quick links underneath the phone numbers to improve the hierarchy of the page.
Desktop Optimization: Testers noted that the desktop version of the prototype was crowded and required too much scrolling.
Holiday Header: Testers suggested removing the holiday header and replacing it with a date to avoid confusion.
Quick Links: Testers recommended adding quick links or anchor buttons for different sections of the page on desktop.
Final Live Design
Our final design is the result of incorporating feedback from user testing and making design decisions to improve the user experience. The design is streamlined, easy to navigate, and presents information in a clear and concise manner.
Before
