Project Overview

What is Italian Tomato?

Cake Ordering (Home VS Cake Ordering)

Current Website Pages

I started by research with a website observation from visiting their current site.

Things I found that were problematic:

• Current web page is not intuitive, abrupt changes on the cake ordering

• Location of the page is not user friendly, hard to find certain shops and locations

• Does not allow any user error on some pages where user can go back for changes

• Only option to place promotional order is to call in, delivery services not available

RESEARCH

In order to get a more detailed analysis, I’ve identified some of the problems by conducting 2 heuristic evaluations (App and Website) using LEMeRS methodology to get a better understanding on the hypothesis for users pain points before interviews and further research.

Knowing there are a lot of problems on the website and app, what are the competitors doing?

I conducted a competitive & comparison analysis on 4 other businesses as Italian Tomato’s competitors. Due to the price range of being similar, I’ve picked Maxim’s Cakes, Saint Honroe, Cháteraisé, and Lucullus. This process allowed me to clearly understand the differences between the bakery shops and to gather useful information towards part of the redesign for the website and app. Most of the bakery brands has delivery option for their products, and intuitive user experience on the apps. Saint Honore is the only one with an in-app ordering service option; Maxim, Italian Tomato and Lucullus are all connected to the website platform for cake order. However, Italian tomato does not automatically shrink to the responsive size of the cake ordering page on mobile size.

Now I’ve collected enough information of what needs to be included for some of the problems, I also need to understand user pain points and frustrations from different perspectives. I decided to collect qualitative data by conducting user interviews and to collect quantitative data by posting online surveys.

I asked the users to do one simple task:

Try to order a cake by using Italian Tomato website on App and Website

Out of total of 5 user interviews and 23 online surveys, I was able to summarized the information I got into these charts:

INTERVIEW QUOTES

Pain Points/Frustration:

• Cake order page and Italian tomato page are separated

• Can’t log in/order cake on app

• Unable to order some promotional cakes listed on order cake page, does not have a reserve/which location has this cake availability option.

• With Italian Tomato’s 5 sister companies and its branches, users have to look through all addresses to find their targeted location

Meet Sofia Choi…

The User Persona Sofia was generated based on user research to help guide through my design process.

A journey map was put together after 5 usability tests by giving users the task to order the cake on the website, in order to help visualize user frustrations.

Sofia’s User Journey Ordering Cake from Italian Tomato’s Current Website

Sofia’s colleague is having a birthday coming up. She wanted to prepare a cake for her colleague to celebrate together. After browsing around, she saw Italian Tomato is doing their seasonal promotion where the Japanese Peaches as a theme for the cakes. She directly went to the cake section to order the cake. Unfortunately, the only size is in cm (21 cm) as standard and can only order in quantity (No bigger proportion). She then add the cake to cart without thinking much, then remembered she forgot to write greeting, was a bit annoyed that there wasn’t a reminder that she hasn’t input anything. By going further into the ordering, there wasn’t a delivery option. Sofia had no extra time during lunch to get the cake, she closed the website and went look up somewhere else.

AFFINITY MAP

A new site map on both app and website was generated based on card sorting results. I organized parts of the current website into a more fluid, and simple one. Some of the changes I made were:

• Removed the category of 15cm, and combine cakes in multiple sizes on the products page

• Added flash order option for people who wants to pick up their cakes asap (an hour to next day)

• Save the order as template for future ordering

• Organize the flow by breaking down information on the products page leading to finish purchase

USER SCENARIO

Sofia heard great things about Italian Tomato’s sweet strawberry cream cakes and wants to try it out with her friends at a gathering. After a long day, she wind down to look into Italian Tomato website to order.

Once I had a solid site map redesigned, I was able to figure out Sofia’s user flow based on user scenario.

PAPER WIREFRAMES

MID FIDELITY PROTOTYPE

After conducted 3 usability tests on both App and Website, and making sure the website overall had a good flow, I brought my low-fidelity paper wireframes into Adobe XD to developed a more streamlined and visually appealing mid-fidelity prototype. 

APP 

WEB

DESIGN SYSTEM

HIGH FIDELITY PROTOTYPE

PROTOTYPE VIDEO WEB + APP

I’ve conducted interviews of a total of 5 people to test the website and its usability. 5 users came from different background and age. 3 of them are technology savvy while the other 2 are not. 80% of the users find this new layout for cake ordering system to be intuitive and easy to navigate.

All of them agreed that:

• The cake ordering system both on website and app seems to belong to the brand and was consistent.

• Buttons were intuitive and easy to navigate towards a goal

• Easy to choose a location of branch to pick up cakes when needed, and was happy to be able to pick a designated time slot to pick up.

Some of them struggled to:

• Utilize the tags and category options on the app to filter out some choices they were hope to see, wish to have more categories.

• Mistakenly see the same tag of express and sold out on the app function, wishes to have color code/differentiation.

What Can I Improve On?

Looking back, there were couple things I could've done better on:

• Besides the given colors of red and green, I would create a range of the similar color scheme and tone to add more energy into the website and app while keeping the original brand theme direction from Japan.

• Organize and categorize the tags into different groups so it would be easier to look for the tags on website and immediately be associated to the ones on app.