Tom Douglas

User Experience Design of E-Commerce for local restaurant group

P3Mockup.jpg

Overview

ABOUT

For this concept piece I was tasked with updating and improving the experience of an existing e-commerce website. I selected Seattle Restaurateur Tom Douglas. I chose this website because I wanted to research the popular local chef, but was surprised by the current website at the time, which appeared outdated and did not reflect the brand in a meaningful way.

Screenshots of Tom Douglas E-commerce shopping experience.

DURATION

This solo project was completed during a 2-week design sprint.

MAIN CHALLENGES

The primary challenge encountered during this project was understanding how to simplify the website. The website had recently been updated but was still linking back to an old version for the shop. Both the old and newer versions of the website were busy, cluttered, and confusing to navigate.

process

  • Competitor research
  • Task Analysis
  • Persona & Scenario Development
  • Information Architecture (sitemap, user flow, card sort)
  • Sketching & Testing
  • Digital Wireframes
  • Iterations & Final Prototype

FINAL PROTOTYPE

The prototype demo shows how a user can flow through the e-commerce experience.

My design is focused on streamlining steps for users to complete a purchase and cleaning up the amount of overwhelming content which exists on the original site. 

Because the website is content-heavy, I simplified the layout and added obvious call outs for primary actions.


Discovery

competitor research

I completed a competitive analysis to better understand how other similar sites operated. I identified two direct competitors and an adjacent competitor for comparison. I included the original website as well as the updated version side by side to see what improvements had been made and what features within the e-commerce still needed attention.

Interviews & task analysis

I conducted five in person user interviews to gain a sense of user impressions. I first asked a short set of questions specifically related to the Tom Douglas website:

  1. What is your first impression of Tom Douglas’ shopping site?
  2. Where do you expect to find the navigation?
  3. What would you like to be able to purchase from this site? Anything particular?
  4. Where would you expect to find the shopping cart?
  5. Do you like to see multiple photos of the item?
  6. Any other comments about the website(s)?

Next, I asked each of the users to imagine they were purchasing a gift card for a friend. I had them walk through this same task on the Tom Douglas website as well as the other two direct competitor sites, and asked them to comment aloud while going through the steps to complete the task. This was very helpful in benchmarking pain points within the shopping and check-out process.

findings

Users like (on competitor sites): 

  • Clean form and simple design
  • Easy options
  • Large photos
  • Guest Checkout

Users dislike (on Tom Douglas site):

  • No structure
  • A lot going on visually
  • "Class it up!" (quote from interviews)
  • Too many distractions

The challenge

Based on this research, I identified three primary pain points with the current e-commerce experience: 

  1. Even though the website was recently updated, the online shop links back to older version of site which creates confusion.
  2. The current online shop is hard to navigate, has many confusing features, and is very busy.
  3. Customers shopping for online items do not have a pleasant experience, which does not match the high quality expected of this brand.

Approach

To solve the problem, I began by identifying a persona to represent my target user, which would contextualize specific issues and allow me to think through user flows. I started sketching out possible scenarios, analyzed the current site navigation, and developed a user flow. I tested and iterated on my designs, and moved in to designing low fidelity wireframes in Sketch.

persona

I chose a pre-made persona from a selection provided by General Assembly for use as a design tool. 

scenario development

I sketched out a storyboard to illustrate a scenario showing Daniella attempting to buy her grandson a birthday gift off the website. She becomes frustrated with the website and eventually abandons her quest. My goal was to design a solution which would allow Daniella to have a positive, seamless experience as she navigates the website looking for a cookbook for her grandson.

sitemap: current site's organization and structure

User Flow through shopping experience

I developed a user flow based on potential flows a user (Daniella) might take through the e-commerce part of the site. This full flow begins upon entry to the website, but I have highlighted the checkout process in particular. I wanted to add in a simple check out experience which allowed the user to check out as a guest if they preferred. A common pain point with the current Tom Douglas site is that the user must provide their e-mail address and is required to have an account to purchase anything. 

