Mayer

Improving the shopping experience

Live Site

mayerofficial.com

Topics

UI DESIGN, UX RESEARCH, ECOMMERCE

Introduction

THE GAP

Mayer had a website that felt generic and did not effective communicate the brand identity. This was a factor in the rate of returning customers

TASKS I PERFORMED

UI Design, UX Design, Page building(with Shogun), User Research,  Built Site Maps & IA Diagrams, Created Wireframes & Prototypes, Performed User Testing

THE SOLUITON

To design and build a site that accurately represents the brand with a improved shopping and checkout experience

The process

I rely on  Design Thinking as a process for developing solutions. In reality projects don’t follow a linear methodology, but for the purposes of the case study, I  broke down the various tasks performed into these stages:

empathize

It was necessary to understand the users I was designing for as well as the industry. Digging into the audience helped learn about their interests and motivations. Questionnaires were my main research tool at this point.

Understanding the audience

Below is some of the information i was able to gather about the audience

  1. Millenial Man between Ages 25-40 +. Mostly Single or Partnered.

  2. College/University Educated.

  3. Working professional at varying degrees of his career based on age. Salary $35K - $80K+

  4. Fashion Forward- is interested in the latest trends looks for special pieces that he feels will not be seen everywhere. Is confident and not afraid to take risks with his style.

  5. Values quality and longevity in clothing and invests in pieces apart from buying into fast fashion

  6. Is price conscious and is aware of competitors pricing

Learning from the competition

Competitive analysis helped me understand how other brands with a similar audience approach their website design. A clean and minimal look was consistent across the board.

Evaluating existing designs

The existing website had several areas that needed improvements that could enhance the shopping experience for the user and improve the navigation of the site in genaral

Left: Homepage, Right: Product page

Identified opportunities

After taking time to go over both the quantitative and qualitative data we collected, we gathered our insights into key findings.

  1. Homepage needed a clear call to action

  2. The typography needed to be more legible

  3. Procuct information on the needed a cleaner Layout

  4. Collections Page needed the ability to filter and preview more product images

  5. Navigation bar needed to standout from the page content

  6. Ability to create a wishlist

The existing product page was overwhelming for the user. There was an opportunity to improve the layout to make the page more scanable and draw more attention to the primary call to action

define

How might we?

  1. Elevate the look and feel of the brand to build trust

  2. Improve User experience

  3. Increase conversion rates

  4. Increase customer return rate

  5. Reduce bounce rates

How might we design a website that reflects the brand personality and also improves the shopping experience of the user

ideate

Starting from rough sketches

Making rough sketches early on helped me visualize the pages in their simplest form with out committing to any specific design decisions.

Converting Sketches to Wireframes

Wireframes provided a quick way to advance the design process without placing a lot of emphasis on the branding and design. Sketches were converted to wireframes to have a mental picture of the layout and placement of key UI Components within each screen.

The Design Process

Based on the brand personality and the target audience, a moodboard that illustrates a clean and minimal look was used as a compass for the visual direction of the site.

Mapping out the page architecture to better understand the requirements

I used Site Maps to better understand the site navigation and how screens are connected within the site . Information Architecture Diagrams were further developed from the site map.

prototype

High Fidelity Prototypes

A snapshot of other High Fidelity prototypes for a few screens. High Fidelity Prototypes brought me as close as I could get to the real life site before starting the development phase.

test

Getting Feedback

High Fidelity prototypes were used for User Testing. Feedback from the stakeholders were used to make several Iterations that contributed to the improvement of the designs.

User Acceptance testing was further performed to ensure mobile responsiveness and browser compatibility.

Video available on desktop view

Final Results

A shopify based online store that clearly reflects the brand personality and improves the shopping experience. One of the main challenges was the limitations of shopify as a platform and the high dependence on plug-ins which impact the performance of the site. It was important for me to focus on the requirements that had an actual impact on the user's experience.

172%

Increase in returning customer rate within the first 3 months

68%

Increase in average order value within the first 3 months

It was important for me to focus on the requirements that had an actual impact on the user's experience.

Looking Foward

REFLECTIONS

Working within the confines of a platform like shopify taught me how be resourceful and leverage  available  features and plug-ins to achieve the business goals

NEXT STEPS

Further User Testing, Exploring additional ways to improve conversion rates.