A clothing e-commerce, responsive website design.


Videl is a clothing store. They’re a global chain with clothing for everyone. They also have different styles (casual, business, sport, party, formal, etc.) I have been contacted by Videl to help them take their business online since currently they only have a very outdated information website with only locations, promotions, and a bit of background about the company. They don’t want to keep anything that they currently have. They want to start with a new logo and an ecommerce responsive website where they can sell their products online.



Research began with secondary research, which was conducted to learn more about other competitors' online shopping website design that already exist. The goal of this secondary research is to explore their pain points and gain points.

Base on those finds from secondary research,  research questions were compiled and organized into 1:1 interview. I proceeded to do a 1:1 interview with 5 people who frequently do online shopping to understand their expectations associated with online shopping by asking them questions and observing their online shopping behaviors.

It’s frustrate while failure to place an order after a long time browsing because I have risen expectations when I do browsing on the product.

Sometimes, place an order online can get extra cashback or bonus. Even through it’s only 1-5 dollors, it can makes me happy.


Firstly, from the competitor analyzing I found that for an e-commercial market, it’s efficient when audience places their order online. In addition, good shipping and return policy will help a lot. Also, consumers care about the price. The internet makes price competition easily. They want to pay less money on goods. Otherwise, they want to know if the merchandise good enough for them to pay it.

From the research data, we proceeded to create a persona and an empathy map to understand our users on a deeper level and a potential solution.

April L is a recruiter who frequently likes to do online shopping every week. She has both online and brick & mortar store shopping experience.

After having a clear picture of what our users were going through, we brainstormed and went about this by creating a number of sketches to generate as many ideas as possible. The final sketches were put into a storyboard to show the user journey when people using the website of Videl clothing store from beginning to end.

I conducted an open card sorting exercise in order to see how potential users naturally categorize clothing items. There were 6 participants, aged between 22-30 years old, classified 30 items into different categories and all these categories were named by participants.

Based on this exercise, I created a sitemap to show the content, categories, and organization of the site.

Base on the research results above, how might we:

●   Develop a size calculator on product detail page.
●   Add a Quick View function.
●   Build a strong navigation tool to help the user find their expectations easily.
●   Encourage users to post photo review and develop communication between customers in the review area.


Using the storyboard a Task Flow was mapped out for Videl. The flow shows the path of how a customer would find and purchase a small size black T-shirt by using the Videl's website.

The User Flow visualizes the path a user would take to complete a task. In this case, the flow is mapping out the path from entering the site homepage through completing an order.

Referring to the storyboard and user flow, responsive wireframes were built for each screen of the flow using Sketch.

The brand that was created for Videl is one that represents chic, simple, and gender neutral. Blackish green was chosen as the primary color to represent these values. The logo also embodies these qualities by using white and black colors and sans-serif font. The typeface that was chosen gives the brand a modern feel.


A High-Fidelity prototype was built to test the usability. In this testing, participants were given a scenario with two tasks to complete:

●   Find a black, women’s seamless tube top in small size, then add to cart via “Quick Shop”.
●   Find a yellow, women’s cropped cami in small size, then add to cart via “product detail page” and proceed to check out.

There were 3 participants, aged between 22-30 years old, did this usability testing. I observed them and took notes when they were doing this testing.

Base on the testing results, I created an affinity map to organize the notes I took.

Base on the feedbacks received from the usability tests I improved the screens that the participants were having trouble with, and then using the style guide as reference create the final designs for the Videl screens.


Looking back on the project now it would've been significant to have been able to approach the problem from a different perspective and interview people who love to shopping online in order to perhaps discover further insights to the problem.

Working on the Videl project was a valuable and eye-opening experience. Learning about users' web browsing preference and how to conduct interviews really is broadened my awareness of the issue and taught me things I wouldn't have otherwise known.

This is the fortune of being a UX Designer - learning about unfamiliar problems, and the designing solutions that impact people's lives in meaningful ways.