Urban Hits

UX Research + Development

About the project

My goal was to create a website that provides the latest trends in upscale urban style clothing. The goal is to make online shopping expereince easier and faster, so stylish shoppers around the world can shop in one online store instead of going back and forth between different websites.

Step 1 - Survey

I used Google form to created a survey to collect some data on online shopping expereince before I start the project. Here are 2 screenshots of analysis results.

Survey 1
Survey 2

Step 2 - Create a business model

The website makes money from

  • Advertisers pay each time the AD loads. (CPM)
  • Sales commissions from apparel companies (B2C)
  • User subscriptions for newsletters
  • Use blog, social media channels to grow site traffic
  • The site will collect user’s data by monitor their shopping behaviors and start offering recommendations and style advices

Step 3 - Create a in depth business model chart

This is a site not only for shopping, but also for learning about the latest fashion trends and get dressing tips from urban style bloggers who are collaborating with the site. On the other hand, by joing the site, these bloggers can be more exposed to the world, so they can gain reputations and followers.

Business Model

Step 4 - Define Audiences Segmentation

Primary audiences will be urban style fashion bloggers age from 25 - 36 all around the world. Besides fashion, they like travelling, editing, photography, writing and design. Next, I created user journey map and interactive workflows. Doing so helped me to understand the particular points where the site would help minimise some of the pain points users might experience.

User Persona 1
User Journey 1
User Interactive Flowchart 1
User Interactive Flowchart 1

Step 5 - Define secondary audiences

Secondary audiences will be people who are into urban style, age range from 25 - 36 all around the world. People in thie category like to get dressing references from social media posts or fashion bloggers that they follow. Then I created user journey map and interactive workflows. Audiences in this category need a site where they can shop and learn more about urban fashion at the same time.

User Persona 2
User Journey 2
User Interactive Flowchart 2
User Interactive Flowchart 2

Step 6 — Create a sitemap, an affnity map and wireframes

These were created based on the competitive research and later on refined based on user testing.

Affnity Map
Home Page Wireframe Version 1
Home Page Wireframe Version 2

Step 7 — User Testing

TImage on the left side was an A/B testing. Users were asked to complete the task as register as a writer on the mobile version of the site. I organized the test result into an form of infographic (image on the right).

User Testing Heatmap
User Testing Result Infographic

These two tasks were done locally on paper wireframes that I created for the site. Below is an infographic that I organized based on the testing results.

Paper Wireframes A/B User Testing Infographic

This A/B testing were done online by using usabilityhub.com. Users were asked to choose which design they can find the sale section easier.

Remote User Testing Infographic