Nail It Page

Project Overview

The owner has a love for nail care and nature and is frustrated by the destruction of land-fields by harsh chemicals or toxins from nail products. This inspired her to start a business that would be a foundation towards sustainable and cruelty free products which also values our planet earth.

User Needs

Clear and accessible information about product ingredients, sourcing, and manufacturing processes to ensure alignment with the sustainability and cruelty-free practices.

Categorizing the testimonials, reviews, or certifications that foster trust in the brand's commitment to ethical practices and environmental responsibility.

Business Needs

Creating an e-commerce website to sell sustainable products.

Delivering the message that the products are eco- friendly, non-toxic, cruelty free, and gender inclusive.

Credits

Duration

7 Weeks

Team

Group of 4

Role

UX/ UI Designer

Software

Figma

Miro

Photoshop

Devices

Desktop

Mobile

About Nail It

Nail It is an online shop that sells non-toxic, sustainable and eco- friendly nail polishes and treatments. With Nail It chic, wearable nail products can be healthy and safe while being long lasting and chip resistant.

Problem Statement

Designing a responsive website that:

Incorporates inclusivity within the product’s choices and brings the equal shopping experience for all users.

Encourages users to choose all- free, non- toxic and sustainable treatments over the alternatives.

Builds trust by including testimonials and certifications to the platform.

Process

Having an end-to-end process using double diamond approach

Discover

Market Research

User Interview

Competitive Analysis

Define

Persona

Storyboard

Develop

User Flow

Site Map

Design & Test

Wireframes

Mood Board

UI Kit

Usability Testing

Deliver

High-Fi Prototype

Mockups

Discover

Understand the current industry and audience through Research

Market Research

Understanding Users

User Interview

Competitive Analysis

Market Research

28 individuals as research audience

60% needed nail polish for everyday use

75% were employed individuals

67% of the customers, enjoyed having other nail care products within the Nail It platform

70% of the users were equally concerned about the cost, ingredients and quality of the nail products

68% of the audience have struggled to find products that match their skin tone and other criteria

“ The primary user group is full-time working adults with a busy life style who are looking for affordable, eco-friendly and sustainable nail products that not only have good quality but also can easily be paired with different skin tones.“

Understanding Users

The Grand View Research indicates that, the global nail polish market size was valued at 14.3 billion USD in 2021 and is expected to expand at a compound annual growth rate ( CAGR) of 6.8% from 2022 to 2030. According to the Nail It’ market research, our customers are mostly individuals who need nail products for everyday use. Our main goal is to help the users select the “right” nail product for their skin tone and conditions by taking simple steps and having a pleasant online shopping experience. Let’s take control of our health and choose more eco- friendly and non-toxic options. To further understand our customer’s concerns and needs, we conducted a series of survey and interview with them.

User Interview

Both the survey and interview questions were open-ended to assess customers' expectations and pain points in relation to online shopping for individuals as well as the overall brand objectives.

“While doing my nails at home, the final quality and the durability turn out to be unprofessional”

“ Why do we always have limited color options? I always struggle to find the “ right” color for my skin tone”

“ I look for safe and non-toxic treatments to boost the health of my nails”

“I don’t have enough time for my nail polish to dry out”

Competitive Analysis

The analysis of 11 similar nail polish and treatment websites, their features, and their work flows helped me to understand how to design a responsive information architecture and what features Nail It platform should be having.

Major Takeaways:

Adding the variety of skin tones was a limited criteria in most nail polish websites and Nail It wants to facilitate that. Considering most competitors’ inability to satisfy customer needs, product filtering, customer reviews and gift services, mentioned criteria could be a potential business opportunity for Nail It. By incorporating nail treatment sets into the website more users would be attracted to Nail It’s values.

Picture Representing Competitive Analysis

Define

Define the target user’s needs, goals, motivations and frustrations based on research finding

Persona

Story Board

What outcomes do we want to see?

After understanding the user problems and needs, we went through several hours of brainstorming on how we can respond to the concerns. These are the critical possible solutions that we came up with:

Staying minimal

Applying nature-inspired colors, minimal font styles, flat patterns, and maximizing negative space to avoid clutter and overwhelming the design help to follow a minimal approach and give the sense of hierarchy.

Saving time

Busy users with a hectic life-style can save time by using simplified interfaces, restricting features and elements that do no support user needs.

Accessibility

Incorporating “ Quick Look” and “ Items you might also like” within pages can optimize customer shopping experience.

Customization

Providing a good variety of color skim for nail polishes, show casing them on different color skin tones while offering different product sizes and integrating the camera feature “ Try me on” for the nail polishes can aid users to have more control over what they buy.

Sustainability awareness

