Published on | Prototyping: From UX to Front End — Medium Natascha Mehrabi

For the love of food; a case study in responsive web design.

Food is so much more than just a meal, it’s about expressing your creativity, having good conversations with friends, discovering new ingredients and trusting in the quality of what you put into your body. This Table was born out of those values. Emily, the founder, came to us with the task of redesigning the companies website in hopes to increase conversions while expressing these core values.

Timeframe

3 weeks

Client

This Table

Task

Redesign the current website so that it is responsive, increases conversions all while communicating This Table’s values.

Project goals:

Create a responsive website that communicates This Table’s values
Increase the number of conversions
Create more opportunities for brand awareness
Convey brand perception effectively; by increasing trust in the brand and ensuring the website reflect’s the company’s values
Improve the purchasing process; alleviating frustrations andeasing checkout process.

Device:

Desktop and iOS mobile.

Design Methods & Tools

Domain Research, Organizational research, Comparative Analysis, User Surveys, User Interviews, Feature Prioritization, User Flow, Information Architecture, Card Sort, Storyboard, User Personas, User Scenarios, User Stories, User journey maps, User testing, Paper Wireframes, heuristic analysis, sliding-scale test, Sketch, Photoshop, InVision.

The Team

Our team consisted of myself, Leo and Eveline, all of us being UX designers.

DEFINE

Introduction

In 2012 Emily and her partner opened Olive The Senses, a brick and mortar store that sells the finest quality olive oils and vinegars. After the success of this company the idea of ‘This Table’ was born. By crafting personal relationships with food artisans that use only the highest quality products, This Table aims to bring these products online through an e-commerce platform. Not only do they sell artisanal products, but the team from This Table live and breathe their love for food, they create their own recipes from scratch, they actively search for new artisans to support through their store.

The opportunity

A recent study produced by UBC identified online grocery shopping as the future of food shopping. By 2025 Online food shopping is expected to represent 20% of grocery sales, that equals to 3900 new grocery stores. Currently the grocery e-commerce industry is highly fragmented and no individual participant controls more than 1% of the market share. This initial research indicated that This Table has a great opportunity to be a part of this market.

The Challenge

Although few large companies currently hold a high market share in this space, in order for This Table to succeed they need to stand out, they need to tell a story that resonates with their target users. At the moment they are not entirely sure of why their customers aren’t converting while visiting their website. Our primary challenge is to identify the main reasons for this and so help them achieve a higher conversion rate. A few areas we wanted to focus on include; ensuring their brand, story and values are represented throughout the site, gaining the trust of their customers and identifying any pain points in the checkout process.

During our client kick-off meeting we asked our client to identify some other produce e-commerce stores. Together we mapped them on to a market place map

DISCOVERY

Who’s the biggest foodie?

In order to discover who our primary persona was we decided to conduct a series of in depth interviews. We decided upon two screener questions in order to ensure we were interviewing our target audience.

Do you cook your own food?
Are you open to buying food online?

Through these interviews we were able to identify the general motivations, goals and shopping habits of our users.

From these interviews we began creating a list of assumptions. In order to test these assumptions I wanted to create survey questions directly related to these assumptions. We decided to send out two survey’s, one to the current mailing list for This Table, and one to the general public (with the same screener questions). I wanted to send out both surveys as the one aimed towards the mailing list would give us a clearer picture of how current customers perceive the brand. However, we didn’t want to assume that those customers were the ‘target user’ and so limit our responses to them, which is why we sent out another to ‘foodies’ in the general public.

Survey Results

In the survey we really wanted to focus on what motivated people to buy produce online, how their trust in a new brand would increase and what their shopping habits were. In the general survey it became clear that users were most interested in finding out about who made a product and where it was made. Their trust in a brand would increase with ratings, reviews, and mentioned in blog posts or by other friends.

In terms of the ‘This Table’ survey results we mainly wanted to find out why people visited the website and why they though it was unique. Most identified recipes as one of their main attributes. Secondly, the blog posts they created and lastly the products they sold.

