Project Type: Personal
Role: UX/UI Designer
Tool: Figma, Adobe XD
In this project, part of the Google UX Design course, I was tasked with designing a responsive website for an art studio, aimed at providing a seamless shopping experience for users seeking painting courses and art supplies. The task was to design a responsive website of shopping experience for an art studio, where users can purchase painting courses and art supplies. The target audience for the website are adults who are interested in learning to paint, as well as parents who want to purchase painting courses for their children. Throughout the project, I focused on addressing specific user needs, ensuring ease of navigation and an intuitive interface.
Websites that sell courses often have cluttered designs, confusing registration and checkout processes, as well as a disconnect between the offline and online experiences. It is important to create a user-focused shopping experience that improves customer satisfaction and encourages repeat visits and purchases.
To create an intuitive and straightforward online platform for purchasing painting courses and art supplies, featuring streamlined navigation and clear, detailed descriptions tailored to both adult learners and parents.
To increase accessibility and visibility of the art studio offerings, while also making it easier for potential customers to purchase products.
Competitve Audit:
In my competitive audit, I explored and analyzed various websites from an educational perspective, focusing on their user experience and design elements to inform the conceptual development of the art studio's website.
Building on the insights gained from the competitive audit, I identified several key pain points that commonly affect users in similar online environments, which I aimed to address in the art studio's website design:
1
Confusing navigation
If the navigation on the website is unclear, users may become frustrated and have difficulty finding the products they are looking for.
2
Lack of reviews
Without access to other customers reviews, users may have trouble making well informed purchases or feel less confident about their choice.
3
Insufficient product information
If course description is not detailed enough, user may have difficulty understanding what chosen course includes, which can lead to disappointment.
4
Hidden or unexpected costs
If users are not aware of the pricing before checkout, they may feel misled and have lack of trust in the website, thus purchase abandonment.
5
Lack of communication
If users are not notified promptly after completing registration for a course, they may feel unsure whether registration was successful and frustrated by the lack of communication from the website.
User Persona
After highlighting the key pain points from the competitive audit, I moved to creating a user persona to better understand and hypothetically represent the needs and behaviours of potential users.
Empathy Map
Following user persona, I created an empathy map to explore the emotional and cognitive aspects of the hypothetical users.
User Journey Map
Continuing with the theoretical exploration of this project, I then created a user journey map. This map visualizes the hypothetical path a user might take when interacting with the art studio's website, from initial interest to potential purchase, helping me to conceptualize key touchpoints and user emotions.
Sitemap
The next step was to create a sitemap for the website. This sitemap, based on user pain points, includes four main sections: the "course page", where users can find information about the available art courses; the "art supplies" page, where users can browse and select art supplies; the "cart page", where users can manage their selected products; and the "about page" that represents the art studio itself.
Digital Wireframes
From the sitemap, I moved on to creating digital wireframes, laying out the basic structure and interface of the website considering identified user needs.
Usability Study
To gather insights and feedback on the digital wireframes, I conducted a usability study, and these were the findings:
1
Cart
During checkout users had two different types of products in cart- course and art supply. Since those two products require entering different contact and shipping information, users were confused by unclear contact and shipping form
2
Navigation
Users were lost between website pages, because there was no indication of where they are on the website.
3
Discovery / Engagement
While discovering a product, users had no option to filter them; also, users were hesitant to make a purchase, since there were no shown reviews, as well as no possibility to write one.
Hi-Fi Prototype
Based on the wireframe prototype and findings from the usability study, I enhanced the design by adding more interactions and features into high-fidelity mockups and developed the visual design for the responsive website.
To resolve checkout confusion from the usability study, I created a pop-up form on the course page for streamlined course registration, while allowing direct cart additions for art supplies.
The "art supplies" page includes breadcrumb navigation feature, in order to help users understand their location within the website, addressing the usability study finding that users felt lost between pages.
To address usability concerns about product discovery and trust, I added filtering option on the "art supplies" page. This helps users to quickly find what they are looking for and read reviews, making shopping more user-friendly and transparent.
The "product pages" have been updated with a simple review filtering, reading and writing feature to increase customer engagement.
Through this individual project focused on designing a shopping experience for an art studio, I gained valuable knowledge in UX design principles and techniques. The project deepened my understanding of user-centered design and emphasized the importance of iterative design based on user feedback. Moving forward, I plan to continue refining my design approach and the structural aspects of website development.
© Sabina. 2023