Client

Student Project at UX Academy, Designlab

Role

Product Design (research, design, prototype, testing)

Building Empathy

Meet Meera

Using the interview results, I created a target group profile Meera(26), to better empathize with the requirements and needs of the audience I will be designing for.

I created an empathy map, to understand my persona Meera’s actions, behavior, emotions and thoughts in detail.

Storyboard

I decided to capture the scenario where Meera has to return her order due to a sizing issue. As gathered from the empathy map, my persona had always avoided returning her order even if it has any issues. So I decided to introduce a feature to schedule returns pick-ups for an additional fee. I got this idea from FedEx. FedEx has schedules and picks up the package for its customers. I thought why not introduce that for online clothing stores too?

Aligning the business and user goals

While designing an app that focuses on user goals, it is essential to consider its business goals. If not, many constraints would remain undiscovered, and the app would not be able to provide services to the users to its full potential. Aligning the business and user goals with a list of high-level technical considerations provides a clear picture for the entire team working on the project.

After deciding upon the project goals, it was time to think about what features to put in. At this step, to ease the features management, I created a loose plan for product development based on feature matrix and persona.

Information Architecture

To get an idea of the organization of the content for navigation, I used open card sorting with 30 items, which helped me obtain some of the categories customers were used to looking at. Here’s the similarity matrix obtained from the results of the card sorting.

I created a sitemap to figure out the pages required for this application.

Sketching the flows

I made task flow and user flow for the basic task of purchasing a shirt from Mirror.

I started by sketching my ideas using pencil and paper (rapid design thinking). I looked at various websites as well as Dribbble posts for inspiration. I wanted to keep the layout simple, without overcrowding the any page with repetitive information.

From my research, I had found out how vital sales and discounts are for customers. So I decided to show a banner above the fold on the home page. Then I added a section with tabs for a showcase of New Releases, Best Sellers, and On Sale. I decided to keep it as an automatic scrolling component to increase the customer's curiosity/engagement. And then, I added the navigation to the main categories.

On the categories page, I have provided the 'Quick View' feature in addition to the others (like the category navigation on the side.)

The product page shows the product with its details and provides the 'Complete The Look' section that helps the customer buy the entire outfit. Along with the 'Size Guide,' the product page also displays the size of the clothing that the model is wearing under 'Size and Fit' to help the customers for sizing calculation.

Wireframes

Branding

As mentioned before, I wanted Mirror to have a fresh, modern and unique look for its entry into the digital world. Hence, I decided to choose a bright color palette. Instead of going for a plain background, I decided to add the blocks of accent colors to accomplish a more colorful vibe.

I feel the "narrow" nature of the fonts Bebas Neue and Oswald got a perfect balance with colors' choice.

While designing the logo, I first listed the adjectives and verbs that could be associated with 'Mirror.' I liked the idea of representing something of a broken piece of the Mirror. Hence, I decided to direct my logo work in that respective direction.

While working on branding for this project, I decided to get my hands dirty in Adobe Dimension. I chose the giant paper bag for extensive shopping. The box and the string bag are for intimates and lingerie. My first experience with Adobe Dimension was great! It is remarkable how this software makes it easier to play with different packing materials and light sources. I hope to use more Adobe Dimension to add a little package design, time and again in my future projects.

Responsive UI Design

Prototype

You can look at the Mirror prototype, created in Invision, here.

Usability Testing

I set the test objectives to test the navigation of the website, browse through the products, add a product to the bag, and complete the checkout process. It is always crucial for me, to evaluate the how the user carries out each step in the process, by observing their actions and behavior. It also includes addressing any doubts/questions raised by the users and finding out why they had them in the first place.

Findings

• Overall a very clean and intuitive UI with a crispy look.

• Right choice and usage of photography.

• Getting about the UI was pretty easy.

• Require some indication of the number of steps remaining to complete while checking out.

Post-testing iterations

Based on the usability test findings, I added the visual indication of the checkout steps to make the experience more detailed and helpful for the customer.

Mirror is my first UX project, where I learned how to apply the key concepts in your design—for example, building empathy. It seemed like an easy step when I read about it, but it's not. I realized that to find out the user's exact thoughts, you have to ask a LOT of questions and then deduce the findings.

When I started looking for inspiration on Dribbble or Behance, I saw terrific designs for e-commerce. But I realized many of them were just pretty and fancy interfaces. I could not see the UX factor in them. This project also helped me distinguish the elements that make a successful UX.