Misk UX project 2: Joon
Continuing with my MISK UX Design Journey, it was time for our second project!
I will say for the second project I was a lot more confident while working, I took the feedback I got from project 1 and incorporated it into project 2.
project 2 was about finding a local business with no online presence and creating an E-commerce website for them.
our team and I started browsing for business and we stumbled upon “Joon” a pet supply store with no website and decided to base our project on it.
so we started doing generative research about pet supplies stores and found that With sales of 4.54 billion dollars and positive sales growth of 2.7%, pet supplies are one of the largest industrial categories in the US.
Its income share increased due to the “pet parenting” movement, in which pet owners began treating their animals as family members and providing them with accessories. ( Roberts, 2022)
Phase 1: Business research
In this phase, we conducted business research on “Joon” where we established their brand identity.
Next, we crafted our Screener, and our goal for the screener was to find users to interview that own a pet or considering getting one that is responsible for buying the pet’s supplies that we can then interview.
After that, we discovered Joon’s competitors and they were: Pet houses, Aleef, Pet Oasis, Arnab Nat, and Pet Needs.
Then did the C&C Analysis on them:
and obtained the following findings :
- Provide a reviews section
- Provide suggested products on the Product page
- Provide availability status
- Categorize supplies by kind of pets
Must have features: Search Bar — Drop-down sorting — Review section — Guest login/account login — Categorize by kind
Nice to have features: Product filtration — Suggested products — Item availability
we also did a C&C based on the page layout:
Findings: Through this methodology, we were able to identify the most common successful patterns that our business competitors are using. We combined the results that we got from here with the insights from our user research to come up with unique page layouts that fulfill the need of our users.
And lastly, for this phase, we did the LEMEr’S Heuristic evaluation where 1= poor and 5= good:
and got the following recommendations :
- Clear and understandable buttons and icons
- Provide buy now feature
- Show availability of products
- Sufficient error management
- Smooth UI
Phase 2: User Research
in this phase we started defining our targeted users’ ad they were people owning a pet or considering getting one and are going to be responsible for buying pet supplies aged 18+ and living in Riyadh
we ended up interviewing 8 people and our interview goals were :
- To know the users’ online experience buying pet supplies online
- To know what features the users expect the website to have
- To know the users’ concerns regarding online pet shopping
- To identify our persona
- Identify our competitors
after collecting our data points we started with the next phase
phase 3: Research Synthesis
we took our interview data points and used affinity mapping to extract our insights!
from our insights, we determined that our persona would be based on Kyla the planner, and started crafting our persona called Nora!
Nora is a 25-year-old woman living in Riyadh, she has a cat called cinnamon.
Nora’s motivations are: 1-Nora loves shopping for pet supplies online on monthly basis, her most purchased pet supply is cat food. 2- She likes looking at the descriptions of the supplies before buying.
Nora’s pain point: Nora’s pain point is that sometimes she needs a specific item for her cat but doesn’t find it online.
From there we formulated our problem statement which was :
Our pet owners have a problem finding pet supplies with clear descriptions when shopping for pet supplies online.
Our solution should deliver a place where customers can know more about their items before purchasing them.
However, we got feedback that it was too specific and needed enhancement so we went ahead and formulated it this way :
Our pet owners have a problem with the lack of information when shopping for pet products online.
Our solution should deliver a place where customers can know more about their items before purchasing them.
Next, we went ahead with explaining the solution.
About the solution: To create an e-commerce store for a pet supply business and provide the necessary and detailed information about the products to ensure the customers what they are receiving
Key features in the solution :
- A detailed product page that includes information about the product as well as expiration date, compatible breeds, and brand name
- A description box that goes further into explaining the product also features a how to use and nutrition facts for the food section
- If an item is not found we added a suggest a product feature
and that concluded our third phase!
Phase 4: Design
To start this phase we formed our user flow :
and after doing the card sorting technique to categorize Joon’s products we did the sitemap :
After that came the most exciting part using Figma!
at first, it was quite confusing but after a bit of practice we got the hang of it and did our Mid-Fid Wireframes :
and annotated our wireframes to look like this:
Phase 5: User Testing & Feedback
during this phase we did remote testing via maze, we tested 5 people to do the following tasks: — Navigate to dry cat food — Choose a product — Add the product to the cart — Go to the cart — Fill your information and complete the purchase
After the testing did the following iterations :
1- changed the language switcher in the header from AR to العربية
2-added a live chat ( which from the feedback realized we shouldn’t have because it's a new feature )
3- Add breadcrumbs to the product page
4- Added a floating overlay that appears after clicking on the cart icon (Simplifies the checkout process)
5- add a “ don’t have an account “on the checkout pop up
6- unify the checkout page to match the style of the cart and shipment and payment layout
7- Changed the word “information” on checkout pages to “Customer information” to make it clear
8- added building number to the customer information
9- added an estimated shipping time
Lastly, we did the high-fidelity prototype showcased in the video!
Final thoughts: I absolutely loved working as a group with Alanoud, Hind, and Mohammed and I am very proud of what we did in our project. I also want to thank the instructors for their valuable feedback!
