The Framework
Learn Research, observe, get fully immersed
Define Identity goals, objectives and challenges
Design Sketching, conceptualize ideas into visuals, wires & mockups
Test Prototypes, iterate, experiment and test
Competitive Audit
We looked at the top personal care rating applications and websites and learned about their features. All of them did not give cleaner alternative recommendations, which differentiates us.
Social Listening
We used social listening to find out what the people are saying and which data can be use to validate our product. A major takeaway, people don't know which ingredients are harmful and there is a lot of misinformation online.
"It's scary how many people don't know
about the toxins in our everyday products..."
Surveys - 104 responses
We created a survey using google forms to gather feedback from potential users.
Personas
We defined who our users are based on information we gathered from our surveys. It's important to get information about the needs and wants of our users.
User Journey Session
During our user journey session, we mapped out the actions and emotions of our users while completing a task, so we can find their pain points and struggles. Our test subjects come from our target audience and they will inspire our product’s features.
Minimal Viable Product: Must haves
During our MVP session, we discussed key performance indicators, voted on features, and ensured shared understanding. We agreed on our "must haves", "could haves", and "should haves."
Flows
Flows are paths a user will follow in order to complete a task.
This helps visualize paths the user must follow and how those pages will be designed.
Jaden's browse flow
Jessica's scan flow
Sitemap
With features and flows in mind, we mapped out our extensive information architecture.
Hand Drawn Sketches
First, we sketched our original ideas separately. Then, we discussed back and forth our objectives and goals. Ultimately in the end, we combined our layout and flows where we felt was usable and feasible.
Wireframes
We turned our hand sketches into digitized screens in black and white to keep us focused on layout and content.
Wireframe Prototype Testing
Applying Lean UX, we did rounds of user testing with a prototype. This is how we got feedback that helped improve the site’s navigation and usability.
Evolution of the search bar
Through trial and error, the search bar evolved from chunky to a minimalistic search bar for efficient usability.
Moodboard
My partner and I brought two moodboards to the table and tested it on mockups. We ended up using warm colors for a calming, relaxing, organic, and natural feel. And swatches of lotions, creams, powders for texture!
Homepage UI Exploration
We explored many different color variations to our homepage.
Design System
For consistency, we created a DSM, allowing us to create components that can be reused by other designers.
Mockups
Mockups are where we see our design come to life. We applied our colors and texture. We wanted display the power of white space and simplicity.
Responsive Design
Mockup Prototype Testing
The Homepage Breakdown
IXD
Microinteractions convey system status and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging.
Transition between ingredients and reviews
View more or less about an ingredient
Handoff
Daily Stand Up Meetings with Web Developers
Applying agile methodology, we met every day during our sprint with our web development team for stand up meetings to discuss progress. We showed each other what we were working on.
Final Handoff Meeting
We met with our team for a final handoff meeting, we walked them through our Figma file, design system and other assets.
Dev work in progress