Through these results a clearer picture was beginning to form in my mind as to how people like to use produce websites, and in particular how This Table may be able to stand out amongst similar companies (Recipes/blog posts…).

Google Analytics

The final piece of information I wanted to analyze was This Table’s google analytics. This would give a clear picture of the users currently using the website, and perhaps to give some clues as to how they used the website. The questions I was looking to find out included;

What age group used the site the most?
How many pages on average did they visit? Does this change for age group?
What devices are people using to visit the site?
What are the main user pathways people take while browsing the site?

Google analytics results

The results indicated that most users were either in the 25–35 age range or the 55+ age range. Both these user groups were visiting more pages and spending the most time on the site. Desktop and mobile were the devices most used (50% and 34% respectively) followed by Tablet. Interestingly Tablet’s were used mot by 55+ age group and the mobile and desktop were used mainly by the 25–35 age group.

I found the user pathways most interesting. They indicated that 85% of the users actually went through to This Table website through Olive the Senses, the website for the owner’s original Brick and Mortar Store. 10% went through organic google search and 5% went through newsletter clickthrough’s. Interestingly the user’s generally seamed to browse through the site, looking at recipe pages, perhaps some product pages but very rarely converting.

This indicated that either these users were not wanting to buy products online, only look on recipes, or that something was holding them back from purchasing a product (trust, pain points in process?). This is something we would need to investigate further.

The big reveal

So who is our primary persona?

We used an affinity diagram approach to collate all the information we had gathered from our interviews, surveys and google analytics results.

Affinity diagram…so…many…post-its!

Meet Joy Ong, our primary user:

Testing

This project was quite unusual in that we wanted to carry out two phases of testing. Since the website was already built we thought it would be impertinent to test the current site first. We could then test our adjustments in phase two of testing and compare the results. We employed two methods for phase one; heuristic analysis and sliding scale test (to create a user journey map).

Heuristic analysis

We wanted to test the site with other UX’ers knowledgable in the field of E-commerce UX design. We asked them to focus on two main heuristics:

Match between system and the real world
Visibility of system status

We asked them to browse through the site and purchase a product, when either of these heuristics were not met they would have to rate the severity of it the problem (6 being highest) as well as comment on the problem. We carried out the analysis with five other UX’ers allowing us to get a feel for the severity of each problem.

This method really provided us with some areas that we needed to work on in order to make the user flow more seamless.

Sliding scale test

As well as doing a heuristic analysis, we asked interviewees to follow a specific task and let us know how they were feeling on a scale out of five.

We carried out 5 of these scale tests, an example of one filled out can be viewed on the left. The main findings from the scale tests include:

Users were not sure what the company was about based on the home page
They were unsure why products were so expensive
They loved the recipe pages with the beautiful photographs
Weren’t comfortable buying a product
Though they felt like they understood what was contained inside each box they didn’t feel ready to purchase the box.

Re-evaluating our project goals

Using the information we gathered from these tests, while taking into consideration our client and user goals, we adapted our main project goals to for our MVP, ensuring it could be met in the three week timeframe:

Grow this Table’s customer base: by increasing interest in the brand and increasing the number of conversions
Convey brand perception effectively: in order to increase trust in the brand as well as communicating the company’s values throughout the site.
Improving the purchasing flow: alleviating frustrations of sold out items and other pain points in the checkout process.

PLANNING

We started our planning phase by getting a better understanding of what current food e-commerce stores are offering as features.

The competitive comparative analysis was also based on several of the companies our client first mentioned as possible competitors in our kick-off meeting. In terms of creating an increased trust in a product both Try the World and Mantry’s used reviews, ratings and testimonials. These brands as well as The Gourmet Warehous also allowed users to create an account. Interestingly, not all websites offered recipes or had a blog, this is something that This Table already does very well and is something that makes them unique.

Information Architecture

