Discovering This Table
A UX Design Case Study in responsive e-commerce website
A Case Study of a User Experience Design in responsive e-commerce website for the ThisTable.com, a website where food lovers can purchase gourmet products, while findinding inspiration to nurture their passion for cooking. However, a drastic decline in conversion rates made the owner to look for help to re-design the userflow and generate revenue. This was community project, part of the UX Design Professional Program at Red Academy, Vancouver, BC.
Timeline for this project: 3 weeks
Our Team: 3 UX Designers (including myself)
Request: Re-design an e-commerce and food blogging website
Cooking has been one of my passions. I love the alchemy of ingredients, the magic feeling of transforming dough in baked goods, in enhancing the favour of prime ingredients, of being in control of what I eat and then, share my creations with my dearest ones.
That’s probably why I fell in love with this project from day 1!
Gathering the first ingredients
The story of This Table starts with their brick-and-mortar store, Olive the Senses, in Victoria, BC. As their olive oils and vinegars, sold on tap, hits the road of success, Emily and her team decides to expand the beyond the their physical store boundaries and create the online platform to sell their gourmet products and, at the same time, to share their passion for food. Their goal was to integrate an online food community around ThisTable, enaging them with amazing recipes and offering the opportunity to purchase the highest quality products, which can be delivered anywhere in the world.
Our client goals were:
- Grow the accessibility of artisan/gourmet foods to a broader audience through their e-commerce
- Create conversations around where our food comes from, how it’s made, who makes it
- Make a true connection between maker and consumer
After our first meeting with the client, we drafted a User Centered Design Canvas to organize the ideas we had so far about the project, incuding assumptions that could be or not validated by our User Experience work.
With this Canvas in hands, it was much easier to decide what UX tools o use to investigate the problems and come up with solutions to be tested.
The ideal oven temperature…
A recent study by The Food Marketing Institute shows that the future of food shopping in going to be more and more online. It estimates that, by 2025, online food shopping will represent 20% of grocery sales, which equals to 3900 new grocery stores.
In terms of competition, the Specialty Food Stores in Canada lays on a highly fragmented marked, as stated in a publication by IBIS World, UBC . No industry participant is controlling more than a 1.0% share of the market as off 2016.
These facts posed as a great opportunity for ThisTable.
But something tasted weird…
Despite an initial sucess with ThisTable.com, users are currently not converting as expected. Our call was to find out why the users were not meeting the end goals of the website, despite the high trafic.
We neded to understand who those users were, what pain points they were possibily encountering while browsing the website. Also, we needed to make sure the how to tell the the company’s story in a way that aligned with the user’s values.
To find out who the users were, we conducted in person interviews and sent ou 2 surveys.
There were 8 interviews, about an hour long, with poeple who qualified after 2 screener questions:
- Do you like to cook your own food?
- Are you open to buying artisanal food products online?
Our main goal was to discover their GOALS, MOTIVATIONS, SHOPPING HABITS and VALUES.
We sent out a survey to the general public targeting food lovers and to ThisTable mailing list.
An important findinng with the general survey were the information a consumer need to know before buying a product.
In the survey sent to ThisTable mailing list, we notice that the majority of people found out about the website through their brinck-and-mortar store, olive the senses. And most of them use website to get recipe inspiration or to read the blog, only a quarter shop the products.
— And the amount of results turned into a huuuuuge amount of sticky notes. With those we created an Affinity Diagram.
Our findings reaveled the purchasing habits of our users, their motivations to shop for specialty food products and to shop online, the channels they use, other websites they shop at, their source of information about food and their deographics.
And… as a result of the User research….
Meet Joy, our Primary User Persona
Increasing the conversion rates of the website was our primary goal. In order to understand why the current website was not achieving its purpose, we initiated this project by testing it in 3 different ways:
The insights of Google Analytics revealed the behaviour of the user visiting the current website.
- The trafic source:
85% through OliveTheSenses.com
10% through google
5% through newsletter
- The age groups, correlating with their behaviour and devices:
- The common pathways, demonstrating the drop off points:
Likert-type Scale Test and User Journep Map
Looking at the Google Analytics pathways we could see a few drop off points, when users exited the website before converting. We needed to investigate the main pain points of the users and find out where we could improve the user experience.
For that, we decided to create a User Journey Map that could demonstrate the user feeling while performing a few tasks. To gage the satisfaction of testers, we asked them to rate their state of mind during the test using the scale that you can see on the left.
The results showed that the recipe photos and content are quite pleasing. On the other hand, trying to add a product to cart given the high number of sold-out items was a big point of frustration.
When we asked about the content inside the subscription box, testers said they were certain of it. However, it turned out that they were mistaken by the photo of the last month’s box. So when we asked them if they felt confident subscribing to a monthly box, they didn’t feel ready because the didn’t know what they were getting.
The graphic below shows the results of the User Journew Map
After understanding the user behaviour while browsing the website and the pain points of general testers, we looked for the evaluation from UX Designers, asking them to perform Heurisctic Analysis, which consists in evaluating:
- Match between system and the real world
The system should speak the ‘users language’, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
- 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.
- Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
The Heuristic Analysis Results:
New Project Goals
Now that we knew our User Persona and had identified the main points of concern, it was time to revisit our project goals for our MVP and create a plan to tackle each of them.
- Grow ThisTable’s customer base
- Increasing conversion
- Creating more opportunities for brand awareness
2. Convey brand perception effectively
- Increasing trust in the brand
- Broadening the perception of the company values within the website
3. Improve purchasing process
- Alleviating the frustration with items being sould-out
- Easing the checkout process
- Improving the effectiveness of rating, commenting and favouriting
To come up with the design solutions that could contribute to alleviating the pain points and to streamline existing feature and/or introduce new ones, we researched a few e-commerce and food related websites, that were either mentioned by our client, our interviewees or resulted of our domain research.
Our researched showed that The “Recipes” section of ThisTable.com is one of the core pieces to bring trafic in. 58% of our survey responses indicated that this table was unique because of the recipes it has. In addition, one our client goals was to create a community of ‘foodies’, so we gave a big emphasis to the recipe page.
Also, in our suveys, we discovered that 50% of our survey respondents wanted to find out what recipes they could make with a product, as a decision factor to buy it or not. So, we included the ingredient section.
Open Card Sorting
The illustration below shows our process of categorizing filters in the Recipe Page. The 1st version shows our assumption of how to to label, categorize and sub-categorize each item.
However, after a few tests with our paper prototype and realizing that some of our testers were confused about the location of certain dietary retrictions or preferences, we felt the need to request a specialist, in this case a Nutricionist, to perform an Open Card Sorting for us. After we implemented the changes proposed by our specialist, the confusion was not presented anymore.
The Conversion Funnel — Overcoming the biggest challenge
In my previous experiences before the UX Design Program, working with Marketing Strategy, I had already been in contact with the Sales or Conversion Funnel.
We had done enough reseach so far that could support our proposed solutions to the Awareness, Interest and Purchase phase as the user travelled through the funnel journey.
However, when it came to convey the quality and uniqueness of the brand, we realized we were missing a piece of yhe puzzel. I knew well that stablishing a differencial to a company and conveying it to its audience is a crucial part of the strategy, its a matter of survival to any organization.
Working in this project, until this point, I hadn’t found yet how to communicate why a customer would shop from This Table and not from any other company out there.
The main unique stories I could grasp so far was from the survey mentions about the Olive the Senses store, its awesome olive oils and balsamic vinagars, the in-store tasting experince… I kept enagaging in brasinstorming sessions with my fellow team members to come up with a way to tell ThisTable story in a compeling way… but it was still unclear to us why we had to leave Olive the Senses outside of this story.
We realized that we needed to conduct some further interviews, we had no intention of giving up on telling a beautiful story in this website and we were here wo win.
So we left to the nearest Whole Foods store to interview some of the customers in the store, as it was found to pose as an indirect competitor of specialty food stores, although they sell other items as well.
We stopped at their Cafe area and openned our computers to ask people to just freely browse both websites: OliveTheSenses.com and ThisTable.com. We didn’t want to lead the results at any way, so the only thing we asked interviewees was to describe their impressions as they browsed the pages.
Here, on the left below, are some of the coments we recorded:
An important point to make here is that, when customers browsing the Olive the Senses website click on ‘Shop’, they get redirected to ThisTable.com. And this seemed to create confusion as users coudn’t understand why wesbsited got switched and that negatively impacteded the experience.
We also learned that users could not understand why some products were priced higher than other stores, what was so special about them.
Google Analytics Recap
Keeping in mind the 85% of ThisTable.com trafic source was through OliveTheSenses.com, we came up with two directions we could take:
- Integrate both websites, keeping the name Olive the Senses, to take advantage of its so commented “taste experience”.
- Educating users by introducing a Splash Page that could ease the transition from OliveTheSenses.com to ThisTable.com.
Although we had come up with the above alternatives, we felt they still would solve the problem of not having a unique story to tell with This Table brand. We were lacking the differential of This Table. So we called in our clients to discuss our suggestions.
Meeting with the Client
We started the meeting by presenting some of our research finding and we wanted to knwo how open the client was to consider bringing Olive the Senses to the e-commerce side of the business and taking advantage of unique story around the olive oil and, perhaps, taking advantage of the versatility of the Olive Oil that can be used in so many different ways, from savory food, appetizers to ice cream.
As, Emily, the owner, together with Talya, the marketing person, explained the business goals of giving more emphasis to the online platform and less to the brick-and-mortar store, as their intention is to focus on fomenting a food community around This Table and share their food passion with others, while generating revenue with product sales. They consider that Olive the Senses brand would restrict their boundaries rather than expanding.
The magic white wall
I could see there was no room here to bring back Olive the Senses. So I took the initiative to ask for their collaboration in creating a list of unique propositions about This Table:
- either I would gain new ideas or…
- we would’ve made a point to work with what their brick-and-mortar store had as a unique element.
With a market in my hand, I reached the white all behind us and a lot of amazing and unexpected ideas started to flourish from Emily and Talya:
So many great things were there to be told about This Table that could explain WHY it is special.
We decided to go with Option 2: educating the new visitors of ThisTable.com and now communicating our new findings about the company. All those things that were in Emily’s and Talya’s hearts, that had made them in love with the company, that had fostered long-lasting employees, but that had not been told by the current website.
I coudn’t be happier and more excited about this brainstorming session. My team members and I were now full of ideas as to how we could tell this beatiful story.
Curious to know what we discovered in this session? You will find out in a bit!
Now our funnel was complete, we could finilize our proposed design solution, considering a feasible flow from the top to the bottom of the funnel, creating multiple opportunities for the user to inform an email and be reached out to feed the top of the funnel, fomenting a a prosperous clycle.
To come up with the design for This Table new website, we combined our ideas using Design Studio method. We heard the supporting justification from each proposed solution and democraticaly chose the ones that could better ressonate with our users’ goals.
Keeping in mind our Connversion Funnel, I will present now the final proposed design that aims to give the user the motivations to convert.
A. What are the story, mission and values of the company?
According the Baynard Institute, users should be able to grasp 30–40% of what the company has to offer in the first point of contact.
To achieve that, ThisTable.com home page brings an element that I had previously used in another project, that is to use an interactive photo with the variety of products that the company offers, as you can see on the left image below. This also serves as a way to engage the user.
Scrolling down, users can see right away the values of the company:
— Enjoy Exquisite Food, Gather Exceptional Friends, Discover Excellent Artisans
Lastly, we decided to include to the individual product page an option to read more about the Artisan who made the product, as you can see on the last image on the right below.
B. Creating Trust, Creating a community
To create the trust factor, we turned the existing rating option more effective by adding the number of people rating a product beside the star scores. (See on the left of the illustration below.) That has 2 advantages: add weight to the rating and increase S.E.O. authority of the website. That is Google, at least, requires this number (in structured data parlance, a value for the “ratingCount” property) in order to show an average star rating (“aggregate ratings”) directly in the search results.
In a product page, customers can also write a review and users can rate how that review was useful. All this is to enable a third party recommendation, which has a much bigger persuasive power.
Baynard Institute explains that “many users effectively rely on ratings as a proxy for “good quality / value for money” when they don’t feel comfortable making that evaluation themselves. Thus, if a significant number of your user base aren’t experts in the product type(s) being sold at the site, a ratings summary should be included directly in the product list items.”
In our surveys and interviews, 70% of respondents mentioned they need to know the ingredients inside a product in order to buy it. We decided to include the label of products in their photo gallery, informing to customers the ingreadients and nutrition facts. (See the wireframe in the centre of the illustration below.)
Lastly, considering the success of the Taste Experience inside the Olive the Senses store, we discussed with our client the possibility of introducing to the customerthe option to purchase a Sample Box, with a minimum of 5 taster items that the customer can choose from a list. This way, they can try the amazing products and, perhaps, fall in love with them and come back to buy some more. (See the Sample Box Page down to the right).
B. Creating Trust, Creating a community (Continuation)
We also added text as grid breakers in the Recipes and Shop pages. The idea is to not only set the tone of voice of the website, but also to create conversations and increase the connection between the user and the brand. This little text inserts can be also used as a marketing tool and can be addapted according to festivity dates or other important occasions.
C. Why is this company unique?
Remember our brainstorm session with Emily and Talya and “The magic white wall”?
This Table is more than a company to its members. It’s the translation of their love for good quality food, made from scratch. It’s their desire to value real artisanal ingredients and connect consumers to the makers. They want to excite people to use amazing artisanal ingredients and enable them to ENJOY delicious gourmet food.
Each month, This Table staff members GATHER to in their Creative Cuisine process to come up with the delicious recipes you can see on the website. Yes, all oh them! Hundreds of them! They are also featured in a book they also sell in the e-commerce site.
In order to ensure that all the available products meet the highest standarts of quality, as they want consumers to experience nothing but the best, This Table owner, Emily, makes sure to DISCOVER excellent artisans to supply products to This Table, making sure she gets to know in person every each of them, as well as what goes inside their products.
From the beginning of the project, Emily had mentioned to us how she tresures the conversations around the table, that she wants people to be able to to do the same. And now we understand how This Table has the potential to foster a great food community.
We wanted to help to tell this story and for that we created a whole new About us section, where This Table can convey the ENJOY, GATHER, DISCOVER idea.
D. The Checkout Funnel
An article on persuasive checkout best practice from ASOS, by Paul Rouke explains how removing the barrier to checkout that is the registration reduced its checkout abandonment rate by 50%.“Don’t make users create an account! 1 in 4 abandon online purchases due to forced registration”.
With this information in mind, we created give the user the possibility of checking out as a guest.
We also removed all possible distractions from the checkout pages, including the navigation bar and footer, as you can see below.
In addition, we considered the Heuristic Analysis we mentioned earlier and corrected the bugs and lack of information regarding Progress and Feedback identified in the current design.
We conducted several tests of our paper and mid-fidelity prototypes. The tests revealed that, although we seemed to be in the right direction, a few adjustments had to be done along the way.
Below you can see examples of minor adjustments:
- From A to B: Testers indicated that they would like to decide whether see or not details of a product before it gets added to the cart. So on our mid fidelity prototype, we added the step B.
- C: Testers were unclear about the meaning of 3 full starts as a rate. We then added 2 empty starts as an indication that the rating was 3 out of 5 stars.
Allowing system to receive location information
Another request from our testers was to have the shipping amount calculated right at the checkout, before they had to enter their shipping information. The solution I suggested for that was for the system to prompt a request to allow it to receive the user’s location.
Test results from UserTesting.com
We requested 3 testers from UserTesting.com to try our digital prototype. the feedback was overall very positive. The only concern was the filter funcion in the Recipes Page. As users could not find the filter button, the could not complete the task.
Ou initial thought to fix it was to change the position to the center and increase contrast.
Again we put it to test and we came to the conclusion that, even changing the button position and increasing its visibility, what users wanted was to be able to automaticaly filter their preferences as they made selections. So we removed the filter button altogether and design the advanced filter feature to populate the preferences without the need to confirm selections.
You may have noticed a few illustrations along the way that we introduced as part of our proposed bits of Delightful Design.
Here the delightful design elements have different goals, depending on the moment. It could be to drive attention, to add humor, to alleviate the frustration of an error alert, to create conversation. Overall, the it has an implicit message of attention to detail, that is known to helps in building trust. Below are some examples.
Drive attention, add humor
Here, we want the user sign up to our newsletter, in a way that transforn an unwanted action into something less
Create conversation while giving feedback
This action happens when the user favorite a product or recipe.
This action appears when the user agrees to sign up to the newsletter.
Alleviating the frustration of an error alert
This is an example of a missed required field in the checkout process.
Do you remerber our User Persona, Joy Ong?
Before you check out our prototype, I want to tell you something about her that you don’t know yet.
To better test out our prototype, you may want to know what Joy wants to do:
Some of her friends that are coming over for dinner have dietary preferences and restrictions that she has to consider when searching for a recipe: it has to be gluten free and low sodium. Keep in mind that Joy wants to use some beef she already has in the freezer, so the recipe must be with beef as the main ingredient.
This prototype brought to you by InVisionAppprojects.invisionapp.com
2 weeks later….
Two weeks have gone by. Joy had a great time yesterday at the diner she made for her friend. Everyone loved it. She’s going home from work, still in the train qhen she sees an email that she received from ThisTable.com reminding her of items on her Favourites List. Joy had forgoten about an item she had favourited on her last visist. She then uses her cellphone to view the item and decides to purchase it.