SiteOne Branch Finder
With over 600 locations across the US and Canada, SiteOne Landscape Supply depends on a seamless branch discovery experience to connect customers to their local store. However, the mobile app’s original Branch Finder was disjointed, outdated, and a real speed with the company’s location-driven experience model. I completely redesigned this feature, transforming it into one of the most polished and high-performing elements of the app.
LEAD DESIGNER
FEATURE REDESIGN
MOBILE APP
Figma
FigJam
Full Story
Usability Evaluation
Competitor Analysis
User Flows
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
Development issues that hadn’t been properly addressed during QA.
Customer Complaints
Customers frequently complained that the branch finder was difficult to use and that it didn’t provide enough information about the stores.
There was no Spanish language support.
Competitor Analysis
I always do a thorough analysis of our direct and indirect competitors, and I often look to other apps and websites for UI treatments that can inspire my current project. In this case study, I focused on other companies that have different experiences for different brick-and-mortar stores.
Prototyping
I usually start sketching wireframes for initial brainstorming. It’s the fastest and most natural way to start thinking about layouts and the function of my design.
Often, in between design states, I return to paper to test out a few quick ideas or or variations before prototyping in Figma.
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.