One of the main areas that came up in the heuristic analysis was the recipe page’s IA and filter system. We thought this would be important to focus on, particularly as our user interviews and survey results indicated this was something they liked to see in a website, and something that attracted them to This Table’s website.

Below is their original filter system, it has two levels:

Instead, we decided upon having four main filter categories as well as advanced filter options that included information like nutritional value, dietary options and difficulty. Joy, our primary persona, is someone that is very health conscious and likes to experiment creating gluten free or vegetarian meals. Within each three of these advanced filter options we used a card sort technique to ensure the filter options beneath each category were as expected (see below). A few of our assumed filters were moved around based on the card sort.

Site map

We moved a couple of elements around in the primary navigation:

Previously the website had an about us section which was more about the team members of This Table. In order to build trust in a brand and for Joy, our primary persona, to feel connected to the brand and increase her trust in the brand we felt the ‘about us’ section should be more extensive. It would include a sub-nav on how they create their recipes from scratch, another on how they vet and discover their artisans, one on their history and finally also about their team.
We wanted to include an accounts section (in the current website the accounts page didn’t work) that would allow the users to save recipes and products to their favourites.

Previous site mapCurrent site map

We also included sub-nav options for the ‘in a box’ page. We had the idea to recreate the ‘in store experience’ This Table could offer taster boxes. These would allow customers to taste and test the products before purchasing a more expensive subscription box.

New Challenges

Make a project interesting…

While working on the IA and features we wanted to include in the site we kept coming back to the current user’s primary user flow shown in the google analytic results. Most users were arriving from Olive the Senses website and were meandering through the site without buying anything. What were they thinking as they journeyed through the site? What was their goal? Why didn’t they buy anything? These questions kept running through our head. In order to maximize a user’s journey through a site in terms of ease of use, building trust and interest in a brand and finally converting we felt like we had to get a better grasp on this primary user flow.

So we went back to do some more interviewing. We specifically went to Whole Foods to target users that were interested and able to spend more on higher quality products. We asked interviewees to browse through the site as they would if they were browsing google and also if a friend referred them to the site.

Our questions included:

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

We found that in general the users would like to visit a food site and be inspired by recipes before purchasing a product, as they were doing in the Google Analytics primary user flow. However, they felt during that process they were often confused and didn’t understand why products were expensive, or why they were switching between websites Olive the Senses and This Table.

Possible solutions:

Since 85% of the traffic going to This Table came from Olive the Senses, and many of the users felt the Olive Oil’s made This Table unique we thought integrating the sites would be a great idea. We could weave a story through the products, explaining how olive oil compliments all products they sell and how the company is unique due to their interesting beginnings (selling pure olive oil from Italy).
design a splash page that helps to educates the users about the This Table brand, and ensure that This Table’s unique story is told throughout the site.

We went back to our client, Emily, and proposed the two options. She felt that she really wanted to separate the two companies. So we decided to go with option two. We brainstormed with her to identify all the aspects she felt made This Table unique and different.

A few key findings from this session included; the are so unique due to the personal relationships they develop with the artisans they stock. They only stock food of the highest quality (e.g no wax fillers in their chocolates). They get together as a team each month and create recipes that include their ingredients from scratch!

Planning & Design

Now that we were more certain of the user’s primary journey through the website we could focus on designing the site. One of my main goals was to focus on particular aspects of the conversion funnel.

The above diagram depicts a conversion funnel. We decided to focus on four main points: This Table’s story, creating trust and a community, communicating their uniqueness and ensuring a smooth checkout. Each of these points ensures that the various points of the funnel are met. On the right of the diagram is our primary user flow. Within this user flow I wanted to ensure that we were able to reach out to our users and ensured they remained engaged with the brand through newsletters or emails. For example, by favouriting an item one week, an email could then be personalized the next week or month reminding them of their favourited products or recipes. If an item is out of stock the user could opt in to be contacted when it comes back in stock etc… Our goal with this was to ensure that users were brought back into the funnel.

