project banner.jpg
 

Categories

  • User Research               
  • User Test                   
  • UX Design            
  • Web Design                    
  • Information Architecture

Role

I designed and analyzed website user tests, applying the insights to introduce new features.

Partner 

Madhav Tankha
(Frontend developer)

Scope

2 Months

 

Project Overview

How Might We Provide Engaging E-commerce Experiences?
We facilitated and documented user tests and applied the relevant insights to develop product features that provide engaging e-commerce experiences. Working from user journeys, we re-designed the key elements of our existing product to fulfill our users’ needs, and increase conversion rates. Try The World is a startup that offers food subscription boxes, and imports gourmet regional food from different countries. 

 

hero2.jpg
hero3.jpg
hero4.jpg

Process 1: Research & User test

I designed a user test and survey system.

Test with variety of users to see the whole landscape of the user experience. Start with choosing users who have different relationships with the company: existing users, former users and first-time users. We also consider diversity of users by income, age, brand experience and more.

ttw uxui pages.jpg

Record user's actions on a screen, immediate verbal reactions, and experience.

We asks users do visit the website and recored the screen. They were also instructed to record immediate verbal reactions. The users were prompted to take a survey after browsing the website. We created the survey questions to highlight specific a user struggles and overall experience. 

 

Analyze Data and Insights

We find the mainstream user journey by tracking how users move on the website. We categorized the flow into five sections: home, navigation, community, shop and payment.

We find opportunity points where we can lead users to payment more seamlessly. 

Process 2: Design UI

feature 1: Text to Video 

We designed the magazine to feature videos rather than text materials. We increased the size of the video. This way, users learn how to utilize the product visually in a friendly and attractive way. 

before ⇧

before ⇧

after ⇧

after ⇧

feature 2: Live Experiences

On the e-shop page, we categorize by country. Instead of using a touristy images and text,  we replaced them with a moving image of real people experiencing the food culture, in order to deliver the emotion.

before ⇧

before ⇧

after ⇧

after ⇧

feature 3: Based on Stories

I created a filter system that allows our targeted users to easily find edible products based on stories, such as: “sustainably grown,” or “supports local community.” How we categorize products defines the image of the brand. 

before ⇧

before ⇧

after ⇧

after ⇧


project overview

In this project I designed "Holiday Gift Guide" pages. We created a special page for the Holiday season. With the marketing team, we selected the products we want to promote to users who specifically want to buy products as gifts. It become a guideline for those users to choose what is the best option for them. 

Interface from the "Holiday Gift Guide" to the payment  ⇧

 

Process1: Wireframe

holiday gift wireframe_22.jpg
holiday gift wireframe_2.jpg
prototype1.jpg
holiday gift wireframe_23.jpg
holiday gift wireframe_24.jpg

Process 2: High Fidelity Prototype

I did information architecture to deliver complex message at once.

We designed the gold medallions for our holiday gift packages in order to offer a quick understanding of the  product's category. Also, we provided one sentence that explains the package for each deal.

The last section introduces suggested products and provides a link that goes directly to the shopping page.

⇧ pop-up window prototype

⇧ pop-up window prototype