UI-UX
Bureau of Skincare-BOS
BOS offers a streamlined solution for facial skincare. By monitoring users’ daily skincare regimen, the app generates easy-to-understand data visualizations that highlight the impact of various products and environmental factors on their skin. With this information, users can make informed decisions about their skincare routine and achieve their desired outcomes.
ABOUT THE PROJECT
Problem Definition
Skincare is a crucial aspect of maintaining healthy and glowing skin. While some people stick to a basic skincare routine consisting of cleansers, toners, and moisturizers, others incorporate more advanced products like serums, antioxidants, and retinol for optimal results. However, managing a complex skincare routine and ensuring that all products work together seamlessly can be quite challenging, especially for busy individuals. Consistency and attention to detail are key when it comes to achieving healthy skin, and developing an effective skincare routine is essential. Nevertheless, for many people, this can be a daunting task. Fortunately, with the right tools and guidance, it’s possible to take the necessary steps to achieve the best possible skin health.
Project Overview
BOS is an innovative skincare app that helps users track and manage their daily routines while providing expert advice and recommendations. Upon creating a profile, users can provide detailed information about their skin type, conditions, and concerns, which the platform will analyze and match with personalized advice. They can create custom morning and evening routines, selecting from a wide range of products available from Sephora. Additionally, users can record a daily log describing their mood and how their skin feels, which is charted on the MyPage tab. Using this information, BOS generates tailored recommendations to help users achieve their desired skin health goals. With BOS, users can take control of their skincare routine and achieve their best possible skin.
| Role | Responsibilities | Project time | Team |
|---|---|---|---|
| UI-UX Designer | – Researched the competitive market. – Created UX Strategy – Created personas blueprint – Created a user flow – Wireframed to lay out content and functionality – Designed branding and logo and marketing materials – Created mockups – Presented the project | 10 Weeks | 3 UX-UI Designers 3 Developers |
UX DESIGN
uX Contribution
As a UX designer, I played a key role in the development of this project. I conducted extensive research on the target users, including their behavior, motivations, and needs. This research helped me identify opportunities in the market and create a UX strategy blueprint for the product.
- To represent the needs of a larger group of users, I developed detailed personas that captured the key characteristics and pain points of our target audience. This helped the team to create a product that would meet the needs of a diverse range of users.
- I then created a user flow that defined the optimal user journey for the product. This helped to ensure that the product was intuitive and easy to use, providing a seamless experience for our users.
- Using the user flow as a guide, I wireframed the product to lay out the content and functionality in a clear and logical manner. The wireframes helped to ensure that the product design aligned with the needs of our target audience and provided an effective solution to their skincare needs.
Overall, my contributions as a UX designer helped to ensure that the product was user-centered, intuitive, and effective in meeting the needs of our target audience.
UX Strategy Blueprint
As a UX designer, I developed a comprehensive UX strategy blueprint for the project. This blueprint served as a roadmap for the team, combining business, product, and end-user needs. By aligning our goals with the needs of our target audience, we were able to design a user experience that met the needs of our users while achieving our business objectives.
User Personas
We segmented the personas based on demographic factors like age, sex, and climate impact on skin health. Each persona was defined based on survey results.
User Flow
As a UX designer for BOS, I conducted research to identify user needs, motivations, and behaviors, as well as market opportunities. Based on this research, I created a UX strategy blueprint that helped us to prioritize features and design the best possible user experience.
During team meetings, we identified key features such as routine and product inputs, weather-based skincare advice, product usage tracking, and skin feel charted data. We designed the user flow to start from the Home page, where users can learn about BOS’s features. From there, users can navigate to the Profile page, add skincare products on the Routines page, and track changes in their skin’s texture and appearance over time.
To provide personalized skincare advice, we incorporated weather-based skincare advice that takes into account the climate and weather conditions in the user’s location. Finally, the skin feels charted data feature helps users to monitor the effectiveness of their skincare routine and make adjustments as needed. These features work together to provide users with a comprehensive skincare experience that is tailored to their needs.
Wireframes
Once we had finalized the user flow for our app, I began creating wireframes to bring our design to life. As our platform relied heavily on user inputs to produce outputs, such as personalized skin care advice based on weather and product usage, as well as skin feel charted data, I made sure to focus on creating wireframes for the profile and routines pages first. Throughout the wireframing process, I collaborated closely with developers to ensure the functionality of our design features.
UI DESIGN
Branding
BOS core values:
- Neutral
- Nourishing
- genderless
The goal was to create an inclusive application that caters to all age groups, genders, and ethnicities. To guide us in choosing our brand logo, color palette, and typefaces, I set core values that reflect the commitment to diversity and inclusivity.
Color Palette
For our color palette, I opted for neutral colors with less saturation as I aimed to position our platform as a skincare routine tracker that stands out from other cosmetics that focus on makeup. My choice of colors reflects the platform’s simplicity, elegance, and sophistication.
Logo
The logo is a combination mark that features a human face shape, symbolizing skin health, and the brand initials BOS. The logo’s design is modern, minimalistic, and versatile, allowing us to use it across various platforms and materials.
Typography
When selecting the typefaces, I prioritized legibility to ensure that users could read the content with ease. I chose Sora for the headings and Khula for the body, both of which are highly legible and visually appealing. By selecting these typefaces, I ensured that the brand is consistent across all platforms and materials.
UI Components
To ensure consistency and maintain a visual language throughout the application, I developed UI components. These components helped to streamline the design process and facilitate communication between the design and development teams.
UI components Include buttons, forms, and cards with a consistent style and layout to make sure that the design language is consistent throughout the application.
Responsive Design
Designing and developing a responsive platform that can adapt to different devices, screen sizes, and orientations was a crucial aspect of this project. We wanted our users to have a seamless experience, whether they were using the app on a desktop computer or a mobile phone.
To achieve this, I used a combination of flexible grids, responsive images, and media queries. The UI components were designed to be fluid and adjust to the size of the user’s screen.
