UX Case Study: “Talaween Art” E-Commerce Website
In this article, I will be sharing the case study of our team’s design process that we’ve done in order to design an e-commerce website for an existing business called “Talaween Art”, which is a shop that sell paintings and mirrors.
In this project, my team and I used the “Double Diamond” model to design a solution that not only addresses the business needs, but also helps the business achieve their goals. In addition, we aimed to enhance the business’ target users’ shopping experience as we analyzed their common goals and pain points.
Tools: Figma and Miro.
Project duration: 2 weeks.
Design process model: Double Diamond.
In the very first phase, we needed as a team to know more about the business and their customers.
So, we started conducting the business research, specifically, began with browsing their Instagram page. We found out that “Talaween Art” has already more than 280k followers and has two actual stores that are located in Riyadh, Saudi Arabia. “Talaween Art” provides products to young adults who are interested in paintings and decorations (their target customers), and the business’ current goals is to enlarge their customers base and reach broader customers, so “Talaween Art” need to utilize an e-commerce website to allow customers from outside Riyadh to buy their products and, also, start delivering across Saudi Arabia.
In addition, we conducted a competitive analysis to understand the competitors, identify opportunities, and find ways to make our business stands out, the analysis had been conducted only on direct competitors since the time was short. Hence, other competitors lack on the filtering algorithm and don’t have many options when it comes to payment methods. So, we were convinced that we need to implement a smarter filter and provide many payments methods to enhance our customers experience.
After identifying the business needs and goals, it was the time to gather more data about our business’ target customers, so, we started by crafting questions to understand the customers’ motivations, actual pain points, and needs in terms of purchasing paintings, not to mention that we also wanted to identify the purchasing’ process.
Once we polished our questions, we started by distributing the surveys to get general information about our users, we had 32 participants and 15 of them were qualified to be involved in our users interviews.
As a result of the user research, we designed an affinity mapping to categorize the users responses. So, we found out the following findings:
- Paintings have affect customers’ mood, and customers want to feel happy, motivated, and inspired when looking at paintings.
- Customers usually buy paintings from furniture stores either online or offline, since paintings stores (galleries) are scarce.
- After customers realize their need for a painting, they look for a furniture store that sells suitable paintings.
- Most customers do not ask for an opinion before purchasing a wall painting, however, if they want to ask, they ask their partners or families members.
- When customers feel bored of their old paintings, they tend to renew their old paintings with new ones.
- Customers enjoy shopping for paintings, but sometimes feel lost and confused while looking for an ideal painting.
- Customers would usually pay less than 800 SR for a painting, however, if it has a great quality, they wouldn’t mind spend over a 1000 SR.
- Painting’s price and size are main factors of the customers’ purchasing decision.
After having a clear vision of our customers’ motivations, needs, and goals, we defined the following problem statement:
“People who are interested in paintings need to find affordable and suitable paintings in order to decorate their living spaces.”
Then, it was the time to design our persona “Khawla”:
Khawla is a 28-year-old, a mother works as high-school teacher, and she is a family oriented person and lives with her husband, two kids, and pet. In general, she likes art, but when it comes to her favorite paintings’ style, she is in love with abstract paintings. Lately, she and her family moved to a new apartment with many walls to be decorated, so she wants to decorate it with joyful and inspiring paintings.
Last step of the define stage was to create the following Venn diagram in order to find the sweet spot between our business’ and customers’ goals.
This was the most interesting stage since we began developing our solution. My team and I started with a brainstorming session and writing down all potential features for our solution, from ridiculous features to more intelligent ones. Hence, we needed to prioritize them based on two factors; impact and effort. So, we prioritized the features using a 2x2 matrix as follow:
Also, we drew our user flow of purchasing a painting that can be seen on the following flowchart:
Then, we started the process of card sorting with the help of our customers to categorize the business’ products. Based on the responses, we designed the site map of our solution to include to primary categories of our business’ products; paintings and mirrors, with multiple sub-categories for each one of them.
After that, we started designing the wireframe. First, we sketched our very first draft “low-fidelity wireframe” of our e-commerce website as below:
Then, we took our sketch to the next level “med-fidelity wireframe” to a better visualizing of the solution:
As the progress of our develop stage, we designed a high-fidelity wireframe to start the usability testing process.
After designing the high-fidelity wireframe, it was the time to test our solution. So, we prototyped our wireframe and conducted a usability testing on it, we had five users who were testing it under our team’s observation. Therefore, all five users had provided really valuable feedbacks, which enlightened us to improve our design. Couple of things needed to be enhance such as the size of the “welcome image” on the home page; so user can notice it is a scrollable page, and the size and color of “add to cart” button.
For the last stage “deliver”, we prepared our design to be handed over to our friends “the developers” by annotated our design and recorded a video of the design’s prototyping. Samples of the annotated design and the video can be found below:
The next step is to iterate the usability testing with different users in order to continuously improve our solution, also, start implement more advanced features such as utilizing the Artificial Intelligence to allow the user to see the paintings in the user’s environment, integrating a loyalty program to attract more traction, and implementing a built-in live chat to faster and a better communication between the customers and business.
It was an incredible experience working with a team consist of talented people who have different background and expertise, we had to work on this project with really tide time constraint, so we had to work in an organized and efficient system, not to mention that we were communicating effectively to achieve our ultimate goal. In addition, I learn by working on this project to follow a new design process model, the Double Diamond.
