Problem

As a fashion-forward apparel company, Maysha is a clothing brand that brings handmade crochets.

Maysha does not want to be just another fashion brand; it wants to be a brand that truly has a unique style, a brand with specific intentions - their decisions on style, the design process, source of materials. Every single step has a clear vision.

Our goal was to create a simple and hassle-free online shopping experience for Maysha’s clients with a website that could also convey who Maysha is as a brand - bold, elevated, chic, intentional, and innovative.

Solution

A desktop-mobile responsive eCommerce website was created, offering Maysha’s clients a great user experience while shopping. It is straightforward and user-intuitive. It makes shopping easy and gives shoppers a great impression of Maysha as a unique fashion brand.

Client

Maysha

Industry

Fashion eCommerce

Duration

3 Weeks - June 2021 to July 2021

Process

Client Kickoff Interview

User Research & Synthesize

Ideation

Sketch

UI Design & Prototype

Client Feedback & Redesign

Role

UX & UI Designer on a team of 4

Tools

Miro

Figma

Maysha
1. Discovery

1-1. Client Kickoff Interview

The team came up with two dozen questions for the interview with Maysha's two co-founders.

To understand Maysha's goals and expectations, we focused on its perspectives - who is Maysha as a fashion brand, what they would like the site to convey, their competitor sites' pros and cons, and what kind of experience they wanted to offer their clients.

1-1-1. Insights "In-A-Nutshell"

Brand Personality

Bold, elevated, chic, intentional, innovative

Site Key Words

Simple, clean, imagery-focused, modern, chic

For Shoppers

An easy-to-navigate, simplified, and fast checkout experience

Pages

Home, About, Collection, Contact Us (FAQ, Customer Support), Account, Cart

1-2. Empathy Maps

The team was able to generate three uniquely different types of users based on the client kickoff interview.

The Gen Z'er Fashionista

The High-Earning Millennial

The Gen Z Fashion Newbie

1-3. Personas

After empathy mapping, these three personas became very clear to the team - We started to see users' needs, goals, and pain points, ensuring that we were on the right track with our design decisions.

Alexis

The Gen Z'er Fashionista

The young & vibrant type - She knows what makes her look the best, she is always on-trend.

Jessica

The High-Earning Millennial

She has a great career, makes good money, and can spend. She likes design details and quality.

Elsa

The Gen Z Fashion Newbie

The young & confused beginner - she wants to look better, she is eager to change and learn about fashion.

2. Ideation

2-1. Brainstorm

At the beginning of ideation, the team focused on the homepage brainstorming by sketching. We each generated multiple ideas for the homepage and went over all sketches and possibilities together.

Maysha

2-2. Sitemap

I spearheaded the sitemap based on the team's research after we decided on the pages needed.

2-3. Sketches

The team split up the pages and started sketching for ideas, options, and approaches. I took on "Support," "Contact," and "Cart."

See my sketches below.

2-4. Low-Fidelity Wireframes

After confirming pages, functions, and sketched ideas, the team started working on lo-fi wireframes. Again, we split all the work, I was responsible for "Support," "Account," and "Cart."

Lo-Fi Wireframes - Desktop

Lo-Fi Wireframes - Mobile

3. Design

3-1. Mood Board

Mood boarding is always important as an inspiration and fundamental tone of the UI design, so the team brainstormed and put together this mood board.

Maysha

3-2. Style Guide

The team created a style guide to ensure that we set the guidelines and standards before starting UI design.

3-3. High-Fidelity Wireframes

Once again, the team split the high-fidelity wireframes - we each designed some of the pages.

At the end of the process, I went in and did a thorough round of detail checks, making sure everything was pixel perfect.

Hi-Fi Wireframes - Desktop

Hi-Fi Wireframes - Mobile

3-4. Feedback

The launch date was right around the corner, so the team needed to keep MVPs and ensure that all MVP pages were the most simplified possible so that the developing team would have enough time to put the site online for launching.

The site was going to be developed on Webflow, we needed to be more mindful of the constraints.

3.5 - Review & Redesign

We reviewed all the feedback from Maysha and redesigned multiple pages so that the site could be ready for the launch date. Changes include

  1. Use a different set of imagery for the homepage

  2. Use white as the background color for all pages

  3. Keep only MVPs - About, Collection, Cart, Contact

  4. Simplify the footer

Check out the Maysha site here

After making all the changes and making sure everything was development-ready, the team then handed off the design file to the development team.

4. Takeaway

Reflection

  1. As designers, we always have to be more mindful of the platform used to build the website. Different platforms might have various constraints.

  2. Communication is critical - constantly talking to clients always ensures a smooth design process and the best possible outcome. 

  3. The designing timeline should align with the client's plan.

Future Steps

The Maysha site was an actual end-to-end project. The team was thrilled to see the website come alive.

Due to development time constraints, an MVP version of the site was developed from the delivered assets. We are working with the Maysha development team to get the rest of the functionality up and running.