Case Study: A website design for a DIY crafts shop: Ibra & Kheit
This is the story of my second project with MISK Skills. This project challenges us to design a website for a local retailer/store of our choice.
Me and my team chose a DIY Crafts shop: a beloved destination/sanctuary for a whole lot of people of all ages!
This DIY shop is called Ibra & Kheit “Needle & Thread” Located in Alahsa City, KSA.🧶✂️
DIY shops are loved and visited by so many people with hobbies, personal projects, businesses…etc. Although theses shops are widely popular, and growing in popularity, in Saudi Arabia, they are not digitally invested in, yet. We wanted to shed the light on this particular business and attempt to give it an e-commerce entity.
DISCOVER & DEFINE:
Research:
Business and User:
The DIY Crafts shop has a lot of regular customers who visit the store 2–3 times per month on average. Their visits are planned; they mostly get what they need for their project and leave immediately. So, we can understand one thing or two from the customers buying habit, such as they will probably appreciate a well-arranged place.
The growing amount of customers calls for a convenient solution.
In Saudi Arabia, there isn’t much of a competition in this particular field of the market in the digital aspect.
At first, we made screeners and handed them to 14 candidates to identify our target users out of them and gather in-depth qualitative data.
From the screener, we knew that 4 of them are not valid target users, and thus we’re going to carry the contextual interviews with remaining 10.
This information is necessary for UX researching and it helps us generate the affinity mapping and build our initial data base.
From the affinity mapping, we came with the following insights:
And from that we became more connected to our persona 🔎📖
Here is the definition card of Kayla (aka: the early bird)
So, What is the problem?
The problems our DIY shop customer faces are:
— she has a hard time finding products of high quality.
-she has a difficulty at finding varieties of items and prices in one place
— she hates cluttered organization and unclear labeling
— she wants to know other people’s reviews on the item before buying
Now, we are able to understand the users problems, motivations, and goals.
Our solution should deliver an organized way to exhibit the products in terms of crafts.
Let’s take a look at the market:🔍
Business Analysis:
We selected 4 possible competitors: House of needle, ZFY Store, Alwasel, and MUF Store. We ran our tests on them to analyze and better define where we stand, and where we want to be. We observed the features they used and studied them in terms of impact and error.
🕯️ C&C insights regarding features, design approach and opportunities:
1- In terms of organization of the layout and categorization of elements, the simpler and more straight forward is better because it leads to smother navigation.
2- The homepage headlines have to be distinct from any other item on the page.
3- Linking the social media accounts, email address and WhatsApp number, shows a focus on customer support
4- Investing in the theme and identity of the business takes it to a higher level.
5- These points regarding Wishlist are really appreciated: Clarity of positioning the Wishlist icon, how to view the items, having the option of adding items which are out of stock.
6- The freedom to continue purchasing without having to register “as a guest” facilitates the process of buying.
7- In the product page, it is important to have the following: detailed description, Quantity, Suggestions of other products and ratings and reviews.
8- The “sort & filter” and advanced search are very appreciated by the customers.
9- Clear Return & Refund policies are needed.
LEMER’s Heuristics Evaluation:
Based on the previous evaluation, we noted these recommendations to our design:
- We should make the website easy to navigate with pleasant interface.
- Users have to be able to complete their tasks with the minimum amount of clicks by making the headlines and divisions of the categories clear.
- We must minimize the errors and ensure that the user know what to do next if he/she fails completing a task.
- The process of purchasing has to be simple, so the costumers keep on revisiting the website.
Strengths, Weaknesses, Opportunities, and Threats (SWOT):
Layout Analysis and Comparison:
Let’s take a look at our competitors’ Layouts we’ve extracted from their websites.
A clear visualization of all the elements in each page results in easy navigation of the website and better overall functionality. We realized that Alwasel store is our best competitor.
Then, we prioritized the key features using 2*2 Matrix
Features which fell into the High impact * Low effort sector are the ones we should prioritize.
Now, we are able to state our solution that should meet both the business and user needs.
DESIGN & DELIVER:
Information Architecture:
Organizing, Structuring, and Labeling of content.
Designing Phase:
User flow explains the journey of the users from the start to accomplishment of their task including all the steps within.
The site map shows the high structure of a website. It specifies the primary navigation labels and the subcategories that go under each headline. We labeled it based on crafts.
Sketching, Wireframing & Mockups:
At first, a basic concept drawn on paper to gain perspective and then it keeps on slightly developing to become an interactive high-fidelity prototype.
We wanted to keep the design as simple as possible. The search bar is visible, the primary navigation is minimum, emphasized, and easy to find, the components of the page are divided on good measure, and the footer has all the important hyperlinks. We implied the principles of design to the visual representation which are: contrast, repetition, alignment, and proximity.
Annotations:
Here are some samples of our notes to the developers to ensure they understand how we want/expect certain things to work.
High-Fidelity Prototype
Usability Testing:
Remote testing was conducted. I gave my user a goal; to buy a “Chinese Cup Embroidery Pattern” and observed how she accomplished the task.
User Feedback: 🧷
1. The users got confused when using the “add and remove” buttons in the item card, so we simplified the card using a cart icon.
2. The users asked for a notification banner after a successful buying process is completed with the order number to track the shipment if needed.
3. The users commented about some fields, icons, and buttons colors, because all of them were in gray, so, we added color to make the CTA buttons more distinguished.
Prototype Video:
, , , , , , ,
Personal Reflection:
The work and intensive effort me and my team put for this project taught me several things. The things I appreciate the most are: to begin with, I learnt to value team-work even more. And to not be embarrassed of the skills I’m lacking, but rather contribute with what I excel at, and learn from others as much as I can. Next, time and task management; especially, when you have your hands-full and have only a very limited time to finalize everything. Time management eases the stress of the deadline, and task management assigns bits of work to everyone. Finally, failing is the result of trying. It’s OK to make mistakes because then learning happens.
, , , , , , ,
Amazing Teammates: Yousef Alsalem, Rawan Alasmi, anwar al-ahmadi
Tools:
Mural , Figma
, , , , , , ,
References:
1- https://www.instagram.com/needlethread/?utm_medium=copy_link
