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
Heuristic Evaluation
Competitor Analysis
User Flow
Sketching & Wireframing
Prototyping
Usability Testing
Developer Handoff
How do you improve an existing feature?
Talk to your users and understand their pain points.
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.
Customer Feedback
The feedback that we received from our Customer Experience department all said that our branch finder was difficult to use with a poorly-designed user interface.
Current State Evaluation
Further assessment showed that the original design of this branch finder had been very poorly implemented by the developers who brought this into production.
Competitor Analysis
The
Current State Evaluation
Current State Usability & UI Problems
The interface was unintuitive
Color contrast issues were rampant.
Low quality control lead to poorly-implemented features.
The Check Other Stores button on the product details page didn’t show stock at other stores.
The arrows next to the branch name on the Store Details Page didn’t do anything.
Competitor Analysis
User flows are a key part of my design process.
This is how I come to understand exactly how my design will work and how every page, button, and user action is interconnected. I just love creating diagrams as a whole, but the ones that I made for SiteOne’s branch finder have never been equalled.
The full user flow is to 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 flow for a single branch outside of the entire, interconnected store and site experience.
User Flow
User flows are a key part of my design process.
This is how I come to understand exactly how my design will work and how every page, button, and user action is interconnected.
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 flow for a single branch outside of the entire, interconnected store and site experience.
Prototyping
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.
