The Asylum
Web to Store
Overview
Goal
Role
We are reworking the web-to-store journey to create a better experience for customers and more efficient systems for staff, helping them use their time more effectively.
To improve the web-to-store journey by enhancing the customer experience and upgrading staff systems, enabling staff to work more efficiently while providing a smoother, more satisfying journey for customers.
User Research, Interaction, Visual design, Prototyping & Testing
Status: Complete
Research & Discovery
The company's store order process was in a broken state and had a large impact on the customer's experience. My team was tasked with improving the process before the peak period started, mainly focusing on the communication the customer receives.
We started by gaining an understanding of the current journey and where the pain points were. Making a trip to the warehouse was a great place to start. We knew this was the point where the order left the customer's hands and went into the web to store journey. We followed what happens when an order is placed, how it is generated, picked, packed, and what communication the customer received.
.
Service Map image reference
Once we had the warehouse journey down, we headed back to the office and mapped out the process, including what systems are being used, what has human interaction and what the pain points were. Next, we made our way into one of our stores to see the process when web-to-store orders come into the store. Again, we mapped this process out. We now had a mapped-out journey from start to finish.
Our findings
-
The customer receives an email when an order is placed.
-
The customer received no email to say the order has been shipped.
-
It takes one staff member 14 minutes for every 10 parcels to send out communications to customers.
-
On average, during the peak period, 20-30 parcels are delivered to each store.
-
Some customers receive no communication at all that their order has arrived at the store.
The Asylum
The Asylum is the internal platform that staff use to manage customer sales orders via an iPad. Within this site, there is a dashboard for ‘web to store’ orders. In this area, staff can send out an email & a text to customers to let them know that their order has arrived. Straight away, I could see why the staff were having difficulty using this page. The ‘search’ functionality wasn’t clear, and there were no buttons that showed you where to send the text and email from.
Metrics
In our store visits, we observed the process over several days and gathered some metrics on the journeys. We could see the pain points and challenges that the store was facing, and how much time and money were being wasted on the business.
Assumption Mapping
Next, we ran an assumption mapping session. This helped us gain an understanding of the team's thought process about what we wanted for the improved journey, and what issues we thought we might face.
For example, if we came up with a fix that involved the help of the e-commerce team, but assumed they could help us when they couldn’t. It could lead to disruptions that might have a big impact on the project goal.
Verifying our assumptions first helps us avoid any complications further down the line.
Feature review
I started to look deeper into the areas that were causing the staff the most trouble within The Asylum UI.
​1. The 'More Options' icon didn't stand out enough, and it also wasn't clear that all the communication functionality was with that menu. Such as sending a customer an email and a text.
2. The search & filter functionality only appeared when the iPad was in landscape mode. After observing 3 different stores, we found that some staff members were using the iPad in portrait mode and had no idea that the search functionality was even an option. The search feature itself could only search by full order number and not by name.
3. The table in the dashboard was too large and was causing rescaling issues on an iPad. Our assumption mapping confirmed that it had information that staff didn’t need or use within it.
Wire-framing
I knew that the new asylum had to be something that involved minimal training for the staff, as the new product needed to be launched just before peak period. Launching a new product before peak can be risky, as it could have a huge impact on the staff and the stores. The new version of the Asylum had to be simple enough for the staff to adapt to without taking too much time for them to get the hang of it.
I mocked up some wireframes for improvements that the asylum needed. I moved the search bar into the main view of the dashboard, so that there was no way it could be hidden if viewed in different formats. Furthermore, I removed the option icon and replaced it with 2 buttons. “Arrived” & “Collected”. When a parcel has arrived, the user will click “arrived”, which will send out both email & text together to the customer. The same applies when the user clicks “collected”
User testing the Wire-frames
With a tight deadline ahead, we decided to user test the wireframes with the Arndale store staff to see how they responded to the initial changes.
At first, we let them use the wireframes without any guidance, and the staff member thought it was a big improvement; however admitted it was difficult to visualise what we were truly trying to achieve in a wire-frame form.
Observing the user test helped me realise a few things I hadn’t thought about, which led to me making a few small changes.
Prototyping
Version 1
Version 2
Version 3
We didn’t want to change the dashboard visuals too much before the peak period, as it would take more time for the staff to adapt to it. So we kept the same style as the old one, but added in the two new buttons, search bar, filter bar and sort by. With these new additions, users can send out communications a lot faster. Once we had completed the user test for the first version, we thought of a way staff could reduce time even further by adding a multi-selection option. This allowed staff to select as many orders as they wanted and then send out the communications to them all in one go.
Launching and metric gathering
After testing the new dashboard with the staff 3 times and finally being happy with the new product, we released a training pack to all staff so that they could view what changes were on the way. Once the new dashboard was launched, we allowed a few days to pass before ringing the stores to gather feedback.
Overall staff were really happy with the new dashboard and found it very easy to understand with minimal training after reading the training pack.
​
The new dashboard would save massive amounts of time for the staff in-store and save the business money.
The results
BETWEEN THE 11/11/2019 - 6/01/2020
82.41%
OF ORDERS WERE MARKED AS ARRIVED
40.86%
OF ORDERS WERE MARKED AS COLLECTED
Since the new dashboard launched on the 11th November, 82.41% of orders were marked as arrived, and 40.87% of orders have been marked as collected.
​
Over a 3-month period before we did the launch, 77% of orders were marked as arrived, and only 12% were marked as collected.
​
Although we don’t have a 3-month set of data yet to compare, we can see from the stats that staff are starting to follow the procedure with the new dashboard. We believe this to be because the new dashboard is much more user-friendly and easier to complete tasks on.
​
​
​
​
What's next?
With the first phase launched and proving successful, we plan to optimise the process even further by adding scanning functionality to the parcels from leaving the warehouse and arriving in the store. When the parcel is scanned in the warehouse, it lets the customer know the parcel is on its way to the store. When the parcel arrives in the store, it's scanned and therefore marked as arrived, which will also send communications out to customers to let them know the parcel has been collected.