Sharabz microsite — ux\ui case study
--
This project would include: Ux research, wireframing,
Team: Noor Khuraidah, Manal AlNasser
Project Time: 2 week sprint
● To design a microsite for a local retailer of your choice.
● The microsite will focus on selling a specialty product category consisting of 75–100 products.
● The design should meet the goals of one of three specific personas, the goals of the business,and the goals of the brand.
Sadah website users are bored from the unbranded plain website interface and struggled in reaching the product easily the main focus to have a smooth enjoyable ordering process to maximize profit and to stands out from the competitors.
in this project we follow the double diamond model where we used a certain methodologies for each phase.
at first we go through the discovering to decide a site to work on, so we choose Sada website that provide users with trend products that holds the Arabic modern style and basically we choose the socks section because it’s the popular product in the website and it has lots of variation and sorts.
CNC
After defining the scope which is a mircosite for socks, we conducted a desk research to look for competrtiors, here is a list of the comptitors we found:
we go to the website and have a first look at it, and we realized a clear diffrences between them regarding to the interface and navigation that’s why we used the poistioning 2.2 frame to compare between them. after that we needed more information about other feature that competitors have that why we do the competitive analysis and the last thing we did in this part is comparing the interfaces of the website and sections in the main meun.
and to summarize the CNC part we used the swot anlaysis to list down all the strength that we have to highlight to customer, and the weakness we have to work on for enhancement and threats and opportunities.
SWOT
to reach out customers and understand their painpoint and gather information from online shoppers to understand their behaviors and problems they face while placing an order. we conducting online survey using google form, and we got total 73 participants.The target people were anyone who order online that is why we did the screener with the survey and we didn’t go along separating them. we set the questions to be ended giving us a structure information we can depend on, and we write them in Arabic so people could easily fill them out.
Affinity map
after conducting the survey we used to do the affinity map to understand the behaviour and common things
from the affinity map we list down the key finding that will help us finding a solution for the problem where they actually summarized in two points Trust and difficult navigation.
Key finding
Business need & User need
once we had the pain points of the user, we wanted to understand the perspective of the business owners too that why we list down the needs of both of them to find the soltion that fit them both
Persona Development
the persona created from the survey feedback and findings, so based on the results we applied that on a persona called Mohammad gathering all the behaviors and pain points from the research, so the persona demonstrates the user goal and the solution must fit him.
Card sorting + Site map
it’s the phase where we had to think how users might use the website and where to go next, in order do that we needed first to do the open card-sorting to see how users might categorize the socks sections, so we print out the pictures of the socks and gave them to users, we used the open card-sorting, we stopped when we found a common pattern that it clarify how users are categorizing the product.
so this is how we set the site map first going through Sadah main page then users can brows shrabz microsite that has sections categorized based on users preferences in the card-sorting, also for the other sections we where looking for a solutions or a certain insights for the purposed microsite we always put the users and their need into considerations, so here is how we thought for it initially.
Make your own sharab or box > Engage user with the process, Customization as a competitive advantage that stands them out.
Sorting on style preferred > Easy reach to the product
Quick access in the footer > Easy navigation.
User flow
for the user flow we think for it in a way it starts from the main website which is sadah until user find the product and last thing is about placing an order.
Wire framing
we start doing the lo-fi to illustrate how the app will appear we did four screens but then we realized that we can move directly to the other phase which is the medium lo-fi
Wire framing testing
for the testing part actually we face some struggles because when we send it to users they didn’t understand why everything is empty without any pictures or text related to a website that they can bought from, we did our best regarding to the time trying to explain and we got some comments:
-Main bar & sizes were too big.
-User feel distracted because of the alignment of the pages.
Enjoy the clickable prototype:
Features:
further improvements:
for next phase we would love to foucs on testing and iterate based on it, to check if we’re really worked on easing the nvaigation properly.
Insights:
for me I enjoy working on this project especially that I worked on the ui, design and marketing part of it which I love the most!
What our colleagues said about our project:
