MICROSITE CASE STUDY

Ton Ton Ramen

PROJECT DETAILS

 

Challenge: Design a clickable prototype for a microsite that focuses on the shopping experience.

Role: UX Designer

Timeline: Nov 18 - Dec 4, 2019

CONTRIBUTION

 

Persona Development

Card Sorting

Competitive Analysis

User Flows

Information Architecture

Wireframe Prototype

Usability Testing

TOOLS

Pencil and Paper

Illustrator

GlooMaps

FlowMaps

Adobe XD

Project Overview

For this case study I was tasked with designing a clickable prototype for the online shopping experience that met the goals of a business, their brand, and the users. The prototype also had to include a product inventory of 50 new items. I began by researching businesses located in Ponce City Market and decided to design a microsite for a ramen restaurant named Ton Ton. The restaurant doesn't currently sell merchandise, which offered a lot of creative possibilities for the new inventory goal, and I was also attracted by their aesthetic and the smell of ramen.

Once I chose Ton Ton, I looked through their website to get an idea of their offerings and mission. I then sat down to map out a project task list, which I then categorized by UX process phases - research, synthesis, and design.

PROJECT GOALS

 

  • Maintain consistency with the existing brand

  • Allow customers to contact the business

  • Have efficient means of purchasing one or more products

  • Test with users

  • Incorporate an effective IA strategy

PERSONAL GOALS

 

  • Understand process of open and closed card sorting with users

  • Practice creating a persona

  • Develop a clear user flow

Research

  • Business Research

  • Competitive Analysis

  • Card Sorting

  • Usability Testing

Synthesis

  • Persona

  • Information Architecture​​

  • User Flows

Design

  • Microsite Wireframes

  • First Iteration Prototype

Persona

Steve


Age: 50

Location: Tucker, GA

Status: Newly Engaged

Occupation: Software Engineer

  • Worked in game development for about 20 years

  • Met his partner at the Peachtree Road Race

  • Recently engaged and plans to adopt his partner’s daughter, Sara

  • Wants to develop a better father-daughter bond with his future stepdaughter

"I need something my teenage girl and I can do together."

Sara

 

Age: 13

Location: Tucker, GA

Status: Future Stepdaughter

Favorite Subject: Japanese Culture

Interests: Anime & SciFi, Dance​

Based on Sara's interests, Steve has decided to take her to a Japanese cuisine cooking class. He wants to register for a class online and browse through products.

Steve's Journey Map

I created a map of Steve's emotional journey during his process of looking for a ramen cooking class in order to better understand users' potential pain points and needs.

Pain Points

  • Confusing website navigation

  • Information overload

  • Lengthy checkout process

  • Hidden fees

Opportunities

  • Clear, multipoint navigation

  • Concise product descriptions with reviews

  • Checkout process with:

    • tabs showing the customer’s progress

    • auto-fill forms

    • shipping calculator

    • clear return policy

Competitive Analysis

Researching other companies that share similarities with Ton Ton allowed me to determine what site features work and what could be improved upon. I used these insights to inform my design process.

Key Findings of Analysis

  • Only one of the companies offers a restaurant, a shop, and classes

  • Search functionality seems to be based on quantity of items and item features

  • All sites feature a guest checkout process

  • Only one site allows users to toggle between checkout screens

User Testing: Card Sorting

After researching other companies to get an idea of their offerings, including merchandise related to food and cooking, and checkout processes, I moved into user testing. For this phase of research I first used the open card sort method. I asked five people to sort 50 items into six groups, which they then named. I analyzed the results and used their common naming conventions to create categories for a closed card sort, which I conducted with four people. I found that the testers mostly agreed on the first three categories - Classes, Food, and Merch - but they struggled with and didn't agree on the items for the last three categories - Utensils, Cookware, and Dishware. The results of another open card sort with four more testers showed continued disagreement.

I revisited my competitor sites to look at their information architecture, or website menus. Based on the menu structure of these sites I decided to do another closed card sort with "Utensils," "Serveware," and "Cooking Tools" as the category names. With these names, testers began sorting items into the same categories. Success!

Information Arcitecture

I used the results of the card sorting tests to build the information architecture for the Ton Ton shop microsite. The image on the left shows Ton Ton's existing website menu with the added menu for the microsite. The image on the left shows the website menu for just the microsite.

User Flows

After building the information architecture I then sketched out the user flow, or the quickest path for a user to navigate through the microsite in order to complete a task. The final digitized versions of the user flows based on each of three tasks are viewable below.

Wireframes

Iteration 1

 

Task 1: Purchase Cooking Class

 

Task 2: Purchase Training Chopsticks

Task 3: Check Out as Guest

 

User Testing

I used Adobe XD to create the wireframes and first iteration prototype. I reviewed Tracy's bio with four people to complete three tasks based on the given information:

  1. Add two seats for a cooking class to your cart.

  2. Add a pair of training chopsticks to your cart.

  3. Check out as a guest.

I also asked each tester to speak aloud as they navigated through the prototype. I observed their process and took notes on their reactions and feedback.

Key Findings

  • Page transitions weren’t smooth

  • Trouble finding all classes

  • Not sure how to change item quantity

  • No dates or times for classes

  • Not sure where to find Training Chopsticks

Wireframes

Iteration 2

Below are the three major wireframe updates I made for the second iteration prototype.

P2 Update - Classes.png
P2 Update - Chopstick.png
P2 Update - Calendar.png

Reflections

Food for Thought

USER TESTING

 

I was surprised that all testers had trouble finding the Training Chopsticks. Based on the four rounds of card sorting I didn't expect that they would be difficult to find. I plan on testing the second iteration prototype to see if changing the name to "Children's Training Chopsticks" affects the testers' ability to quickly find the item.
 

FUTURE OPPORTUNITIES

 

I found it challenging to create the pain points and opportunities for a persona that was provided for me because I couldn't base it on research. I look forward to using doing more research to find the audience and their pain points in order to create personas in future projects.

I also want to experiment with another wireframing and prototype program. So far I have enjoyed learning Adobe XD, but I want to learn the capabilities of other programs.

© 2019 by Meghan D Joyce.