Published on | Prototyping: From UX to Front End — Medium Leo Recilla

From a brick and mortar store to an e-commerce site, This Table offers artisan foods, homemade recipes, and artisan stories accessible to all food lovers.

Emily, the founder, opened the doors to Olive the Senses in 2012. What started as a brick and mortar store specializing in extra virgin olive oils and balsamic vinegars has since expanded to This Table, an online artisan food marketplace that connects makers to consumers of artisan foods.

Brief

Our task was to redesign This Table’s website to increase conversion. This involved creating a fluid link between the content pages, Blog and Recipes, to the e-commerce components, Shop and Subscription Boxes, so customers can purchase products or ingredients for a recipe. Our project timeline spanned 3 weeks to deliver a mid-fidelity prototype of an improved user flow.

Objectives

Refine the user journey from learning about the company, reading recipes and blog, to purchasing a product
Show (and tell) the story of This Table throughout the site
Increase the conversion of customers purchasing products

Our Team

Our design team included me, Eveline, and Natascha, all UX Designers.

The Opportunity

A recent study from The Food Marketing Institute found that food shopping will be more common in the online sphere. By 2025, shopping online for food is expected to represent 20% of grocery sales, which equals to $100 Billion in annual consumer sales, or 3900 new grocery stores.

“Digitally Engaged Food Shopper” analysis, Jan. 30, 2017 by The Food Marketing Institute (FMI) and Nielsen (NYSE: NLSN)

As of 2016, according to a study from IBIS World, UBC, market share and concentration is highly fragmented; no industry participant controls more than 1% share of the market. This indicates that This Table is in a good position to be a part of this market.

The Challenge

In order for a website to succeed, it must communicate a memorable experience. Although This Table is filled with great content that people already enjoy browsing, the site sees a less than 1% add to cart rate, and the team from This Table is not entirely sure why. Our challenge is to investigate where and why customers drop off within the site before purchasing. Additionally, our team took note that Olive the Senses has its own website and clicking “Recipes” would redirect to This Table.

Currently, the site sees a less than 1% add to cart rate.

To fix the user journey in This Table’s website, we first had to look into the why, which came down to user behaviour and how they interact with the current website. We needed to identify the pain points in the user journey, how to gain their trust, and to depict the brand story effectively.

Research

To get us started on the direction of the website redesign, we collaborated with Emily to create a Market Positioning Map that placed This Table within a scale of contemporary to traditional and corporate to family feel. This would tell us the brand voice to convey on the site, the scope of the redesign in relation to the current existing site, and known competitors.

The redesign wouldn’t be too far off the current site structure in terms of showing a family and traditional feel. Consequently, now that we know the competitors, we can focus on identifying who our users are.

User Interviews

After 8 in-depth interviews, we identified the motivations, goals and shopping behaviour of our users. These would also tell us what customers valued and what we could improve on to gain their trust.

“I grew up on home-made meals. We always ate around the table and enjoyed each other’s company while eating great food.”

“I like to go in store and try different products before buying them. I like to browse a store and discover new things that way.”

“I don’t mind spending more for food if I have a connection with the artisan or company. Especially if it uses good quality natural ingredients.”

Surveys

We conducted surveys to find out if our interview data can be supported by the survey results. We sent out 2 surveys: to This Table’s mailing list (current & engaged users) and foodies from the general public (unengaged but interested users).

Survey says…
People from the general public found who made a product and where it was made as most important, and their trust in a brand would be gained from seeing mentions from blog posts or friends, and ratings and reviews. On the other hand, 87% of current customers surveyed visited the site for recipe inspiration.

Google Analytics

Conducting user interviews and surveys gave our team a good look into the user behaviours. However, we still needed to find which pages users dropped off from. This is where data from Google Analytics comes in.

Our findings are as follows: 85% of the users arrived to This Table from the Olive the Senses website, 10% came from organic Google search, and 5% were newsletter clickthroughs. Users would get lost within the site (in a good way) and browse extensively but were not purchasing.

Identifying demographics

A look into the age groups told us that most users that spent the longest sessions were either 25–35 (using mobile and desktop) or 55+ (using tablets). With this information, we focused on the 25–35 age group who used mobile (34%) and desktop (50%) devices more prominently, in order to fulfill what’s within our scope as well.

Affinity Diagram

Our team compiled the information we gathered from our user interviews, surveys, and Google Analytics results into an affinity diagram. We categorized each groups into purchasing behaviour, types of products purchased, and consumer-company relationship. We can then summarize our findings into a user persona to represent our primary user.

User Persona

