MICROSITE CASE STUDY
Ton Ton Ramen
Challenge: Design a clickable prototype for a microsite that focuses on the shopping experience.
Role: UX Designer
Timeline: Nov 18 - Dec 4, 2019
Pencil and Paper
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.
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
Understand process of open and closed card sorting with users
Practice creating a persona
Develop a clear user flow
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."
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.
Confusing website navigation
Lengthy checkout process
Clear, multipoint navigation
Concise product descriptions with reviews
Checkout process with:
tabs showing the customer’s progress
clear return policy
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!
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.
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.
Task 1: Purchase Cooking Class
Task 2: Purchase Training Chopsticks
Task 3: Check Out as Guest
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:
Add two seats for a cooking class to your cart.
Add a pair of training chopsticks to your cart.
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.
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
Below are the three major wireframe updates I made for the second iteration prototype.
Food for Thought
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.
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.