Olivia may
My Responsibilities
Project overview
High-fidelity UI
Breakpoints
User survey
Grid system
Sitemap
Competitive analysis
Components
Wireframes
Persona's
Tools
When?
Jan 2024 - Feb 2024
Why?
Portfolio project
Where?
South Africa, Johannesburg
Category?
Responsicve web design
What?
Beauty, personal care
Role
UX/UI Designer
User survey
Use Google forms to ask questions
What are you looking for in skincare products while shopping online?
9 Participants
Price
11.1%
Benefits
44.4%
Skin Concerns
33.3%
Ingredients
0%
Other
11.1%
Natasha
“Their products are affordable, cruelty free and good quality with a variety of ingredients.”
The problem
Olivia Mai faces challenges in providing an intuitive and accessible online shopping experience for skincare products. Users struggle with navigating the site efficiently and lack clear guidance on product selection. There is a growing demand for seamless access across multiple platforms, while users also seek to experience the same ambiance online and in-store.
Project Goals
Clarify product information like ingredients, usage instructions and benefits so that the user will be able to make the right decision and buy the right product
Optimize Responsiveness to ensure users have the same seamless experience across all platforms.
Maintain brand consistency across all digital platforms.
Enhance user engagement to improve users overall experience.
Competitive analysis
Research in a nutshell
In my user survey, I discovered that users prioritize understanding the benefits of skincare products and functionality when shopping online. However, existing websites lack comprehensive and prominently displayed product information, leading to uninformed decisions, worsened skin conditions, negative reviews and decreased sales.
Persona
Sitemap
Paper wireframes
I moved from flow diagrams to sketching website layouts. These paper wireframes helped visualize design ideas and plan the website's structure before creating digital prototypes.
Ideas for content I had in mind
Nav bar
FAQ
Privacy policy
Socials
Seafety of products
Ingredients
How to use
Types of products
Skin understanding
I used sticker voting to select the most fitting sections for my content. These chosen sections were then combined into the final wireframes, ensuring alignment with the project's objectives and user preferences.
Color system & Fonts
I have used material design Theme builder to create a colour pallet for Olivia Mai. I first started off to create a mood board.
Grid system
Integrating breakpoints into a website ensure whether the user is on a laptop, tablet or smartphone, the site response to deliver information in the most accessible format. Combining breakpoints with auto layout I designed a fully responsive website that adjust dynamically based on the user’s device.
Desktop
Mobile
Components
Buttons
Icons
Desktop
Mobile
Breakpoints
Including breakpoints in figma has benefits on developers
Serves as a visual references, indicating specific points where the layout should change.
Write more efficient code and targeted CSS helps them to implement media queries effectively.
Communication tool between developer and designer to reduce misunderstandings during development process.
What I have learned
During the design of Olivia Mai I mastered auto layout and breakpoints to create a responsive website.
Reflecting on my design process, recognize its was iterative. Started with some research, then wireframes to completed my high-fidelity UI design. However, as I were moving forward I question some placements of certain UI elements, prompting a revisit to my research.
As an advocate for accessibility, I leaned how to use font sizes and types across different screen sizes. By carefully adjusting the fonts, I aimed to create inclusive experiences.
