A Case Study with
Natural Beauty

Mijoi

A direct-to-consumer, self-care company in need of stand-out brand direction and a user-centric digital platform.

Case Study Focus

Responsive Web Design, Client Relations, Branding & Design

Team

Solo

My Roles

Design Facilitator, UX Designer, UX Researcher, UI Designer

Tools

Adobe XD, Photoshop, Illustrator, InDesign, Keynote

Methodologies

Screener Surveys, User Interviews, Client Affinity Mapping, Competitive Analysis, Design Studio, Sketching, Wireframes, Iterative Testing, Prototyping, Usability Testing, Brand Direction, Logo & Identity Creation

Introduction

Have you ever turned your moisturizer or shampoo around to look at the list of ingredients? The founder of Mijoi did, and she was bewildered and shocked by what she found. As an African-American, female business owner, she was sickened to find the products she and her family used contained harmful, toxic, and sometimes cancer-causing chemicals.

Though Mijoi started from the founder's personal passion, it quickly grew into a budding business in need of a formalized brand message and a more dependable sales platform. I helped set the tone, direction, and look of their identity while also introducing the Mijoi leadership team to user-centric thinking when I designed their e-commerce platform.

Research

As with all client-based work, I met with the energetic Mijoi management team to gain insights into their goals and philosophies. Learning about their history, future plans, and personalities, I began to see the various directions and ideas that could be incorporated into their brand and their hopes for their e-commerce platform.

Natural and
Unique

More than just the ingredients used in their products, but breaking down artificial beauty stereotypes.

Diverse and
Inclusive

As an African-American owned business, the Mijoi brand needed to speak to people of every color, shape, and size.

Informative and
Honest

Openness & Informative: Empowering people to make informed choices about what they are putting on their bodies through education and truthfulness.

Family and
Love

Their product grew out of their love for their family, even carrying the name of their late-matriarch, Joi. Their family is as much a part of the brand as the products themselves.

Project Scope

I was able to gain valuable insights into how the Mijoi team saw their company, but what steps would need to be taken to make this vision tangible? By working first with a Statement of Work, I would be able to formalize the details of their needs and create a rough timeline to manage flow and expectations.

Competitive Analysis: Beneficial to both our branding and user-centric efforts
User Interviews: Crucial for understanding our users and how best to serve them with our online platform.

User Experience Ideation

Brand Development

Persona & MVP Development: Involve the Mijoi team to build a strong sense of empathy with their user
Design & Iterate: Feedback from users and the Mijoi team will guide designs as we increase fidelity

Brand Mission Statement: Formalize the Mijoi's promise to its customers
Logo & Identity: Materials will reflect our new brand direction

Research

Phase 1

Phase 3

Phase 2

Phase 1

Getting to Know Our Users

Whether working through brand strategy or building a website, it is always valuable to get user perspective. A screener survey would be sent out to begin understanding some basics about our customer base and what was important to them. We would explore these topics more in-depth later when we conducted our user interviews. Still, I was able to gain some powerful insights just from the brief survey.

Competitive Analysis

Another essential viewpoint would be that of our competitors within this vast market of self-care products. How would Mijoi find it's a niche within this space? And were there any design standards/features that users would expect to see on our site?

I would look at 4 direct competitors serving a similar customer base to Mijoi and 1 comparator to get perspective outside our market space.

Shopping Cart

An intense deep-dive was performed on each site's cart system, cataloging every aspect of their check-out process. This analysis would be used to forge the best parts of each together.

Blog

While most sites had a blog, half were dedicated to a further discussion of their product line. In contrast, the other half focused on a holistic approach to the product category.

User Focus

From our screen survey, we knew that users were looking for indications that a product was meant for their skin/hair type. Only 1 of the self-care sites reviewed had this information listed.

Brand Identity

Websites are a vehicle to directly interact with users and an opportunity to examine each company's brand messaging. Themes of togetherness, earthiness, carefreeness, balance, and boldness were some central themes.

Building the Brand

The Mijoi team had concepts and themes they wanted their brand to represent, and they had competitors they needed to differentiate and stand-out against. What would be their "promise" to the customer?

A brand is more than just a logo; it is the emotional feeling of how a user perceives an organization. A logo, executed correctly, can provide a subtle visual impression of that brand mission. Mijoi's current logo had grown out of need; what they were now looking for was an identity built around their company's beliefs.