Focussing on these four points, I will outline how we ensured they were met within our designs:

During our heuristic analysis, as well as our second phase of interviews in Whole Foods many of the interviewees were confused as to what the company was about. I decided to do some research into e-commerce best practises.

A recent study conducted by the Baynard Institute found that as a rule of thumb 30%–40% of all top level categories sold in a store should be present on the home page. If not, then users often incorrectly assume the shop sells something else. The purpose of putting these top level categories on the home page isn’t necessarily so that users will click them, but more to expose them to the breadth of items sold in store. For that reason we decided to include a hero image with all 8 top level categories. When users clicked on the plus signs a pop up would indicate what items were available within each category. Featured products would further show some more detail into the products sold.

Similarly, we placed three icons hinting at how the user may use the site, i.e: viewing recipes, reading more about the artisans then buying the products.

On a similar thread, we decided to incorporate their main values of Enjoying exquisite food, gathering exceptional friends and discovering excellent artisans on the home page. Our idea was to educate customers about the company and their story.

Creating trust and a community is particular important for increasing user’s interest while going through the conversion funnel. This is particularly important for brands/companies they are unaware of. We integrated several different elements into our designs to ensure trust in the brand was increased.

The first element we wanted to focus on was including user’s ratings for products. Another recent study found that user’s often rely on ratings as a proxy for ‘good quality’ or ‘value for money’, especially when they aren’t comfortable relying on their own evaluation. Not only should there be a rating but a rating summary (out of how many) is essential, particularly as the study found that younger consumers (25–35 year olds) will give more weight to products which have a higher rating summary. We decided to incorporate these ratings not only on the individual product pages but also recipe pages and product/recipe grids. Not only does it improve customer trust but google will rank products higher in terms of SEO if this number is incorporated.

Within each product page there would also be a review accordion which could be expanded. This would further improve trust in a product, as personal reviews are a great ‘persuasion tactic’ in checkout processes.

Within the product page we not only wanted there to be an image of the product but also images of the ingredients and nutritional information. This transparency would not only increase trust in the quality of a product and the company but also ensure customers are more confident in purchasing a product.

Within the individual product page there will also be a link to the artisan who made the product. The story will show how the artisans make the product, where it’s made and anything unique about it. This will hopefully increase the ‘community’ feel as well as increase interest and trust in the product.

Throughout the product and recipe grid we will integrate sections of text which can be changed depending on the season or occasion. Not only does this break the grid but also aims to increase the connection and build conversations between the user and the brand.

As mentioned previously, during the brainstorm session with the client we were able to identify several exciting elements to their story.

Within the ‘Our Story’ nav section of the website there would be a separate page dedicated to the way they create recipes, the way they discover artisans and also their team.

Each section would be image heavy, as our client is able to take professional grade photographs. Their values would be iterated throughout the site and in general enable the users to get a better understanding of who they are.

One of our primary focuses for this website re-design was the checkout process. I was responsible for this section of the design. I wanted to create a checkout funnel so that all distractions were removed from the checkout process, this meant changing the header and footer elements.

Another element that was really important, was to ensure that the user was gaining feedback at every stage. As you can see below, as the user goes through the steps they are either highlighted or ticked off.

Based on a resent study, checkout process were much more efficient when the user can constantly see the products they are checking out. This works not only as a persuasion tactic ‘look at these amazing products you’re about to get!’ but also prevents the user having to go back to previous screens to check prices or quantities.

When user’s are forced to register, there’s a 1/4 abandon rate. Taking this into account I wanted to ensure the user could either checkout as a guest or login if they had an account. We would collect the users name and email address at this stage so that if they did abandon cart later on we could send a personalized follow up email reminding them.

Login screen

Lastly, if the user didn’t have an account yet, and they checked out as a guest, their information would auto-populate in the screen below using all the information we just collected from them. All they would have to do is create a password and they would have an account. This is placed at the end of the checkout process, as their main goal when checking out is to purchase a product, so in that way we do not frustrate them. Auto-filling the information makes the barrier to creating an account easier and more efficient.

