The Challenge
Giving Users Back Their Time
Our primary goals for this project were to offer users a way to automate orders through their POS integration with HLC and to drive an increase in overall order frequency.
My role: UX design, UI design, research
Research gave us key insights into the major pain points affecting our users and ultimately helped inform the project scope.
I built out a user persona to distill essential feedback and followed it throughout my design process to ensure decisions were founded in user-centered design principles.
While crafting a user journey map, it became clear to me that our biggest opportunity to address user pain points was early on.
By automating inventory checks and cart builds, retailers would be able to spend that time every day taking care of other responsibilities.
The Brainstorm
Defining Features and Building Wireframes
After exploring various solutions, the most feasible and scalable idea the team identified was an automated buying tool integrated into HLC's existing B2B site.
User flow helps visualize the optimal places within the buying process to add the automation tool
The two pages where the widget would live were the product details page and the 'View by item' search results page.
My next challenge was figuring out the best way to implement the widget into those pages.
Position of current Ordering container on product page
Exploring accordion (top) and tab (bottom) solutions
For the product details page, the solution I ended up using was simply adding the Automate & Save widget to the bottom of the existing ordering container.
This was the least disruptive option, and it also meant Automate & Save was never hidden.
Three states of Automate & Save — Disabled, Enabled, Unavailable
For the 'View by item' page, I struggled to find a solution in an already clustered table of information. Ultimately, I proposed we remove the column reserved for a product's part number, and instead combine that into the product description column.
This was the simplest fix and allowed enough space to fit Automate & Save.
The Result
Elegant Integration
In the end, the design achieved something that, in hindsight, should have been a primary goal in my mind all along — it integrated seamlessly in our interface and caused minimal disruption to the user's typical buying experience.
Edit modal
The last challenge was designing the interface that allows users to manage all of their automations. In early iterations of the design, I proposed filters in nearly every data column to give users the freedom of customization I assumed they would want.
Old version of the manage automations page
After some internal disagreements among the team, and finally some validation from feedback, I scaled back the level of customization and reserved a filter only for the delivery address. In the end this was the right decision — it meant a less overwhelming user experience.
The final manage automations screen