The Rundown: We came up with the concept of designing and developing an online shopping experience for Oak & Thread - a Target furniture subrand we created. Oak & Thread provides trendy, high-quality furniture at an affordable price point.
My Role: UX/UI Design + Development + Checkout Flows for our Team of Five
Target wants its users to have a seamless experience finding high-quality yet 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 might 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 up, login, and checkout processes, as well as streamlining filtering and searching flows for consumers looking to purchase furniture, will motivate more users to buy furniture from Target’s online store.
The video below shows the experience from the customer's point of view. Coding it in Bootstrap allowed us to utilize a familiar checkout process with a progress bar, similar to competitor websites. We were asked to include security questions in our coded design. However, through usability testing, this step was deemed unnecessary. Instead, I would suggest adding a "Guest checkout" button to speed up the process for making a purchase.
View Project SlideshowI created this tool to help us quickly and easily define and communicate our business idea and concept. If we had a bit more time, I would have loved to have added an augmented reality element so users could view how the furniture would look in their own homes, much like some of these competitors.
Usability Testing PlanWe wanted to find out how our users think and what they look for when they shop online. In order to accomplish this we gained insight from a survey with 570 respondents and we conducted 6 interviews with potential users.
Out of our responses, 67% of those surveyed were in a similar age range as Target shoppers demographics in 2018 showed 60% of shoppers were between 30-49 years of age.
We asked what the most important factor is while shopping for furniture and quality was the most important.
Most people surveyed would spend anywhere between $500-$1,500 on a brand new living room coach.
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 were given the option to add additional stores that were not listed. Out of 560 responses to this question, our users added more than 40 other furniture retailers!
Here are the top places chosen and what these businesses competitive advantages and net values are.
Before we decided on our name Oak + Thread, we gathered inspiration from a Target brand named Project 62. We also wanted users to have access Target's website from ours and vice versa. The sketches I drew for the checkout flow, were the deciding factors on laying out these steps in a way that would be familiar for users wanting to purchase online and we turned them into our validated low fidelity prototypes. Please click on images below to view them full sized.
We stayed on brand with Targets colors, we chose to disperse the "Target red" color throughout the microsite.
We decided on these warm tones because they are inviting and go well with our brand's furniture selections.
Following an agile design method, after usability testing on the low fidelity wireframes, we decided on a final plan for our high-fidelity prototypes which were then turned into our coded, mobile-optimized prototype seen below.
Please click on images to view them full size.d
.jpg)
.jpg)
The lead developer Lauren and I practiced paired development and paired design together. We found it to be a great way to learn and get the work done well the first time.
Though our designs were thoroughly tested, we still needed to be ready for user errors to occur. We design for humans and errors are sometimes inevitable- we planned for this ahead of time, making sure to provide kind warnings that would be accessible and helpful for users.
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 they are going.
Originally this progress bar was designed in Adobe XD. But, we had to modify it using Bootstrap components when coding because the design became too complex and time consuming.
After several iterations, we decided to show input errors this way. We first only showed a red outline around the input box, then we decided to add an "X" and checkmarks for users who may be have colorblindness.
Understanding what is technologically feasible is vital to the success of all digital products and design decisions. I wrote an article about having empathy for developers- please check it out!