Designing a responsive platform to convey the message that nail products can be non-toxic and safe for both the users and the environment by offering eco-friendly deals.

Story Board

Develop

Develop concepts for potential solutions based on research insight

User Flow

Site Map

User Flow

Considering the customer needs and the project goals, we constructed a user flow that describes the journey user might take while purchasing an item. Nail Its’ user flow helped us with:

Identifying the key screens and actions users might require to fully buy a product Understanding ways users can interact with the products Facilitating the navigation flow through user goals

Site Map

After running multiple card sorting sessions with our potential users, for designing the key screens, deciding on where the main features would be located and how they would be relating to each other, Nail Its’ site map was built.

Design & Test

Implement the visual design and revise the prototype based on usability testing

Wireframe

Mood Board

UI Kit

Usability Testing

Paper Wireframing (Low- Fi)

Following several iterations, I started the design stage by sketching out ideas for layouts and referencing the task flow, user flow, and sitemap.

For better show casing the visual hierarchy, the low-fidelity wireframes were a quick and efficient method and helped us to structure the key screens for a responsive platform to aid users move forward with their purchases.

Creating low fidelity wireframes also ensured that chosen solutions worked well on screen and integrated seamlessly with one another.

Digital Wireframing (Mid- Fi)

To better illustrate the solutions to challenges and customers’ need, the latter sketches have been translated into a digital form of mid-fidelity wireframes in Figma, getting prepared for usability testing. The grey scale of the wireframe indicates that, I was mostly trying to focus on the functionality of the features.

Through this phase, several rounds of iteration have been performed before the final content was developed.

Picture Representing Digital Wireframing

Mood Board

To pick up the right color pallet that represents what values the company is standing for, I was inspired by nature, the fair combination of neutral and bold colors to convey the sense of calmness, strength and independence. I also paid attention to the brand attributes which are sustainability, eco-friendliness, gender inclusivity and health.

Design System

As the platform is giving online services to its audience, I decided to get more inspiration from the Shopify design system and eventually, having applied the Nail It layouts defined in the mid-fidelity wireframes, I created a UI Kit and design system dedicated to what the company stood for.

Note that, this is a living document that can serve as a resource, ensuring that the visual design remains consistent as the website is further developed:

Candidate colors represent the company’s value in eco-friendliness and sustainability.

Combination of neutral and bold colors have passed the accessibility test to make the platform versatile for everyone.

Intelligent choice of icons convey value propositions of the company in brief.

Roboto typography follows the minimal design of the platform and draws attention to the products.

Adequate amount of white space brings clarity and follows the minimal design.

Usability Testing

To reveal usability problems and evaluate the design, an unmoderated usability test was done among Nail It’s audience which led to the following task development:

Display effective and novel hero images to communicate company’s values and avoid clutter of information on the home page. Include chips on “Product Info Page” to aid the sorting and filtering process. Embrace diversity by including models with different skin color as part of the product cards rather than separate pages. Switch the camera option of “Try me on” to the mobile platform for better accessibility.

In order to evaluate the design, I asked users to complete tasks on the prototype itself. The major iterations are shown below.

Deliver

Deliver the final prototype

High- Fi Prototype

Mockups

High-Fi Prototypes

Aiding the usability testing insights, Nail It prototypes have been updated to address the points of frustration, confusion, and hesitation by updating features.

Reflection

Completing this project started with designing a sustainable, and eco-friendly responsive platform; however, it soon escalated to revealing new ways to utilize the information and mold it into an interactive prototype.

UI Kit and Design System

To keep our current and future designers on the same page, the development of UI kit and design system, including the components and assets, helped us improve the design workflow and plan our design's structure properly. I have learned the importance of maintaining the same comprehensive resources and infrastructure for team members to ensure the brand has consistent design in less time.

Iterate, improve and test all over again

Our usability tests started for both low and medium- fidelity prototypes although, approaching users with a high- fidelity prototype with all the details for testing and insights of the design sounded appealing throughout the way. Nail It audience were more confident to engage in critical feedback on an incomplete prototype and the early feedback guided us to avoid redesigning and as a result wasting time within the project.

Where to go from here

Due to time constraints a number of tasks have been paused that could potentially be addressed next:

Evaluating the current design with other methods of testing

Engaging VR technology on each product for providing an accessible service.

Redesigning the Nail It logo to preserve the minimal yet eco-friendly flow with colors that can optimize accessibility by incorporating higher contrast while not jeopardizing the intended feel and goal of the platform.

What I would do differently

Usability Tests

Looking back to the valuable feedback received from our low-fidelity prototype, I would spend more time and effort on the initial phases of the usability test. This will put less pressure on both the users and designers to be able to alter changes quickly while getting feedback faster.