WEBSITE DESIGN
Empower holistic self-care and wellness exploration.
UI Design
UX Design
Timeline
Feb 18th - 26th 2024
Role
UX/UI designer
Client
Beauty
Team
Clara Wong, Frentzen Taslim, Prayag Kalianda
(Mentor- Jessica Courtney)
Overview
Project Summary
FLUI Design hackathon was an event hosted by Emily Carr University students. The event is a 2-week design competition empowering students to develop both soft and hard skills in an opportunity-rich environment.
In teams of 4, participants will apply principles of design thinking toward out-of-the-box solutions with the help of strong mentorship from design experts.
Client
Amaterasu Beauty crafts durable, safe makeup from natural ingredients, inspired by Japanese philosophy. They empower women to prioritize holistic well-being over skin appearance for lasting happiness.
Currently, they are trying to expanded into a new lifestyle category where users not only discover their preferred beauty products with ease but also gain insights into enhancing their inner beauty through proven strategies and techniques.
Problem Statement
How might we expand Amaterasu vision to empower holistic self-care and wellness exploration within the beauty community, and further boosting engagement and cultivating brand loyalty?
Solution
Build an intimate online community platform
Promote sustainable and wellness beauty line
Enhance digital learning experience
Design Process
Client
Interview
Research
Content
& Sitemap
Wireframe
Mock-up
Client Feedback
&Modification
EMPATHIZE
My Contribution
In our team of four UX/UI designers, we collaborated on the project until the wireframing phase. My focus was primarily on the 'article' and 'quiz' sections, including prototyping for each.
Communication/Project Management:
I communicate effectively with the team, helping them stay on track with their tasks. I also facilitated one of the client interviews to ensure clear and accurate information exchange.
Detail-Oriented/Quality Control:
I ensure the highest quality in deliverables by aligning designs for consistency and thorough quality control, ensuring all work meets the set standards.
Empathize
Client Interview
As a first step of the hackathon, we interviewed our client to better understand their goals and constraints. Here are the key metrics and insights we gathered during the interview.
Content Expectation
“Not only selling a product, but also educate people in need with holistic health care and wellness(inner-beauty)”
Build a community
Have a great relationship with customers to gain more positive comments about the company.
Create a community where people can learn such as through VIDEO & PODCAST
Promote wellness
Show some empathy.
Share health advice for people with chronic skin issue to increase their happiness.
Educate customers
Help people who have less beauty to gain confidence in doing something.
Educate people with new proven research and right information.
Visual Expectation
“Client wants something zen, elegance, and has some Japanese elements”
Do not include
Childish element
High contrast that cause low readability
Neon color
Ultra modern
Include
Elegance, sophistication, east meets west
Japanese element
Zen
Calm, peace and serenity
Persona
User’s needs
As someone on a wellness journey, I want to discover curated self-care content, so that I can find recommendations aligned with my pursuit of holistic well-being.
Struggling to find beauty products that align with both high-quality
standards and sustainable values.
I desire personalized lifestyle product suggestions, so that I can seamlessly integrate beauty and lifestyle offerings into my daily regimen.
Actively engages in social media discussions related to beauty, design, and sustainable living.
Solution
Promote sustainable and wellness beauty line
Quiz
Build an intimate online community platform
Podcast
Enhance digital learning experience
Article
Video
Site Map
Design
After defining the problems and solutions, we move on to the design phase.
Wireframe
We translated our ideas into a digital wireframe, incorporating new sections like articles, podcasts, quizzes, and videos. I focused on enhancing the accessibility and usability of the article section by adding a pull-down feature, allowing users to easily search for specific articles from a large collection.
Style Guide
In a team of four, we created a design system to ensure consistency in our work and design process. We consulted with the client to determine their preferred mood board and color scheme. We selected 'Ogg Text' as the heading font and 'Open Sans' as the body font for readability.
High-fi mock-up and Prototype
We turned our ideas into a digital wireframe. We added new sections like articles, podcasts, quizzes, and videos. I focused on enhancing accessibility and usability in the article section by adding a pull-down feature, making it easier for users to find specific articles from a large collection.
Article Page
Article section offers insights on various health and wellness topics.
Features an intuitive filtration system for easy navigation to specific topics.
Quiz
Interactive quizzes boost user engagement and understanding of individual needs.
Personalized content and product recommendations enhance user experience.
Impact & Reflection
After defining the problems and solutions, we finally move on to the design part.
Sara, founder of Amaterasu Beauty
I really did love the layout your team has created. It was very well thought out. Most designers focus too much on the esthetics of a site but your team thought of functionality which is so important plus it was beautifully done.
It was my favourite actually!
Judge’s feedback
The project demonstrates a strong visual design and innovative approach to functionality and community engagement.
Judge’s feedback
There is a room for improvement in balancing text-heavy content and detailing the community feature's user flow.
Key Takeaway
Establishing detailed design rules, like rounded corners, is crucial for group collaboration.
Balancing client and user needs presented a challenge.
Scope became too large; tendency to create every pages for the details, leaving less time for design iteration. In future projects, aim for keeping the scope small and earlier transition from findings to visible design, so that we have enough time for iteration.