Project: Responsive e-commerce website for a brick & mortar clothing store

Target user:  Online shoppers who seek trendy, affordable clothing

Goals:  Create an appealing logo for Mirror and design an easy-to-use responsive site that allows customers to browse through all products and filter by size, color, style, etc.

My role:  UX and Visual Designer

Tools used:  Pen/pencil and paper, Adobe Photoshop, Sketch, Illustrator, InVision

I started out the process by conducting research through secondary research, looking at what's already out there when it comes to online shopping. I compiled a list of general key statistics, primary and secondary competitors, common features, and recent trends.

The findings from secondary research helped inform the interviews I conducted. The purpose of the interviews was to learn more about shopping habits and pain points of current shoppers and identify how customer preferences and needs can be met online.

One key issue I wanted to focus on during my design process was the issue of Portrayal vs. Reality. This is a common pain point because despite the convenience of online shopping, at times, items ordered may not look the same irl as they are perceived on models in professionally edited photos.

To identify the priority features for Mirror, I created a concise competitive analysis, reviewing three top competitors: Target, Uniqlo, and Forever 21. I categorized the features by their cost and value. This helped me to prioritize features to include in the Mirror site.

The secondary analysis, interviews, and competitive analysis led me to create my persona, Ricky Valencia. Ricky is a frequent online shopper in his late twenties who is always on the hunt for trendy, affordable clothing. He tends to shop online because of the convenience and the ability to find better deals online.

After creating the persona, I created an empathy map to dig deeper into Ricky's motivations and experiences. I also created a storyboard to highlight one of several pain points Ricky experiences.

After the research phase, I dove into figuring out ways to construct the site before designing it. I did this by first drawing potential sketches of the homepage.

To further delve into organizing the site, I asked individuals to participate in card sorting. I created a set of clothing items and asked the participants to separate the items into into categories of their own making. This exercise helped me to reach a better understanding of how to categorize items, eventually creating a site map.  

Following the site map, I created a task flow by identifying the main flow that users would follow to complete product checkout on the Mirror site. Based on the task flow, I then created a user flow to present different paths that the persona Ricky might take to complete each task.

After the user flow, I began drafting wireframes for Mirror by combining all my research thus far. The goal was to see if users can figure out how to use the site to find an item. From the desktop wireframes, an initial prototype was built in InVision. 

One feature I really wanted to make sure I included for customers was the ability to post pictures of themselves with clothing items through #MyMirrorWear, as well as the ability to write descriptive reviews and post pictures on the product pages themselves. This helps customers resolve the issue of Portrayal vs. Reality.

Users were recruited to try out the wireframe prototype. Their experiences and feedback was taken into consideration moving forward. Responsive wireframes for tablet and mobile were also created.

The last step in the process was creating the visual design aspect. First, a logo was created to achieve branding that is modern and neutral enough to attract all types of people and styles. After digitizing multiple sketch logos, I decided to go with the "M" mosaic logo because of the look and vibe it gave.

After the logo was finalized, I set out to put together a color palette that would reflect a clean, trendy, and vibrant design. After creating multiple color palettes, I decided on the palette included in the UI kit below. I feel like it is stylish yet calm and appealing to a wide group of people. Typography, buttons, icons, photography, and the navigation were also included in the UI kit.

As my first time designing a responsive e-commerce site, this project was such a great learning experience. I was fascinated by the research portion, and learned a lot during the information architecture and interaction design aspects of the process. I really enjoyed the creativity involved in brand identity and visual design. I also valued user feedback and iteration, which was so important throughout the entire process.  

If time constraint was not an issue, I would love to be able to explore other ways to encourage body positivity through the site design. User photos and reviews help to empower customers to look beyond models to see how clothing items can look and feel. 

If I had more time, I would have also created more personas to look at the needs of other segments of the population. 

Overall, I received positive feedback in user testing from the look and feel of the high fidelity prototype. Looking ahead, I would be excited to continue looking into other ways to push forward body positivity and inclusivity.