Meet Joy; since she was young she has always been around homemade food made by her family. Now, as an adult, she values quality, minimally processed gourmet food from brands and companies she trusts. She loves to recreate recipes that she finds in food blogs and even through social media such as Instagram pots and Facebook groups.

“I love knowing the ingredients that go in the food I make comes from a fair, sustainable, and local company.”

Initial Testing

Before designing the changes for the new user flow, our team decided to conduct 2 phases of tests; first with the existing website, and another after we made changes and refinements. This is to test the current perception of This Table as a company and its usability. Phase 1 was comprised of a Heuristic Analysis and a Likert Scale Test which would turn into a User Journey Map. For Phase 2, we would test the prototype.

Heuristic Analysis
With the help of our UX Design colleagues, we tested them with a series of Heuristic Analyses that evaluated the following heuristics:

Match between system and the real world
The system should speak the “users’ language”, with words familiar to the user.
User control and freedom
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue.

Their tasks were to browse and purchase a product, and if the heuristics failed, they would rate the severity from 1–6 and describe their thoughts. In total, we completed 5 analyses.

Likert Scale Test
We conducted a total of 5 Likert Scale Tests to get a better idea on how the users were feeling on specific points of their journey through the website.

Our Scale Test results are as follows:

Users were not sure what the company sold based on the first impression of the homepage
They were unsure why products were so expensive
They loved the recipe pages with the beautiful photographs
They were not comfortable buying a product
Unless they were certain what was contained inside each box, they didn’t feel ready to purchase a box

User Journey Map
With our findings above, we mapped out their emotions at each point of their browsing.

Re-evaluating Project Goals

Knowing our users’ goals, the client’s business goals and our initial testing results, we re-evaluated our Project Goals to focus on for our MVP:

Grow this Table’s customer base by increasing conversion of purchasing customers & creating more opportunities for brand awareness
Convey brand perception effectively by increasing brand trust & broadening the perception of company values throughout the website
Improving the purchasing flow by alleviating frustrations of sold out items & other pain points in the checkout process

Planning

We initiated our planning phase by compiling several e-commerce and food websites mentioned by our client from our Market Positioning Map collaboration and from our domain research. This gave us a better understanding of standard website features.

Competitive / Comparative Analysis

We learned that Try the World and Mantry provided product reviews, ratings, and testimonials, which we would implement to This Table to gain customer trust, as supported by our survey results. We would focus on optimizing the Recipes and Subscription Box pages, and implementing Reviews & Ratings into the product pages.

Card Sorting

From our Heuristic Analyses, the Recipe page’s filtering system was brought up multiple times. We felt that this needed optimization so we set up an Open Card Sort where participants set up the category groups themselves.

The current filtering system in the Recipe page

Using our Card Sort results, we redesigned the filtering system to have 4 main filter categories preceded by 6 advanced filters for a more specific search. Based on our User Research, our users were very particular in the types of food they chose; they knew what nutritional or dietary value they did or did not want, so the advanced filters would be useful for them.

Revised filtering system after Card Sorting

Challenges

After addressing issues with page structure and user flows, we still had questions at this point in the game.

We were still unsure of This Table’s unique value proposition and what sets them apart from other similar companies.

We were still stumped about the Olive the Senses redirect to This Table. Could these be combined into one site?

We were still unsure of how to fix the user drop off from the site.

#stumped

After a project check-in with our instructors, they suggested to conduct further testing for our team to find answers and to resolve our assumptions.

A quick visit to Whole Foods
We chose to visit the nearest Whole Foods to ask people that shop higher end products, and asked them to browse through, starting from Olive the Senses then into This Table. We asked them the following questions:

How would you navigate the site if you were just browsing?
What is your perception of the brand?
How was the experience for you overall?

We learned that they get confused as soon as Olive the Senses redirects to This Table, they didn’t find a good reason why products were priced high, and did not find an immediate connection to the brand.

Possible Solutions
Going back to our Google Analytics results, 85% of the traffic going to This Table came from Olive the Senses. This would be the basis of our solutions.

Combine the 2 websites into 1
We could tell the story of how Olive the Senses has expanded into something grand in the form of one website, This Table.
Create a splash page that introduces This Table
The splash page could inform the user (only at the first time landing here) of the page redirect from Olive the Senses and what This Table is.

We proposed the possible solutions to Emily, who brought Talya, in our second client meeting. Talya was in charge of social media and marketing.

From this to that.

It was a very fruitful meeting that really set the sails back into course. Although Emily was keen on keeping the two entities separate, we still took the opportunity to brainstorm collaboratively on what makes This Table unique. Emily and Talya provided many ideas for the story that is currently not being shown on the current website. We would move forward with our second solution with the splash page and implement our new ideas.

