SiteOne Branch Finder
SiteOne Landscape Supply’s branch finder was a mess and practically unusable. After considerable research and prototyping, I reanimated it into one of the most impressive features of the mobile app for a company whose entire digital experience changes based on the store you’re shopping.
FEATURE REDESIGN
MOBILE APP
Figma
FigJam
Full Story
Adobe Analytics
Usability Evaluation
Competitor Analysis
User Flow
Sketching & Wireframing
Prototyping
How do you improve an existing feature?
Talk to your users and understand their pain points. Analyze your data and identify problem areas.
Evaluate the current state for usability and accessibility.
Assess your competitors - direct and indirect - to find out who is doing this properly and what we can learn from their design.
Bring it all together to create a new and improved version that redefines the mobile app experience.
Test. Assess. Improve. Repeat.
Evaluation of the Current State
Current State Usability & UI Problems
Unintuitive interface.
Numerous color contrast issues and small, difficult-to-read text.'
No way to check the availability of a product at nearby branches
The navigation buttons on the Store Details Page didn’t work, so users couldn’t move between the other branches near their location
Customer Complaints
Customers frequently complained that the branch finder wasz difficult to use and that it didn’t provide enough information about the stores.
There was no Spanish language support.
Competitor Analysis
What are our competitor’s doing? Who has the best store finder experience?
This is how I come to understand exactly how my design will work and how every page, button, and uside of the entire, interconnected store and site experience.
Prototyping: First Pass
I always begin prototyping with sketches.
The act of putting pencil to paper is the most natural and rapid way to get ideas out of my head and into wireframes. Often, in between design states, I return to paper to test out a few quick ideas.
User Flows
Once I have a start to a few concepts, I go deep into user flows to understand how every single aspect of this design is connected.
The full user flow is too large to display on a webpage and it can only be fully appreciated is SVG format. Click the button to download the full resolution version.
Below, you can see the behavior within a single branch of this project.
Prototyping: Evolution
At this point, I’m moving from lo-fi to mid-fi wireframes, but I’m often working between quick prototypes, adjusting my user flows, and even sketching out some quick ideas for a new aspect of the project.
The Final Product
Next Steps
The mobile app branch finder redesign was a huge success and we have continued to improve the experience with further UI enhancements and real-time availability shown alongside the branches when viewing a product’s page.
This project laid the foundation for other Branch Finder improvements on our website, making it easier than ever for customers to connect with the right branch to get the products that they need as quickly as possible.
The next thing that I want to do is provide this level of enhancement to our desktop web Branch Finder.
