Misk Academy UX | UI Design Bootcamp
Project duration: 2 Weeks
Team: Lama Alharbi, Hanadi, nesrin almehmadi
this is a case study of a Microsite for Niceone.com. This is a group project for the UX/UI Bootcamp course at Misk Academy .Our project is about applying what we have learned so far and creating a microsite on Figma.
We created the following video storyboard to have a better understanding of the users problem
Goal of the research:
To help vegans who have a difficulty with finding vegan beauty products find the products they need under one roof.
The Client:
Our client Niceone.com a cosmetics website based in Saudi Arabia and because it has so many vegan brands which its such a strong point for the website, unfortunately it is lost between the many products they have, we thought it deserves to be highlighted.
Why vegan beauty products?
- Because vegan products are healthier and cleaner
- Because it has fewer ingredients
- Because its trendy
- Because its a life style many people follow
- Because its great for sensitive skin
Our frame work
Our Methodology:
We did a disk research to apply the C&C analysis, features comparison, layout comparison, leaf diagram on ten competitor websites to make the best of our website.
Feature Analysis Outcomes
- In all the websites we compared we notice that all websites in our region didn’t have a vegan beauty product page to showcase the products and the brands.
- All websites we compared follow the same set of features.
Leaf Diagram Outcomes
- We found out we have 5 sectors of competitors. The sectors were Health, Wellness, Foods, Makeup, E-commerce.
- from these sectors are most likely we get our audience.
Layout Analysis Outcomes
- We noticed the most screen layout was populated by offers.
- All brands followed the same layout Color black is the most dominant.
- Most websites use the color white as a background color.
Market Positioning Outcomes
The style of our website is not up to standards and we need to follow the best standards. To stand out in the market.
Heuristic Evaluation outcomes
We loved Mac and Asos’s user experience on the website so we took them as inspiration for our website and brand.
We found out Wojooh and Danube had a lot of problems with the website. we noted them all for our website.
Business Analysis: Key Outcomes
- All websites in our region don’t have a vegan beauty page
- We noticed the most screen layout was populated by offers
- We found out we have 5 sectors of competitors
We interviewed 30 people and asked them 5 questions and the conversation we had with the users helped us find the core of the problem, it gave us clear insights that helped us understand our users and their needs much better
Insights from our users
- Struggles to find vegan beauty products in one place.
- Even non vegans are interested in vegan beauty products.
- The size and the color of the products are not always clear online.
- People want to read and learn more about vegan beauty products.
- People want easy ways to pay like apple pay or stc pay.
- People trust products after trying it.
- Fast shipping and return policy are the reason why people prefer some websites over other websites.
- People love vegan beauty products because the ingredients are clear.
- Reading reviews written by other customers makes people trust the website more.
We based our persona on our users’ motivation, habits, core needs and pain points
Our persona “the influencer” is all about trends, clout, learning, sharing on social media, connecting with people and giving her feedback and voicing her opinions so we wanted to build a website that serves all of her need and passtions.
Problem statment
“Our users straggle to find vegan beauty products because it’s not always available and the informations are not always clear online . Our solution should deliver an organized way to find all vegan beauty product in one place”
User Journey
“Jomana had her skin care products empty. She read online about a new vegan skin care line. And she would like to find a website where she can read more about the products. See reviews and buy the skin care line”
Key Features:
- AR for the Products
- E-payment options
- Providing tracking system
- Following friends
Sitemap
To give a better experience for our users we asked them to do 4 closed card sorting and 3 open ones, and we based our site map on that
User Task Flow
To test and give our users a chance to explore the website we asked them to do two tasks:
- The first task was to buy a product from our website.
- The second task is to follow another user on the website
Prototype
We started to create lo-fi wireframes.
Then create a mid-fi prototype with annotation. And we test it with some users.
Our feedback was was that the menu bar was too crowded
Then after the med-fi with the feedback we created the hi-fi. We also made a video to showcase our work.
Future developments
We always wish to grow and be better and we want our micro-website to reflect that so we’ve set a couple of features that could help take our website to the next level to keep up with out ever developing world
- Custom makeup Accessories
because our persona “the influencer” would appreciate having her initials on her own beauty tools
- Voice Navigation bar
To make our website as inclusive as we can
- Search by image
To make our users search way easer
Conclusion
This was such a fun project that I’ve got to learn so much from, and it was such a pleasure working with an amazing team mates!