card sort: where should all the content live?

My next step was determining how to integrate my findings with the current site structure, which is very content heavy. While my focus was on e-commerce solutions, I wanted to think about the site organization as a whole so that my redesign would help improve some of the confusion users indicated with the current site. I conducted an open card sort where I listed out each piece of main content on a sticky note and asked four participants to group them. I also gave them the option to write on the board if they thought something was missing or should be renamed.

From the card sort, I wrote down different group structures and highlighted the most recurring placement of content. From here, I started sketching out a possible sitemap for the redesign. 

Analyzing the card sort (left) and sitemap for revisions (right)


Design Process

sketching

I was now ready to begin sketching wireframes. I drew out a new navigation and home page to show how the site could be simplified, and then focused on the shopping and e-commerce experience based on my user flow and scenarios.

digital wireframes

Once I had figured out the primary screens in my sketches, I moved them into digital wireframes to test.

Primary screens for shopping experience

Gift Card Flow: Round One

Version 1 Gift Card Flow: 1.) Gift card home screen 2.) Upon clicking "Buy E-gift Card", pop- up window appears and user selects a restaurant 3.) User selects $$ amount 4.) Click "Next" and type in a personal message 5.) Confirm and "Add to Cart" 6.) Confirmation

Version 1 Gift Card Flow: 1.) Gift card home screen 2.) Upon clicking "Buy E-gift Card", pop- up window appears and user selects a restaurant 3.) User selects $$ amount 4.) Click "Next" and type in a personal message 5.) Confirm and "Add to Cart" 6.) Confirmation

Iterations: Gift Card Flow Round 2

A main pain point users encountered in testing was with the gift card section. In the digital wireframes above, each individual screen is shown (can also be viewed below in the left GIF). Users indicated they did not like how many screens they were required to go through within the pop up. I changed this page so that the majority of the decisions are made within the home page, and once the user arrives at the shopping cart they can decide if they would like to add a note to the gift card before checking out, which significantly reduced the screens.

Before

Before

After

After

Iterations: Button Phrasing & Placement

In testing, users appreciated the "added to cart" confirmation, but did not like the phrasing "checkout now" (below, left). This indicated they would be forced to check out. I did some research and realized "View Cart" is more standard phrasing, so I changed the button to reflect this (below, right).

p2_iterations1.jpg

In the screens below, I initially had a "Keep Shopping" button underneath "Checkout Now" in the shopping cart home. In user testing, participants indicated that they naturally wanted to click the bottom-most button. I discovered better placement was the top left corner, and less prominent. This keeps in line with the usability standard that there should be one main button indicating the action you want the user to take, and other options should be slightly less prominent to avoid confusion.

p2_iterations2.jpg

Iterations: Review Order Layout

Finally, I realized in user testing that the "review order" page was laid out in a way that was confusing because it strayed from standard conventions. I did further research and created a more traditional layout, which tested better with users. 

p2_iterations3.jpg

Desktop & Mobile Mockups

I revisited the wireframes to explore possible visual design solutions based on the current branding of Tom Douglas' site. I designed a simple mockup for the home page and created both a desktop as well as mobile version of the design

tomdouglasv2.gif

Next Steps & Reflections

This project was the first full user experience process I conducted during my UX Immersive program. I learned the importance of each individual step along the way. Some key learnings I found:

  • User research is key. If I were to do this project again and if I had more time, I would recruit more users of the Tom Douglas website to learn their main motivations and what they like/dislike about the site.
  • Sketching holds immense value. I have a tendency to want to move straight into digital designs, but I learned the value of rapid prototyping in this project. I was able to quickly sketch out screens to test with users before spending extra time on digitizing frames which allowed me to be more efficient throughout the design process.

Finally, next steps for this project include building out visual design for the rest of the screens and testing. I would also like to focus on testing other sections of the site - it is very content heavy, and I hypothesize that some of the content could be reduced or possibly removed.