Case study: A UX journey from Instagram to e-commerce
As a part of the UX Immersive Course by MISK, our goal was to design an online shopping platform for Alanouds’ Art Gallery’s customers that’s easy to use. In this case study, we’ll walk you through our design journey, from the first research steps to the final design, and demonstrate how we crafted an e-commerce website that mirrors Alanouds’ Art Gallery’s identity and principles.
Disclaimer: This UX design project was conducted as part of a student project and is not associated with Alanouds’ Art Gallery store or any other business.
Project duration: Two weeks
Project type: Group project
Role: Involved in all of the processes
Teammates: Maissan | مَيسان, Sarah Althowebi, Fawaz Alghailan, Ahmed Alharbi
Tools: Figma, FigJam, Canva, Google Forms.
Project overview
Problem | Building Trust
Alanoud Art Gallery store wants to expand its online customer base and increase revenues, but building trust is a significant obstacle. In a competitive market, establishing trust with potential customers for a new online art store can be quite challenging.
Solution | Transparency and Openness
To address this challenge, Alanoud Art Gallery store should focus on being transparent and open in all aspects of its art offerings, services, and policies. This dedication to transparency will help build trust among potential customers and set the stage for a successful online presence.
Design Process | Double Diamond
Discover
Exploring Excellence: A Journey through @alanoudsa_artist on Instagram Introducing @alanoudsa_artist, a digital art gallery on Instagram. This artistic haven specializes in digital paintings, offering a diverse collection of digital art since 2018. With a clear focus on high-quality execution, this gallery transforms digital drawings into tangible, unique artworks. Their mission is to lead in the field of digital visual arts and contribute to the advancement of digital and visual arts in Saudi Arabia, aligning with Vision 2030. The business goal is to expand its customer base and increase online revenues. In this UX case study, we will explore how @alanoudsa_artist’s online presence on Instagram can be optimized to improve the user experience and drive business growth.
Business Research
In this project, we conducted a comprehensive business analysis to gain valuable insights into the digital art business. Our objective was to identify strengths, weaknesses, and market opportunities for enhancing user experiences. Our methodology included an extensive analysis of direct and indirect competitors:
Direct Competitors: We evaluated local players such as Lowha, Marktna, Markat.com, and Fame, alongside global giants like The Artling and Saatchi Art.
Indirect Competitors: Our analysis extended to local e-commerce platforms like Otta and global brands such as Namshi and Ounass.
This research empowered us to categorize these competitors, providing a foundation for crafting a strategy to elevate @alanoudsa_artist’s presence and deliver an exceptional digital art experience.
C&C Analysis
Through this analysis, we identified areas for improvement and growth opportunities, helping Alanouds’ Art Gallery store stand out from its competitors.
User Research | Screener survey
We conducted a screener survey to carefully select participants experienced in online shopping. This survey included inquiries about age, gender, online shopping habits, and familiarity with concept stores. Our aim was to identify individuals likely to offer valuable insights and feedback on the e-commerce website design. To ensure relevance, we included an eliminative question to confirm whether participants engage in online shopping.
User interviews
In this project, we conducted remote interviews with 15 participants who met our screening criteria. These interviews aimed to understand users’ online shopping behavior, uncover pain points, and identify opportunities for improving the e-commerce experience at Alanouds’ Art Gallery store.
During the interviews, we asked participants focused questions, including their interests and inspirations, art preferences, digital art purchasing habits, online search methods for digital paintings, views on buying art online, preferences for customizable prints, challenges faced during online art purchases, and their preferred e-commerce platforms for art.
These interviews yielded valuable insights that guided our UX design process for Alanouds’ Art Gallery store.
Define
Affinity mapping
To synthesize the insights gathered from user interviews, we engaged in an affinity mapping process, allowing us to identify interrelated themes within the data. Among these themes, we identified five key overarching categories that encapsulate users’ priorities.
Users expressed a strong appreciation for the artist’s work and sought ways to connect with it personally. The significance of an effective and user-friendly website interface emerged as a prominent theme, emphasizing the need for a seamless shopping experience. Detailed product information was highlighted as a critical factor influencing users’ decision-making processes, underscoring the importance of an informative shopping journey.
Users consistently expressed a desire for customization options, including choices related to sizing, framing, and materials. Additionally, a recurring preference among users was for diverse payment options, reflecting their inclination towards flexibility in completing their purchases.
These five overarching categories serve as valuable guides for our efforts to enhance the e-commerce experience at Alanouds’ Art Gallery store.
Persona
Meet Osama
Problem Statement
Osama, an interior designer, seeks an improved online art buying experience. His current challenges include limited payment options, extended search times for the right artwork, and difficulties with customization. Osama dislikes the journey of buying digital paintings on social media, finding it time-consuming, difficult to pay for, and daunting. He wants to make it possible to buy art online by enhancing consumer confidence in the legitimacy of the artist and streamlining the payment procedure.
Solution
To address Osama’s needs, we propose the development of a user-centric e-commerce platform tailored to art enthusiasts. This platform will feature a secure and flexible checkout process, detailed artwork information, streamlined customization options, and responsive customer service. Our goal is to simplify Osama’s online art shopping experience, ensuring security, efficiency, and personalization, making it easier and more enjoyable to buy digital paintings from Alanoud Artist’s online store.
Design
Hybrid (User Flow + Wireframe)
We created a hybrid user flow and wireframe to illustrate the user’s journey when buying a digital painting from Alanoud Artist’s online store. It begins with users visiting the homepage, searching for artwork, selecting a product, reviewing details, and proceeding to checkout. Users are then prompted to sign in or create an account before finalizing their order with payment.
Site Map
The site map for Alanoud Art Gallery Store was developed by gathering user feedback and product preferences. Initially, we compiled a list of preferred products suggested by users. However, these results were not robust enough to ensure optimal usability. To enhance the website’s user experience, we introduced new categories based on insights gained from competitor analysis.
Sketch
In the sketching phase, we initiated the process by generating a multitude of design concepts through brainstorming sessions, employing techniques like the “crazy 8” method. This method allowed us to explore a wide range of creative ideas rapidly, enabling us to craft a more refined and innovative website design.
Wireframes
In the wireframing phase, we embarked on a collaborative and creative journey, applying our problem-solving skills. We crafted several iterations for each page, all while incorporating the solutions we had devised and the features we identified during our analysis of competitors’ offerings. This process was a crucial step in shaping the user interface with both professionalism and simplicity.
Usability Testing
In the usability testing phase, we engaged four users to evaluate our prototype, which yielded valuable insights for refinement. Notably, users provided feedback that guided improvements:
- On the Art Gallery page, we learned that the “Add to Cart” button’s behavior needed clarification.
- During checkout, users found the “Checkout” button’s visibility lacking clarity.
- Feedback highlighted that the payment pop-up confirmation required enhanced clarity.
- We incorporated minor UI modifications based on user feedback.
By conducting user testing with the specific task of purchasing a painting within a budget for a horse-loving client, we fine-tuned our design to create a more user-friendly and seamless experience.
Deliver
High-Fidelity Prototype
The final stage of our UX design project for Alanoud Art Gallery store involved the development of high-fidelity mockups. These mockups were meticulously crafted, building upon our wireframes and integrating valuable insights gathered from user testing sessions.
Reflection
In our future plans for Alanoud Art Gallery Store, we aim to enhance the website further. This involves conducting more user testing to gather feedback, offering personalization options for unique paintings, improving the search function, and introducing a special gift section. We’re committed to continuous improvement and addressing user needs.
Looking back at our UX design project, we’re proud of the user-centered approach we employed, guided by feedback from instructors and user testing. Given more time, we’d conduct a second round of usability testing and explore additional design solutions.
We extend our thanks to our instructors, Rahaf Abunijem and Nouf alghamdi, for their valuable support. Your guidance was instrumental in creating a user-centered design.
Thank you for reading my case study. Your feedback is welcome 🤍