A few takeaways from this session were how their goal is to bring back the notion of having conversations around the dining table, how their products were closely vetted, how they choose to support artisans that have no online presence, and how they make all their recipes from scratch together as a team every month.

Sitemap

With our minds revitalized with new ideas, we integrated them back into the project starting with the Sitemap by reorganizing the pages and renaming some of the main navigation links.

Current Sitemap

The changes are as follows:

Recipes moved to the first option on the left
Being the most visited page on the site (87% surveyors visited This Table to find recipe inspiration), we moved Recipes as the first navigation link. The rest of the main navigation links were re-ordered according to how users browsed through each page from our Whole Foods testing.
Our Story renamed to About Us, with pages added
Our Story currently contained the company values and the team members. However, to increase brand trust and improve brand perception, we added pages that explained how This Table creates homemade recipes, how they vet and discover artisans, how the company started, and the team members. These came out of our second meeting and, in turn, would really showcase their passion for food.
Gourmet Box renamed to In a Box, with pages added
We introduced the idea of having a Taster Box to Emily, who was open to adding this to the Gourmet Box component. Offering Taster Boxes to customers would not only recreate the in-store on tap tasting experience, but also serve as an option to customers who are not ready to commit to a subscription model. On the current box page, there is a section that shows the different items found in a box, however, based on our initial tests, users were looking for a more detailed list of the types of products found in each box.

More importantly, what type of products? The people must know!

Fixed My Account section & added pages
Currently, there is no way to sign up for a new account when clicking My Account on the top right corner of the page. This option would be added, along with pages to view Subscriptions, Account Settings, and Order History, to show company transparency.
Added a Favourites section
We added a Favourites section as a result of our User Research. Users were accustomed to bookmarking recipes but often forgot about and lost them in their internet browsers, so our solution was making this more accessible in the website.

New Sitemap

Design

Using the Design Studio process, our team simultaneously sketched out page layouts for each page of our paper prototypes for desktop and mobile. We explained our rationale to each other and combined our versions accordingly. This would decrease the amount of changes to make through our prototype testing phase and moving from low to mid fidelity prototypes.

Conversion Funnel

Looking into the conversion funnel, we focused on the Awareness, Interest, and Desire components which leads to the end goal: the checkout process.

The four main points of our conversion funnel are:

A) This Table’s story and values
B) Creating trust and building a community
C) What makes This Table unique
D) The checkout process

To the right of the funnel on the diagram above is the new, revised user flow. We wanted to ensure the users remain engaged through newsletters. For example, by favouriting an item one week, the next email could then be personalized to remind them of the products or recipes they favourited. Also, if an item is out of stock, the user could opt in to be contacted when it’s available again. The goal is for the newsletters to bring users back into the top of the funnel.

A) This Table’s story and values

Based on our Likert Scale Tests, users were not sure what the company sold based on the first impression of the homepage.

According to a recent study by the Baynard Institute, 30–40% of the top-level categories should be represented via the homepage content. Our solution is to show a hero image of products representing each category offered in the Shop page. As an added interactivity, users can select a button to go to that category page directly.

Below the Featured Product section is an area we used to display This Table’s main values and what users can do with this site: Enjoy exquisite food, Gather exceptional friends, and Discover excellent artisans.

B) Creating trust and building a community

Currently, the website has a comment section below products. Our team expanded on this by implementing a Rating and Review feature. This would be useful for new customers to gain their trust, and to discover new brands or companies. Additionally, it would help with SEO and Google can display an average star rating directly in the search results.

On the product page, we added additional images for nutrition facts and ingredients, and any dietary info under the price and rating. This would show company transparency and increase customers’ trust for the brand. We also added a link to the artisan page below the product name, where customers could read about the artisan’s story. This also brings the consumer closer to the maker of the artisan product, one of our client’s business goals.

We also added Pull Quotes to have a break in the product and recipe grid. The copy could also change depending on the season or occasion to suit the page. This would represent the casual conversations that take place within the dining table, a goal Emily wanted convey.

C) What makes This Table unique

Taking our new ideas from the brainstorm session with Emily and Talya, we created dedicated pages for how they create recipes as a team from scratch, how they build relationships with artisans, and the wonderful team behind This Table.

D) The checkout process

As we re-evaluated our Project Goals, one of our top priorities was the checkout process. We redesigned this section so any irrelevant information, the header navigation and footer, were removed. We also indicated user feedback by informing them which stage they’re at in the checkout process using the green checkmarks.

