‍

Our team worked with Beauté to audition some of design concepts until we found the perfect solution for improving the design of their website while keeping users comfortable with fun and amazing interactions.

• Designing a minimal website
• Creating skincare quiz
• Implementing some tutorial videos for users
• Showing the texture of skincare products
• Adding more images while using skincare routine & feeling fresh skin
• Using some icons for data visualization

‍

We did competitive analysis in the earliest research steps in our UX design process. We were team of 4 people and each person chose 2 websites to analyze and synthesize the data. I found two sustainable skincare websites. my competitive research was iterative and continue as long as I was working on that project.

We started our user research by survey to provide strategic insights. 50 people participated in this survey. This below question helped us to collect effective information about products:

‍

‍

My teammate interviewed a saleswoman some questions, she works in a cosmetic store. My teammate used these magic words WHY, WHO, WHERE, WHEN, WHO and HOW after each question to get more information about the sustainable products and user problems. We collected good information about green cosmetic products

1. How do people prefer shopping the beauty items? In-store or online, why?
2. Where do people find the sustainable beauty products?
3. Which brands do people like more? And why?
4. Which factors are the most important to people when buying beauty products online? And why?

‍

Target Audience

We studied on people, regardless of gender identity, age, ethnicity, or body type. Women are more likely to purchase beauty products than men; even though some men are interested in cosmetics. Our target audiences are most women aged 16 and up. They prefer Eco-friendly cosmetics and brushes.

I created one female persona to demonstrate the healthy skin needs of users and caring about the environment. Mary is mostly concerned with the Eco-friendly products, while using clean products on her body.

‍

Storyboard

my storyboard is a linear sequence of illustrations, arrayed together to visualize a story of Mary. She is passionate about wearing makeup most of the times; therefore, she is constantly searching for natural skincare and beauty products.

‍

‍

User Flow

We focused mostly on designing for a new and challenging task, so our team made a user flow for a user who takes a skincare quiz and personalizes a skincare product.

With the user research, me and my teammates created a sitemap to help us visualize the information architecture, which was eventually continued updating throughout the project. Below is the screenshot of the most recently updated sitemap.

‍

Our first task was to design a logo and corporate identity and packaging to convince our stakeholder of the look and style they’re going for.

We researched color basics and psychology which are powerful tools that can create different feelings and emotions in users. Our team decided to use colors to represent sustainable products.

Khaki color is associated with being down to earth, so I chose this color for the product card background to represent that these products are ethically sourced and Eco-friendly.

Also green is associated with the color of nature as it is connected with the environment which can grab users attention easily. This color is used for the CTA buttons.

I created wireframes and Lo-Fi prototypes before going over it with desired styling. I focused on skin care quiz wireframing that was so challenging to create a user-friendly and easy steps for our potential users.

‍

‍

We needed to design new layout. Plenty of images, icons and micro interaction components all came together to set a creative pattern and the amazing interfaces and submerge the user in the website’s atmosphere and convey fresh feeling.

‍

‍

‍

Desktop Design

I focused on some of the important guidelines in UX design:

• Using determinate progress bars for operations that require a bounded amount of time
• Creating modal dialog boxes that users must respond to before continuing with their task
• Choosing standard icons based their message type

‍

‍

‍

‍

‍

Mobile Design

The design process took multiple iterations of low-fidelity screens and updating the adaptive mobile design. In adaptive design, the layout was different from the desktop's version. I focused on:

• Reach area — thumb reach
• Tab Bars
• Font Size
• Finger-friendly buttons

‍

‍

‍

Animation

Every elements designed with love and extra attention to development. Our team focused on every little detail including animated cards and images to really enhance the user interaction.

‍

‍

‍

‍

Share and Listen

We Shared our design to embrace feedback and critics. Tested our design with real users. Some users needed to change the screen to dark mode. It improved accessibility, attention, and focus, and created less strain on the eyes for not just the users with a disability, but all users.

‍

Fix and iterate

We fixed parts of our design based on feedback. Lastly we went back to first step and make it even better.

‍

‍

‍

‍

‍

‍

Here are some of the most common challenges I faced in our design team:

• Getting to know my teammates
• Time management while my teammates was busy and could not spend enough time on our project
• Adaptive design required different approaches for mobile and desktop, and I had to iterate several times to ensure consistency across both platforms

‍

As long as I am aware of these obstacles and make a conscious effort to overcome them, I can enjoy a productive and effective work life as a UX designer.

‍

Takeaways

‍

• The importance of user research and testing our design in the design process
• The need to personalize the design and functionality for users
• The value of clear and intuitive navigation and labeling
• The benefits of using an appealing visual style
• The effectiveness of particular design patterns for addressing user needs