Research

Research Goals

Through this research, I primarily wanted to gain a better understanding of what users like or dislike while shopping for clothes online. With so many different online clothing retailers competing with similar interfaces, I wanted to get a better gauge of what features add value to the users’ experience and where they fall short. Given the context of MIRROR being a physical store branching out to online retail, it was also important to me to define the problems that physical stores have that online shopping can solve. Being a new online presence, coming into a very established market, I wanted to understand the current environment of online retailers as well as companies that will be top competitors that users will be comparing MIRROR to.

Competitive Analysis

By observing preexisting online retailers I was able to find trends strengths, weaknesses, and commonalities as well as gauge the market and potential competitors. Through this research, I was able to deeply observe how different online retailers organize their vast inventory to help users browse for clothes without being overwhelmed. Comparing these major retailers also brought to attention on how they target certain audiences through their branding with their stylistic choices and imagery.

1-on-1 Interviews

I conducted 3, 30-minute interviews with individuals that are ranging from 25 to 30 years old, with varying occupations, in different field.

The purpose of these interviews were to discover different opinions, needs, wants, and priorities towards their online clothes shopping experience. By having individuals of different backgrounds, shopping styles, and preferences we are able to better gauge what to aim for and avoid for MIRROR’s transition to the online platform.

User Needs

• Features to suggest if the product will fit the way they want.

• Variety in models to help envision how they clothes will look like on them.

• Well defined categories and filters to narrow their search.

• Organized and simple display of products to avoid being overwhelmed with too many options at once.

• Have clear indication if the item is in stock.

User Motivations

• Shopping from the convenience of home

• Larger inventory of clothes online

• Better organized inventory than in stores

• No pressure from other shoppers, staff, or the limitation of being in the store

• Frequent promotions

• Can browse and compare multiple stores at once.

Design

Wireframe Sketches

Before creating wireframes, I quickly sketched out potential layouts in order to brainstorm that I can explore. The inspiration for these layouts came from observing major competitors from the competitive analysis and incorporating familiar patterns as well as my own layout. By doing so, it became clear that there are certain aspects of layouts that are consistent within multiple websites for users to have a sense of familiarity and better the learnability of the layout.

Wireframes

I proceeded to create a low fidelity wireframe by compiling navigation ideas based on the card sorting, sitemap, and common navigation patterns from major competitors. After doing the sketches, I decided that I wanted to keep the header minimal with simple navigation but have one large image on a carousel to catch the attention of potential users for the homepage. I also wanted to promote exploration for the users that while on the homepage by showcasing popular and new items as well as images from social media to see the products being worn. To bring attention to the banner on the top and for newsletter sign-up, I reserved a darker accent background for these parts and kept the rest of the site simple. Design choices such as having the major navigation categories, search, account, and shopping bag in the header or having the filters on the left column next to a grid layout of the products were made so brand new users can visit the website and still navigate throughout the site intuitively and feel a sense of comfort and familiarity.

Responsive Wireframe

After creating the low fidelity wireframe, I created a responsive wireframe to visualize MIRROR on different devices. Given the horizontal limitation of space in tablets and mobile compare to the desktop version, the navigation and account information have been condensed into a hamburger menu to avoid a cluttered header and maintain the minimalistic aesthetics. Additionally, for the mobile, being the most limited in horizontal space, I introduced a side scroll to avoid over crowding the screen with products.

Logo Design

For designing the logo for MIRROR, I took into consideration that MIRROR’s mission is to cast a wide net and be appealing and accessible to a wide demographic. Based on a minimal, modern, and trendy branding without appearing too up-scale to scare off more casual users, I made iterations to find a logo that will fill that mold.

Style Tile

Once the logo and the general direction of the branding was established, I created a style tile to organize the different elements and theme of the website, such as the color palette and typeface.

• A primarily monochromatic color palette was chosen to emphasize the minimalistic feel. The tan/gold was chosen for accents to introduce some warmth to the site, while adding a feel of elegance. Another advantage of a monochromatic palette is that the pop of color will be coming from the product images, allowing the products to stand out from the white background.

• For the typefaces, I chose a minimal Sans Serif font to stay consistent with the minimal feel and keep the focus for the website on the product images rather than a flashy font.

UI Kit