We designed and developed an online shopping experience for Oak+Thread, a furniture sub-brand of Target. Oak+Thread provides trendy, high-quality furniture at an affordable price point.
Please enjoy our design process below!
UX/UI Design + Development + Checkout Flows for our Team of Five
Target wants its users to have a seamless experience finding high-quality affordable furniture online. Users should be able to effortlessly search for the products they need for their homes and purchase them through an intuitive checkout process. How can we create a frictionless online shopping experience from sign-in to checkout for users looking to find the perfect piece of furniture?
We believe that simplifying the sign-in, login, and checkout processes, and streamlining filtering and search flows for shoppers will motivate them to buy furniture from Oak+Thread.
The video below shows the experience from the customer's point of view. Coding it in Bootstrap allowed us to use a familiar checkout process. It has working text fields and a progress bar similar to how competitor websites use them.
View Design Deck PDFI created this tool to help us quickly and easily define and communicate our business idea. The key takeaway from this tool is the value propositions I uncovered. Research showed how Target has a loyal customer base who enjoy trendy furniture in their homes.
View Usability Testing Plan
We wanted to find out how our users think and what they look for when they shop online. To do this we gained insight from a survey with 570 respondents and we conducted 6 interviews with potential users. The results from the survey helped us confirm that customers valued quality and price when shopping for furniture.
Out of our responses, 67% of those surveyed were in a similar age range as Target shoppers demographics in 2018 which showed 60% of shoppers between the ages of 30-49
We discovered that quality was the most important factor when shopping for furniture.
Most people surveyed spent anywhere between $500-$1,500 on a brand new living room couch.
One question we asked: "Which of these retailers would you buy furniture from?" Our users could select up to three stores from our list, and we gave the option to add more stores that were not listed. Out of 560 responses to this question, those surveyed added more than 40 other furniture retailers! The survey helped guide what stores we were going to research for inspiration. I did the competitor analysis to compare checkout flows for ideas on how to design the checkout experience that customers would be most comfortable with.
Here are the top businesses chosen in the survey, and what their competitive advantages and net values are.
We imagined what the ideal user experience flow would look from the home page to check out. How could we make it easy for the shopper to navigate the website? During checkout the shopper was forced to register which is big reason shoppers abandon their carts. This frustrated people during testing since there was no " Guest checkout" to give them freedom to choose. We fixed this by removing the required registration field. This exercise helped us move forward with our information architecture.
We visualized the navigation flow on the website seeing that we did not know how many pages we needed to design for a clear and logical flow. We had difficulty deciding on the order of our secondary navigation because we did not want to provide too many options. Completing this map was our last step before moving to the UI implementation.
Before we decided on the name Oak+Thread, we were inspired by Targets brand Project 62. We wanted users to have access to Targets website from ours, and vice versa. The sketches I drew for the checkout flow was the deciding factor for how shoppers would be buying online. Testing low fidelity was not distracting now that there were not colors or fonts to look at yet. Please click on the images below to view the checkout flow.
There were three of us designing the high fidelity pages, so we needed to make sure they would all look similar. Before starting high fidelity prototypes, we needed to figure out design elements first.
To stay on brand with Targets colors, we chose to disperse the "Target red" color throughout the microsite.
We decided on these warm tones since they are inviting and go well with our brand's furniture selections.
Though our designs were tested, we still needed to be ready for user errors to occur. We design for humans and errors are inevitable. We planned for this by providing kind warnings that would be accessible and helpful.
Users were confused by this aggressive error modal during checkout. Our solution was to get rid of it and add a clear call-to-action button that tells users where the error was and where to go next.
Originally this progress bar was designed in Adobe XD. However, we had to modify it using Bootstrap components when coding because the development became too complex and time consuming.
After several iterations, we decided to show input errors this way. We first showed a red outline around the input box, then we decided to add an "X" and checkmarks for users who have colorblindness.
Users were confused by this aggressive error modal during checkout. Our solution was to get rid of it and add a clear call-to-action button that tells users where the error was and where to go next.
Originally this progress bar was designed in Adobe XD. However, we had to modify it using Bootstrap components when coding because the development became too complex and time consuming.
After several iterations, we decided to show input errors this way. We first showed a red outline around the input box, then we decided to add an "X" and checkmarks for users who have colorblindness.
After testing the accessibility of our high fidelity prototypes, we decided on our final design for Oak+Thread. Not all the designs fit in with the components available in Bootstrap. Below is a gif of the high fidelity designs that we later updated for our coded website.
The lead developer Lauren and I practiced paired coding and paired design. When coding, she wrote most of the code while I reviewed it, observed and Googled solutions for us. We found this to be a great way to learn Bootstrap and get the work done right the first time.
Understanding what is technologically feasible is vital to the success of all digital products and should inform design decisions. I wrote an article about having empathy for developers - please check it out!