Mijoi's logo before the branding process

Analyzing the current Mijoi logo, I could see some of the emotional concepts the team had previously discussed with me. The script font had a "natural and unique" feel, and the mixing and intertwining of the fonts could be seen as "diversity and inclusiveness." But, those same elements also detracted from those themes, feeling overly complicated and messy. Not to mention, when this logo was scaled down, it was barely legible and recognizable.

The Promise

Before moving on to visuals, it was necessary to formalize a brand mission statement. Like forming a problem statement in UX, this brand statement would act as a litmus test for myself and the Mijoi team. It would have future implications on a litany of decisions ranging from visuals to even how the company responds and acts both internally and externally.

  • The Mijoi Promise:
  • To celebrate the natural, diverse beauty of the individual through awareness and honest self-care products

The Logo

Now that we formalized what Mijoi stood for, it was time to convey this in visual form. After numerous sketching sessions and providing the team with several campaign options, Mijoi now had an updated visual identity and a new tag line...A Celebration of You!

Dissecting the Design:

  1. Thick and thin areas signify diversity and lend a playful, natural feel to the overall design.
  2. Rounded forms give a sense of honesty, no corners to hide in. These shapes also have softness. Mijoi's main product line is moisturizers that hydrate and soften skin and hair.
  3. Contouring areas cradle and support other shapes — a nod to the protection the founder felt for her family that spurred the brand.
  4. Negative space is used to complete letterforms. This not only gives the logo an airy and light feel but also conveys the openness. Mijoi wants to be 100% transparent about the ingredients in their products.
  5. Though teal would still be featured within other visual materials for Mijoi, a coral was instead used on the logo to give a warmer, more energetic first impression.

The UX Process

With our approved brand messaging and identity design now fully fleshed out, it was time to begin focusing efforts on creating a user-centric sales platform. I had completed the initial research and user interviews, so it was time to move forward to synthesizing and ideating towards our final product.

Design Facilitation

Educating and involving the Mijoi team would be as much a part of the UX process as empathizing with the user. I would lead the group through an affinity map exercise to shape our persona. This helped to illustrate their assumptions about their users versus what their users are actually saying.

Exercise 1:
Assumptions

Not looking at any data, each member individually writes down assumed goals, activities, actions, and problems of users on Post-It notes.

Exercise 2:
Factoids

After grouping these assumptions on the wall. We broke out sales data and quantitative and qualitative data from user interviews and research that I collected.

Exercise 3:
Creation

After discussing unexpected patterns and intriguing data clusters, we pulled out behaviors, goals, and pain points that team members could use to empathize with their users. This would become our persona.

Phasing Features

Now that the team understood their user, it was time to brainstorm possible features for our online experience. I would lead the team through a group MoSCoW mapping exercise where we would concept features helpful to our persona and group them into 4 varying levels of priority:

Must-Haves

Important, but not vital, features that should be included to better the user's experience.

Won't Haves
(At This Time)

Could-Haves

Features that are not vital to the site's MVP, but could be considered in the future updates.

Nice-to-have features that could have a smaller impact on the user's overall experience but are not necessary to the core function of the site.

Should-Haves

These features are the backbone of our site and will make up the bulk of our Minimum Viable Product (MVP).

We would also check-in with our developer to make sure that these features would be achievable for our initial launch. This would also help us to create a road map for our design development. A 3 phase roll-out plan would help the Mijoi team budget costs, allow design/development efforts to be ultra-focused on our core functions, and enable iteration between each phase to optimize user experience.

MVP Development

The primary focus of this phase would be the shopping cart system as it has the highest return on investment and is a core task for users visiting the site. Other important initiatives in this phase: highlighting ingredients used in the product, indicators for skin/hair type, testimonials, browsing product by category, sharing for social media, e-mail list capturing, and diverse and captivating photography.

Iteration and Additional Features

We will iterate on features from Phase 1 based on user feedback and add additional features to enhance user experience: the ability for users to create accounts, product review and rating system, cart reminders, cross-promoting with related products.

Further Iteration and Future Planning

User feedback will again help to iterate features from phases 1 and 2. While some features such as a holistic style blog, user ability to upload before and after photos, and automated reorders have been slated for this phase, Mijoi will reaccess by brainstorming around user feedback. Additional future phases will also be planned at this time.

