Case study: Designing an e-commerce website for jewelry brand: qilada
Get to know me first
Hi, my name is Nora, and I’m a public administration graduate actually but the past two years have been a rollercoaster ride for me as I joined Fintech and a couple of UX/UI bootcamps (please don’t ask me why). However, I finally joined Misk the Immersive Bootcamp, and this case study is a part of it.
P.s: I know this bootcamp will be my last one.
Anyways, let’s get down to business! In this case study, I will be talking about the second project in Misk, which was also the first group project. The project involved designing a website for a brand.
For those of you reading this, thank you for being here. I would be lucky if you stick around until the end and enjoy my writing..
Project brief
Let’s now give a brief introduction about the project! Qilad is a fine jewelry business that targets females. They offer a wide range of products, including rings, necklaces, bracelets, and more. They also sell collections and sets, as well as jewelry for newborns. Currently, they only sell their products through physical stores or via WhatsApp. Therefore, we were assigned to design a website for them. Please continue reading to learn more!
Role: UX/UI Designer
Team members: Asma Alshehri, Hessah Alkhalid, Mawaddah Alghamdi and Me :)
Project duration: 2 weeks
Design process
Discover: Business Research
Qilad is a high-end fine jewelry business founded in 2012 by Fatima Ficociello. They offer diamond products with detailed information and certification from Gemological Laboratories. Prices range from 1,300 to 25,000 Saudi Riyals, and customers can customize their products.
“Handcrafted jewelers that bring joy” is a quote that caught our eyes. We felt that by mentioning handcrafted and joy together, Qilad wanted to emphasize how special their pieces are and make their clients happy.
“Btw this paragraph above was longer than that but I decided to make it shorter cause I don’t want anyone to get bored :)”
Landscape Diagram
After conducting our business research, We identified seven competitors for the brand and created a landscape diagram to determine the position of the Qilad brand in the market
C&C Competitor analysis
We conducted a competitor analysis to examine their website features as a way to identify best practices for providing the best user experience. Based on our analysis, we developed recommendations for Qilad’s website. For further information, please refer to the C&C Competitor Analysis.
Based on our analysis of the competitor websites, we found that Ofa and Ounass were the best competitors in terms of features.
Do’s and Dont’s
Competitor layout
Once we completed the C&C competitor analysis, we created a layout analysis for the seven competitors.
Although it wasn’t particularly difficult, doing the competitors layout was confusing for us because we had no prior experience and had not yet taken the lesson. This was our first time doing a competitors layout, so we were unsure of where to start but at the end we had a good results.
Define phase
Moving forward to the define phase, We used a method called a ‘survey screener’ to narrow down and specify our target audience, which allowed us to conduct interviews with them and gain a clearer vision moving forward.
Before starting our user research, we had a couple of things in mind that we wanted to know:
- get to know our target audience
- the users shopping habits when it comes to jewelry
- the users pain points when buying jewelry that they want to avoid.
We received 26 responses and were fortunate enough to conduct 9 interviews with participants who met our criteria, which were females who love to shop online and like to buy high-end jewelry.
After gathering all the data, we proceeded to do the affinity mapping, which was a time-consuming step, and doing it on the weekend was particularly annoying for me.
Despite the challenging task of affinity mapping and the difficult weekend I had, we were able to synthesize the data and extract valuable insights. Here’s what we found.
Persona
Finally, now I can present to you our persona, Layla!
Problem statement
Layla is an online shopper who has a passion for high-quality jewelry that reflects her personality, she needs a convenient trustworthy purchasing method to be well-informed about the product the store provides in order to buy herself and loved ones high-end jewelry
Solution
Design an e-commerce website for jewelry store that meets Layla needs and addresses her frustrations. The website should have a modern and professional design that is easy to navigate and provides detailed and accurate information about the products and should be trustworthy.
Feature Prioritizing
Design phase
This phase its where we started to shape the website from the first line to the final result we get !
Card sorting
We conducted card sorting with our target audience using 20 different product pictures from the brand to see how they would categorize them, and we observed some patterns such as Midnight jewelry, Summer vibe jewelry, and Going out. These insights led us to create a sitemap.
Sitemap: Hierarchical navigation
The sitemap was created based on the patterns we observed during the card sorting process.
Then we started picturing the user flow from the start to our finishing point, which is buying from the website (obviously)
Wireframes
Let’s get to the part I like the most, which is wireframes. First, we created sketches (lo-fi) to visualize how our website could look. It’s worth mentioning that the layout wireframe we created earlier helped us in building the Qilada website.
Next, we created the mid-fi wireframe, and this is where we began testing our flow and assessing how easy it is for users to navigate. We’ll discuss this in more detail after posting the hi-fi wireframes, so please be patient.
Mid-fi
Hi-fi
My all-time favorite part is creating the hi-fi wireframes. I have always loved this part because it’s where I can see our hard work come to fruition and feel satisfied. Anyway, enough talking, I will leave you with the screens.
Usability testing
As I mentioned earlier, we tested our wireframes and received great insights from 5 participants. Thanks to them for being a part of this :)
And here where I will leave you with the conclusions
Iteration
In the product page we added the toggle for “this is a gift” to help the user achieve their task faster and without confusion.
In the Cart pop-up we expanded and tried to make it clearer what the options for “this is a gift” includes. Like Wrapping and adding a card.
After the user testing we found out that the Checkout process was a little complicated, some of the feedback we got from the participants are: “It’s not clear whose address i should include, mine or my friend’s,if it’s my friend’s I don’t know her address and that’s a bit problematic”. “The information about the address is too long and some boxes I’m not sure what to write in”.
So we decided to include two tabs to chose from, if they press “My Address” they will input their information, and if they press “My Friend” they will only be required to include their friend’s name and phone number, as well as the buyer’s email and phone number to be contacted if a problem occurs.
The Map Page was the most confusing for most of the users, they will be redirected to this page if they want the item to be delivered to them, and they want to choose their address from the map.
The users didn’t know what button to press and the fact that there was one picture but 3 buttons confused them. We fixed it by reducing it to one button only, that will take them back to the address page to make sure it was inputted correctly.
in the Payment Page Every one expected to press the “apple pay” and to have it direct them to the next page. We modified it by putting the toggle icon beside the options to indicated one is to be selected and that they need to press the “place your order button” to finalize.
Annotation
Deliver phase
The final phase was the delivery phase! Here, we created a clickable prototype, which gave us a headache. I felt like an octopus trying to manage everything!
Future enhancements:
- Conduct more usability testing and add more options to browse the site smoothly.
- Conduct testing on the iterations we made to improve the experience.
- We would also want to polish the existing pages.
- Some features we would like to add are:
1-Arabic version of the website
2-Wishlist
3-Call-to-action button
4-Responsive design
5-Contact the business better, and have better understanding of their business.
Conclusion ( Self reflection )
I learned a lot in the second project in both soft and hard skills, but let me mention self-reflection first and what I gained from it. One thing we could have done better is to specify the questions on the survey screener, such as identifying a better age range for each group and being more specific about the types of jewelry we wanted to include. This led to us only getting 5 interviews who fits our target criteria out of 9. Moreover, the affinity mapping was where things became difficult. We wrote a lot of insights with more than one or two sentences, and it was repetitive. At the end, we were able to get good data from it, but in the future, we won’t fall into this trap again. These are the things I learned from project two, and I’m glad to have experienced them so that I can avoid them next time!
And for ever whos reading till now I just wanna say thank you for reaching out to this point !
