User Experience Design
Liquorland Project
The Liquorland project had a tricky problem to solve: all orders had to be shipped from one single store, yet not all stock on the website was stocked in every store.
Solutions on other websites:
Default the user to a random store
Have no default store, but limit the range of products the user can see
In both solutions, websites limited the product range, which gave the impression that there was less product available online. I knew that part of the solution to this problem was to expose the entire range of products when first entering the website, and to not auto-assign the user to a particular store.
User testing was required to validate assumptions about what the initial user journey should look like.
This project was done while employed at Solutionists.
Learning Goals
Learning Goal 1: Store selection
I wanted to see how users would respond when forcing them to choose a store before they could add an item to their cart
A: Force a user to select a store
The problem with this wireframe prototype was that users made the assumption that everything on the site was out of stock, due to the ‘add to cart’ button being greyed out.
B: Defer store selection until later
It seems obvious now, but no user would select ‘add to cart’ if there is no price showing. And some users completely missed the ‘choose a store to see price & availability’ button, reminding me that button text always needs to be a minimal length for easy scanning.
Learning Goal 2: Geolocation
I wanted to gauge how users felt about browsers wanting to know their location.
2/5 Users Block
These users block this popup out of concern for privacy without thinking.
3/5 Users Allow
They tend to assume that the website needs their location to grant the website permissions, or auto-fill addresses
Learning Goal 3: Product Range
Did users want access to the entire product range?
Having the entire product range available on first visit appealed to most users, but some only wanted to see stock from their selected store. So giving the users a ‘show in-stock items only’ option was essential to cater to both cases.
UI Solutions
Geolocation
Users were somewhat comfortable with the ‘browser wants to know your location’ popup so I knew this could be used in the user journey. But landing on the website for the first time requires the user to select ‘yes’ to the age gating prompt, so overwhelming the user with popups was to be avoided.
How to prompt the user to choose a store?
From the user testing I learned that users need to see a price for a product before adding it to their cart. So I opted to use the simple text ‘get price’ in place of the ‘add to cart’ button, which will bring up the modal ‘choose store to get price’. This solution covers both the user goal - see the price before purchasing - and the business goal - fulfill an order from one store per order.
Unfortunately I was unable to validate this solution as there was only one round of user testing that was funded.
“Get Price” modal
The ‘get price’ modal gives the user a few different options for assigning their store.
Search using suburb and postcode
Detect my location (geolocation: allow website to know your location)
Browse stores - select store from an interface
Store selection in header
Users also have the tried and true option of selecting their store from the header. In testing, they intuitively looked in the top right region of the header.
Product Range
This solution was fairly straightforward: expose the entire product range but allow the user to show only in-stock products for their currently selected store.
What roles did I play in this project?
Wireframe prototyping
These prototypes were used for the user testing.
UI Design
After UX was completed, converting the black and white wireframe into a branded version, with sample page and content design to guide their web marketing team.
User Research Synthesis
Reviewing the feedback from the user testing, find patterns in the feedback and making changes based on that feedback
User testing
Took users through the various missions in the wireframe prototypes, asking them questions about their experience along the way
Functional Specification
I detailed all of the custom UI features and what they would do. The development team was able to use this to provide estimates on the coding effort required.