Design

Starting the design process, I would utilize our MVP from the MoSCoW Mapping, competitive analysis, and synthesized user research. Rapidly iterating and testing design concepts from low to hi-fidelity would allow me to check-in with Mijoi and our users to make sure I was creating a solution that worked for all parties.

User Testing & Design Pivots

Through user testing and a design review with Mijoi, I received valuable feedback on the mid-fi wireframes that would help strengthen the final design. Areas of improvement would include the revised placement of the skin/hair indicators, replacement of the secondary purchasing option, a larger hero image, and rethinking how we highlight ingredients.

Top: Original Wireframe; Bottom: Revised Wireframe

Revising the Placement of the Skin/Hair Indicators:

During testing, users were confused by the skin/hair indicators under the main product image. Many thought these would be additional photos of the product.

The indicators are now grouped with the product description on the right. The full description, usage explanation, and ingredients list have been moved further down the page and can be accessed quickly by clicking "Learn More."

Top: Original Wireframe; Bottom: Revised Wireframe

Replacement of Secondary Purchase Option with Related Items:

Most users thought the inclusion of a secondary purchasing option was not needed. With one user actually saying it felt "pushy." After a discussion with the Mijoi team and the developer, it was decided to move cross-merchandising with related items from Phase 2 to Phase 1 development.

Top: Original Wireframe; Bottom: Revised Wireframe

A Larger Hero Image:

From the design review with Mijoi, a larger hero image would be added. It was felt a more substantial image would make a more impactful welcome to users visiting the site.

Top: Original Wireframe; Bottom: Revised Wireframe

Rethinking How Ingredients are Highlighted:

The original mid-fi wireframes featured a clickable carousel where users could learn more about each ingredient in the product. At the design review, it was decided to instead highlight 4-6 of the most important ingredients for each product.

Style Guide

Everything I had been working on with the Mijoi team was now about to come together. One last step would be to assemble a style guide. The guide would help in 3 ways: keeping consistent when designing the final wireframes, communicating with the developer during handoff, and as a refresher when revisiting the site for future iterations.

Typography

Color Palette

Form Elements

Buttons

Hi-Fi Design

It was now time to increase the fidelity level of our design by utilizing the revised mid-fi wireframes, style guides, and previously completed branding work. Like with the mid-fi wireframes, we would test the hi-fi wireframes with our users and have a design review with the Mijoi team.

1. The playful organic shapes used on the identity suite and packaging were carried through to the website for consistency. This invoked a great response from tested users, with all users saying first impressions of the site were fun and joyful.

2. The majority of tested users asked if they could create an account log-in for easy reordering. This feature is slated for phase 2, but their comments underscore the importance of continuing development.

3. All photography features colorful solid backgrounds with a diverse range of models. Organic shapes help break the hard edge of the image box. These mock-ups use stock images strictly for photography direction. Mijoi is working with a professional photographer for custom images.

4. As a new company, the website has to inform users about Mijoi and how they are different as much as it has to sell products. The homepage was structured in an alternating pattern of product, education, product, education, and so forth.

5. All users tested were able to complete a "purchase" using our prototype with ease. This was due in part to our examination of competitors' systems, with one user saying the process was "straight forward and simple to do."

6. Users expected that they would receive a discount code for their first purchase when they provide their e-mail address. Based on feedback, perhaps a better call to action like "save now!" or "sign up & save!" might be more enticing to users overall.

Next Steps

Like with all online products, the work is far from finished. Currently, Phase 1 of the Mijoi e-commerce platform is being built out by their developer. But that does not mean the work stops for this UX designer. While users will be able to make purchases through the site with the MVP features from Phase 1, Phase 2 will have improvements that will significantly enhance the user's process.

My work will now shift back to research as I look at account sign-up/log-in processes and review/rating systems. Once Phase 1 is live, there will also be tons of data and user insights that will need to be analyzed to continue iterating.

Reflections

I feel lucky to have worked with this fantastic start-up. The Mijoi team was what every UX designer hopes for; they were open to new concepts and bold enough to follow through with them. As I learned about their vision and users, I was able to impart the importance of user-centric thinking. I will continue to stay in touch with them as we push forward on future development.