Creating an account after checkout

Delightful Design

Though our primary focus for the project was UX-related design we wanted to incorporate some elements of UI which would help add playfulness, lightheartedness and a ‘community feel’ to the site. The This Table sells artisanal products they want to ensure they are approachable and inclusionary. We thought these elements would help with this, as well as be useful in attracting the user to particular calls of action. Leo came up with the UI elements and I was responsible for creating the interactions and animations. Some examples can be viewed below:

As the user scrolls through the product grid this animation plays, attracting the user to the call to action in a playful way.

As one of the main heuristics that were invalidated was the lack of feedback in the previous site, this was another element we wanted to focus on in the design, for example:

Or in terms of error reporting…

When someone favourites an item, instead of the heart changing colour the animation would provide greater feedback that they did favourite it, and also where the favourites are saved…

Font style

While interviewing possible customers we received a lot of comments that they didn’t like the handwritten font, or that it was hard to read. We decided to do some research and find a similar font that was less scratchy. We came up with Dancing script, the edges are more rounded and reflect the inclusionary nature of This Table.

Testing & iterating

We did several test on our paper prototype as well as our mid fidelity prototype. One of the main changes we made on the paper prototype was the shipping predictions during checkout. Initially we only showed shipping costs after the user entered their email address. However, several users found they would prefer to see this information as soon as they hit checkout. The only way to do this would be to ask for their location information early on in the user’s journey in the site. So now, when a user begins to search for a product, they are asked to access their location. If they accept then shipping costs are able to be calculated in the first stage of the checkout process.

We also used www.usertesting.com. We were able to be very specific about the users we wanted to test with; female, 30 years old, food-lovers etc, all of which were in line with Joy. We were actually surprisingly pleased with the way these tests turned out, they showed that the users were easily able to navigate the site and purchase a product. There was one pain point which came up every time, the filter system.

Initially we thought that perhaps the filter button didn’t have enough contrast and people were missing it because it was on the right, so we increased the contrast and centred the button. However, still users did not realize they had to press it in order for their results to filter. Instead, we decided to remove it all together and each time the user filtered, the grid and filtering would auto-populate with the changes. This the users were much happier with and it fit in with their expectations.

Storyboard

Before you take a look at the prototype I would like to remind you of our primary persona, Joy. I would also like to set up the scene for you…

Joy grew up with home-cooked delicious quality food. Whenever she’s cooking she’s reminded of these memories and loves recreate or be inspired by new recipes. In two weeks time her friends are coming over for dinner. They have some particular dietary requirements which she would like to cater for. She also has some left over beef in her freezer that she would like to use up. She’s in search for a gluten free, low sodium recipe that contains beef. If she needs to purchase any extra ingredients, she’s open to that as long as they are high quality and nutritious. She decides to browse online and comes across This Table’s website.

2 weeks later she’s on the bus while she receives an email from This Table reminding her of an item she favourited a couple of weeks ago. She decides to purchase the product on her mobile device.

Prototype

Below are links to both the desktop and mobile versions of the website. Please note they work for particular user flows.

Conclusions and future considerations

Overall I think our team was very happy with the outcome of this project, our client was particularly excited about the changes we made and is ready to implement them. We worked well as a team, split up our tasks based on our strengths and collaborated on new ideas and designs.

In the future, if there was a longer time limit, I would have liked to do some more testing after we had created the prototype. Though we ran 5 other tests, it would have been useful to do more so that we could better compare before and after.

I also think it would be really interesting to do an A/B test on the current website and the previous one. This would give a great indication as to how and whether the new designs are increasing conversions and performing better. It would also be interesting to do more interviews after the new designs were implemented to see how brand perception, trust and understanding of This Table changes.

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

This Table

Cool stuff, every week

More Articles