Case Study: Ounas Occasional Bags Microsite
Introduction
This is a group project for Misk Academy’s UX/UI course. The focus of this project was to design a microsite for a local retailer focused on very specific users. with 75–100 highly curated products from their current inventory. Our job was to work with the information architecture and interface design to produce a site that is easy to navigate and reflects the brand’s image.
Team: Hajar Alhilali, Maryam Alfairouz, Dalal alsayel
Project Duration: 2 Weeks
The Client :
Our client is Ounass.com. As fashion and luxury local brands based in Saudi Arabia, the website carries a whole range of brands. It covers Clothing, Handbags, Beauty, Jewellery, Shoes, Home & Decor. The microsite focuses on highlighting the Occasional Bags brands that Ounass offers.
Why Occasional Bags microsite?
Why? because not all bags match for any occasion.
Why? because bags have a lot of types and few people know that.
Why? because it’s trendy.
Why? because it’s a lifestyle many people follow trends!
Why? because it’s great to give people the chance to choose by themselves.
Understanding Users Need
Our first step is to explore Ounass.com in order to better understand the website’s users and their experiences with it.
With that in mind, we set our goals by helping users choose the right bag for every occasion. Also, confining the options into specific occasions to ease their buying process and give them recommendations based on the type of occasion they attend most often. We started with user research through survey screening and interviewing.
Screeners Analysis:
- Most of the users buy their bags through online websites.
- Users usually bought 1 to 3 bags Yearly.
- Occasions that users buy bags are Wedding, Work, Eid Season, Summer Season.
- User shift their shopping from Ounass to Farfetch and Namshi if they didn’t find what they need.
Interview:
With all the finds. We did the interview to get more insights about our users and identify details such as the type of bags they use frequently and why they perceive bags as an important item. Also the struggles they face when they are buying a new bag.
Affinity Mapping:
Affinity Mapping Key insight:
- Struggles to Choose the right bag for the right occasion.
- People care for others’ opinions about their appearance and accessories.
- The type of bags is different from one person to another.
- The most common time that people buy a new bag is in certain season such as Eid or Wedding.
- People buying behavior is changed based on their needs of bags.
- Some of people wear the same bag for different occasions.
Persona:
After combining similar user needs, goals, struggles, and Buying behavior we created Sara a persona that represents all what our user needs.
Problem Statement:
We created the problem statement based on the pain-points and opportunities we uncovered during the research phase and was an important step in defining the project’s main objective. Sara struggles to find the right bags for the right occasion and she has no time to waste. Our solution will deliver an organized way to help her to find the right bags for the right occasion. Also, can be worn on different occasions.
Solutions:
- Provide Sara with a comfortable way to find the right bag for the right occasion
- Helps Sara with perfect classification for each bag and either it matches their need or not
- Analyze the time that Sara looks for fancy bags and send a recommendation notification to her
- helps Sara find bags that fit for different occasion
C&C Business Analysis:
Before Developing our solution We went through C&C analysis to identify the key feature that our microsite needed. We created Feature Analysis, Leaf Diagram, Layout Analysis, and Card sorting which results enabling us to point out the problems, goals, and solutions. Our competitors were Sivvi, Farfetch, Namshi, Nordstorm, Asos.
1- Feature Comparison
Feature Analysis Outcomes:
- In all the websites compared we notice that all websites provide to people the related items to the bags
- The payment feature differs between global and local website
- All website includes multiple brands such as global and economy bags
2- Layout Analysis
Layout Analysis Outcomes :
- We noticed most of the home page website full of sales offers
- The most website has a white background
- Classification is not based on the occasion bout on type of bags
- Ounass product page contains a special element that is fashion expert advice
3- Historic Evaluation
Historic Evaluation Analysis:
During the evaluation we did, we found out that both Ounass and Farfetch had really good websites. So we took them as inspiration for our website and brand. We found that the least-remembered sites were too crowded on the home page.
4- Leaf Diagram
Leaf Diagram Analysis:
By research, we gathered these features from websites, and by putting them together, we can create a microsite that will appeal to our ideal audience.
Color Inspiration:
Logo Creation:
Card Sorting:
We sorted and classified the cards in the form of pictures, and through the results of that process, we were able to create a sitemap.
Site Map :
Our sitemap can help clarify our site’s goals before we start designing or creating content. By deciding exactly what we want from our site and then mapping it out, we can ensure that every part of our website is reinforcing our goals.
User Flow:
Our user flow shows us the path our users take to complete a task. They help us to validate the user journey. We will be able to detect possible pain points and simplify your solution quickly.
User Journey:
Sara’s journey aims to ease the process of buying an occasional bag and lock after how Sara interacts with awareness. By knowing how Sara thinks and what problems they may face as a microsite business we will identify our opportunity and potential success.
Sara wants to buy a new bag for the graduation party. She searched the web trying to find an astonishing bag . “person name “ would be to find a website where she can have inspirations for her outfit, read reviews, and buy with less search and in a short period.
Prototype
We started to create our wireframe in Low, Medium and high fidelity
1- Lo-Fi Wireframe
2- Mid-Fi Wire Frame
3- Hi-Fi Wireframe
ِAfter create the High fidelity wireframe we were able to deliver a website that serves Sara’s needs by giving her inspiration when she visited our web then signing up to buy what she really needs.
Conclusion
We found that many people are interested in purchasing bags from a specialized website for every occasion. And many people are interested in using a specialized website to buy occasions bags.
I gained great experience creating user experiences for personas through this project.
For the next steps, I would love to do more testing with a wider range of people and take more feedback on the project. And improve on it.
