Over the course of 2 months, I decided to research, design and test a solution to solve the problem of customers having difficulty finding and ordering items online for curbside pickup. The goal of my solution is to be reduce the number of touchpoints needed to place an order online.
The Staples website is the main way to place an order for curbside pickup. With the sudden influx of customers now needing to place orders online due to the lockdown happening at the time, many customers shared their complaints with me.
“The website is too confusing, can I place an order through the phone with you?”
“How do I select your store as the curbside pickup location?”
“I am not able to find the curbside pickup option, it only displays delivery”
I had to learn more about the problem, so I asked the customers during their curbside pick-up some quick questions about their experience with placing an order using the website.
“It was hard to find the curbside pickup option since delivery is automatically selected.”
“Even after having this store selected as “My Store” on the website, it still asks me to select a store for pickup.”
“I was not aware I had to specify if another person was picking up at checkout, there was no option to enter pickup person information.”
This information helped me to know what look at specifically when analyzing the website. There were multiple problems that seemed to occur at different points in the ordering and checkout process. To properly locate these pain points, I mapped out a user flow of a customer who is trying to order something online.
Mapping out the user flow helped me visualize the ordering process. Visualizing it helps me analyze and look for any inconsistencies, repetitive actions, or unnecessarily complex decisions that the user needs to make. From these user flows specifically I learnt:
With the findings and learnings from my research, I knew that the goals of my solution included:
During my conversations with the customers, many of them mentioned that they order online by using their phone. With this in mind, I decided to create some mobile wireframes and see if they would solve the problems of a confusing ordering process.
By utilizing card components to display the weekly deals, as well as icons and colours that indicate whether an item is out of stock at your selected location, the customer can click through the process with very little confusion.
Customers were confused by having to select the store of their choosing twice. First when checking if the item is in stock, and again when adding the item to their cart and checking out. To reduce the confusion caused by this, the user has the option of seeing every store that the item is available in, selecting that store, and continuing with the checkout process with that store selected.
Customers picking up their orders often had to scurry and search through their emails to find an order number when they arrive to the store for pickup. With the recent orders conveniently accessible from the navigation bar, customers are now able to find their order numbers and pick up their order with no hassle.
With the wireframes done, and all the planning completed, I then took to creating the final designs and incorporating a style guide that represents Staples.
I created a style guide that includes the Staples colors, and fonts. Utilizing this style guide helped me to create final designs that are all uniform and give off that Staples “feel”.
With all the designs finished I linked them all together to create a clickable, working prototype to test with my managers and coworkers!
Creating this solution, a lot of the research came from talking to the customers who would come to our store, and discussing with my managers and coworkers their thoughts on the issue. The solution I created is a good start, but there is still a lot left to think about. What if a customer has multiple items in their card but not all of them are available at the same store? What if the user has an older phone and wants to continue placing orders on the website? An appropriate next step for this project would be to think about other use cases and ways to test my assumptions and choices that I made in my designs.
Although this project was a lot of fun and something that I'm proud of, I was able to learn a lot from this project. Once I had "completed" the design process, I looked back at how I well I conducted each step of the process and realized a lot of my mistakes, and how much better I could have approached this project.
Throughout this project, I took everything step by step. In my mind, once I had "completed" a step, I move forward to the next one and the next. I quickly learnt that this is in fact NOT how the design process works. Just because I completed my research and started designing wireframes, that does not mean I can't go back to gain more insight if I get stuck. The design process is all about learning, stepping forward a little, then learning again and making changes.
The BIGGEST mistake I made throughout this project was not testing anything that I had designed. Not testing the wireframes led me to missing crucial features such as the ability to view your shopping cart from any screen. Not testing the high fidelity screens meant that I do not know if my solution actually helps the customer or not. Testing is a crucial part of the design process, and it is equally important to test well. This means testing is the user can perform a certain task, how long it takes the user to perform that task, and how does the user feel about the product.
While working on this project, I had only brainstormed one solution and proceeded to develop it. Instead, I should have explored my options to see if other solutions were better suited to solve the problem at hand. It’s very likely that a mobile platform wasn’t the answer to the customers problems.