According to an article about best checkout persuasion practice, 1 in 4 abandon online purchases due to forced registration, so we enabled users to Checkout as a Guest.

Font Choice

During our initial tests, users found the current stylized handwritten font, Bilbo, hard to read at times. We researched possible alternatives in Google Fonts and found Dancing Script, a script font that was more rounded and less sharp, to convey This Table’s inviting and amicable brand voice.

Delightful Design

We incorporated colourful illustrations to help convey a lighthearted feel to the website. It would also serve a purpose as a fun, interactive component with animations added after a button is clicked, or a feedback element with error message.

Taking some of the products offered such as kitchenware and their most sought after olive oils and turning them into visual elements would add to This Table’s welcoming nature.

When clicked, the “Sign up” call to action will prompt the olive oil bottle to fill up the button with delight.

Missed required text fields will prompt an alert for that particular text field.

Prototype Testing

The main feedback we received from testing our low fidelity prototype was to automate the calculation of shipping cost in the checkout process. Initially, shipping costs would show after the user inputs their email, but users preferred to see this information when they checkout. Our solution was to have the site ask for access to their location for shipping purposes.

Iterations of the checkout page from low to mid fidelity prototype

usertesting.com

This was our first time conducting prototype tests with usertesting.com. We really liked that we could specify our target demographic to align with our user persona. We also found the recording of how they interacted with the prototype and their feedback comments very useful. Overall, the test results were positive, it was easy to use and navigate through, with only the Filter button that they had some difficulties with.

Iterations of the Filter button

On the first version, users could not find the Filter button. Because it was grayscale, it blended in with the background so they couldn’t find it right away. With the second version, we increased the contrast and aligned the button to the centre. However, the testers were unaware that they had to click the Filter button for the selected filters to apply. For the third version, we removed the button completely and adding a filter would auto populate the grid, and further tests proved this version to be the most effective.

Storyboard

Based on our User Research and User Persona, we created a Storyboard to demonstrate Joy’s love for food and how This Table aligns with her values.

We also created a Scenario to illustrate the ideal situation where Joy would interact with This Table.

Scenario
Joy’s friends are coming over for dinner for a casual get together. Knowing Joy is an excellent cook, they request for her to surprise them with a new Asian cuisine to try. She also remembers they have dietary and nutritional requirements she has to consider before choosing a recipe to recreate. She came across a local, artisanal foods company called This Table and loved that they valued making specialty ingredients accessible for all, the connections they make between artisan and customer, and bringing back conversations around the dining table.

Tasks – Part 1

Browse through the Recipes page
Search for a Gluten Free and Low Sodium recipe
Save the recipe for later

Desktop Prototype

Click here to view the project `P5 – This Table – MidFi – Desktop`

Tasks – Part 2
2 weeks have passed and Joy has signed up for This Table’s newsletter. While on the bus, she receives an email from This Table to remind her of her favourited items.

Add the Plum Brandy Chocolate to cart
Take advantage of the Discount offer by adding a Taster Box to cart
Choose the following items to add to the Taster Box:
Olive Oils: Roasted Pumpkin Seed Oil
Jams & Spreads: White Chocolate Raspberry Butter
(The rest will be chosen automatically)
Proceed to checkout

Mobile Prototype

Click here to view the project `P5 – This Table – MidFi – Mobile`

Future Considerations

Though we were able to work within our scope, there are several areas our team wanted to work on further. First is to compare further test results after we made our changes to the test results from the original site before we worked on it. This way we can gauge the improvements we made and if they were effective in increasing conversions.

We could also create a second User Persona for 55+ aged users. My first assumption is that this would affect the layout significantly. In order to make the text more legible and accessible, the text size may need to be scaled up, and the new script we chose may be affected as well. This is also the age group that used tablets to browse the website, so designing the break points for the responsive website will need to be integrated.

Lastly, it would be insightful to see if brand perception has improved, how much trust and transparency is affected, and if any confusion on being redirected from Olive the Senses’ website to This Table has been cleared. Completing the project to its high fidelity version would have been great, had our timeline allowed for it.

Summary

This has been a very extensive investigation of This Table’s website. Our design choices relied heavily on the Research phase, and required multiple tests on our design iterations. I feel that I could still use more opportunities to improve on conducting user tests.

After our final presentation to Emily, she and our team were very happy with the results of our project. She has been open to our ideas since day 1 and had been a pleasure to collaborate with. Our team worked well with each other, and although my motivation for the project was tested a couple of times after working on food related websites in the last 2 projects, I’m surprisingly still longing for food.

UX Case Study: P5: This Table was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Case Study: P5: This Table

Cool stuff, every week

More Articles