Case Study: Designing an e-commerce website for a local store brand: qilada
Get to know me
Hello world!
My name is Mawdah Alghamdi and I graduated from Imam Muhammad bin Saud University with a degree in Information Technology. Since graduating, I have had several opportunities associated with UX/UI Field, such as attending the UX/UI bootcamp by Misk, and now I am working on multiple projects and learning a lot! I am very excited to develop my skills and grow in this field.
Thank you for keep reading, enjoy my first article on medium :)!
Brief - The Challenge
After ending the first week with first project that was solo and everything I did was from my point of view with my humble user research also by monitoring with Misk expert, I was proud of what I did and happy with all things I have been learn and done, So with the second week of the course I was expecting lessons and some mornings activities but it turned out it’s a second project! Now I understand what immersive mean by Misk, so I sat and listened attentively, The challenge must be finished in two weeks also should be done in groups my teammates were Nora Almutahar, Asma Alshrie, Hessah Alkhalid, and it’s about chooses a local business that doesn’t have an e-commerce website so it requires to build it from scratch; the difference between the first project and the second one, is that the first was about user research only! now all the focus will be on tow major things: User needs -Business goals
Role: UX/UI designer
Rules
1.The selected business must offer a diverse range of products in 80–100 different categories.
2. The business should not have an online (website or application).
3. The website must direct the user to popular section as every business has.
4. Adhere to the business identity and create a design system based on the brand identity.
5. The design should meet the business goals and your personal goals.
6. The design must adhere to best practices for information architecture and should be tested by actual users.
About The Brand - Qilada
Qilada is a local jewelry store that specializes in offering intriguing stylish, and unique accessories with handcrafted jewelries made by Fatima Ficociello who is originally from Castera region in Italy, what distinguishes the brand is that they add natural gemstones with gold, Currently they only sell their products through physical stores or via WhatsApp. Therefore, we were assigned to design a website for them.
Design Process
I would like to give an overview about this process and why my team and I using it, The Double Diamond is a visual model to understand the process of design. This process model is an excellent tool for making sense of design. It’s also quite useful for communicating some of the thinking behind newer types of design UX design, product design, and service design. These new fields share something in common: they work on problems and solutions.
- Discover: The goal is to immerse yourself in the problem completely through research. we should seek to understand, rather than assume.
- Define: Thee goal is to turn the research data into a conquerable problem. Use the research to define the challenge into a final problem statement.
- Develop: The goal is to generate potential solutions for the defined problem.
- Delivery: The goal is to validate the solutions that work and prepare the design for release into the real world.
Discover: Business Research
During this phase, my group and I endeavored to cultivate empathy for the user by considering every aspect of their experience. We began by conducting user research, which involved using a screener survey to qualify potential participants and ensure that we met our recruitment goals. Then interviewed those who met our recruitment standards and used in this snowball recruiting method it’s all about asking each participant if they know anyone who would also be interested to be researched. Additionally, I conducted a brief interview with the business owner to learn about the brand’s origins and from there started the business research, It was particularly insightful to see how comfortable and welcoming the owner was during this process. All of these efforts were instrumental in enhancing our understanding of the brand’s history and target market.
Landscape Diagram
After conducting our business research, we identified seven competitors for the Qilad brand and generated a landscape diagram which is type and format from conducting competitor and comparison analysis(C&C) called market positioning (Landscape) to ascertain its market position.
C&C Competitor analysis
Subsequently, we initiated a competitive analysis, commonly known as a C&C analysis(Feature Comparison), which allows UX researchers to gain insight into the competition, identify potential areas for improvement, and gain a competitive edge. It is worth noting that while this method provides information about what exists in the market, it does not necessarily explain why it exists. As Nancy Pearcy once said, “Competition is always a good thing. It forces us to do our best,” a quote that I particularly appreciate in relation to this method. This analysis gave us important information that helped us create a UX strategy to improve the user experience and business value of Qilada. We performed a feature competitor analysis for C&C with a focus on website features to identify optimal user experience practices. Our findings from this analysis were used to provide recommendations for improving Qilad’s website. For more details, please refer to the C&C Competitor Analysis report.
After analyzing the websites of our competitors, we determined that Ofa and Ounass stood out as the top competitors in terms of their features.
Do’s and Dont’s
Define Phase
To begin with, we conducted a preliminary investigation on Qilada, followed by a comprehensive evaluation of both direct and indirect competitors. Based on this analysis, we determined which aspects to incorporate and which to avoid, and gave corresponding recommendations.
Before commencing our user research, we had a few objectives in mind:
- To gain an understanding of our target audience
- To learn about users’ shopping habits regarding jewelry
- To identify pain points that users may encounter while purchasing jewelry that they wish to avoid
We received 26 responses and had the opportunity to conduct 9 interviews with participants who met our criteria, which were females who enjoy shopping online and have a preference for high-end jewelry.
After gathering all the data, we proceeded to conduct affinity mapping, which was an iterative process that involved brainstorming and took some time.
Here are the valuable insights we were able to extract after tackling the iterative and challenging task of affinity mapping.
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.
Design Phase
In this phase I got extremely excited about all the ideas that I want to apply in the website and my mind getting distracted from where should I start but with method that I use me and my teammates to feature prioritization which called roadmapping and it’s the process of creating a visual representation of the strategic plan and development timeline for a product evaluating the importance and impact
Card sorting
Following that, my team and I utilized the card sorting technique and a tool called Optimal Workshop it’s a UX platform that permitted us to enhance our website by sharing the link with users and allowing them to group pictures with corresponding labels that they believed were most suitable. Card sorting is a common UX research technique where participants group individual labels written on note cards or, in our case, using Optimal Workshop with users. This technique allowed us to determine how we could categorize our products in a user-friendly manner. Subsequently, we created a diagram of the website’s navigational structure to guide our design process, 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.
Wireframes
The most exciting part is the wireframes, so let’s focus on that. Initially, we came up with low-fidelity sketches to give us an idea of how our website might appear. Subsequently, we developed mid-fidelity wireframes, which allowed us to test the user flow and evaluate the website’s ease of navigation.
Mid-fidelity
High-fidelity
Creating the hi-fi wireframes is something I always look forward to as it’s my absolute where I can see our hard work. This is where I get to witness the fruits of our labor and experience a sense of fulfillment. I’ll share the screens with you now.
Usability testing
Usability testing is one of the most popular UX research methodologies so we apply it in this project we test 5 participants once we done our mid-fidelity the only task assigned for the user was buy a ring! So the common problem that the user was faced on payment page they got lost while we are testing them live! they did not know what option should they choose if it is a gift for a friend and he want to deliver it to his friend house but doesn’t know the location so in the iteration we made the enhancement and make it look much clear
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
Wireframe annotations serve the purpose of providing clear instructions to anyone viewing your wireframes regarding the functionality and purpose of each component on the screen. As the wireframe designer, you include annotations to instruct how each element of the screen should operate. The goal is to ensure that the wireframes are easily understandable to all stakeholders involved in the design process
Deliver Phase
Now that we have completed the double-diamond method, I would like to share a YouTube presentation with you as a concluding remark, Enjoy your Qilada website!
Future enhancements:
Me and the team conduct more usability testing and add more options to browse the site smoothly also 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-Responsive design
Conclusion
A well-conducted UX case study provides valuable insights into the user experience design process. It helps designers and developers to better understand their users, identify pain points, and design solutions that meet their needs. By following a user-centered design approach, businesses can create products and services that are intuitive, efficient, and enjoyable to use. Ultimately, this can lead to increased customer satisfaction, loyalty, and retention, which are essential for the success of any business. I express my gratitude to the Misk instructor for supervising and guiding us, as well as to my amazing colleagues whom I collaborated and navigated through various challenges. Additionally, I’m proud of my own commitment and putting effort in this valuable field.
