Sacha Raps
Redesign an artist's website for responsive design, ensuring a user-friendly shopping experience that reflects their brand.
Role:
Product Designer
Duration: 80 Hours
Tools:
Figma, FigJam
Overview
Sacha Raps is an emerging artist based in Brooklyn, NY. When launching her business in 2020, to save money she designed and built her website with her partner. Three years later her business is continuing to grow and she recognized the need to improve her existing website to better meet customer needs. Through UX research and UI design the website has been redesigned to better showcase her artwork and products in a visually appealing and user-centric manner, whilst streamlining the purchasing and contact process.
Website Key Screens:
The original website faced challenges related to navigation, layout, oversized images, and usability concerns, which hindered not only the showcasing of Sacha's stunning artwork but also failed to provide an optimal experience for potential buyers and clients.
Home Page
The original homepage of Sacha's website featured just two routes for the user, "Shop" or "Works," without providing an introduction to the artist or offering users the opportunity to explore and discover more about the website. An additional observation is that the shopping cart page appears overly large, and for desktop users, the menu is represented solely by a hamburger icon.
Shop Page
On the shop page, the product images dominate the screen, necessitating users to scroll excessively to access product details. Furthermore, it's worth mentioning that the navigation bar changes entirely from the home page, which can cause confusion for the user.
Product Page
On the product page, the Call to Action lacks visual prominence, and a "back" button would be a more user-friendly addition than the existing "X" button. Furthermore, making the "only a few left" message stand out with a different color would enhance its noticeability and urgency.
The Challenge
Effectively align UX research and UI elements to create a cohesive and intuitive design that meets the needs and expectations of the user whilst reflecting Sacha’s artistic style and brand identity.
The Solution
A conceptual responsive website was designed, along with prototypes that align with the findings of UX research and UI design principles. This approach ensures enhanced usability and user experience, benefiting both Sacha's business and the website users. By considering user needs and preferences, the redesign aims to improve engagement, satisfaction, and ultimately drive business growth for Sacha.
The Design Process
Research
Research Goal:
Gather insights and understand the needs, preferences, and expectations of the target audience, whilst also gain an understanding of how users engage, navigate and their overall experience with the website.
Research Methods:
User interview: To ask open-ended questions and gain insight into the users preferences, experiences and expectations when interacting with a website.
Usability test: Participants were asked to complete two tasks on Sacha’s current website:
Find a product and navigate the purchase process to the payment section
Browse her artwork and navigate how to contact Sacha directly through the website
User Interviews
Linocut by Sacha Raps
For this study, interviews were conducted with five individuals who met the criteria of:
Target Audience: Individuals who purchase handmade products online
Non-target Audience: Individuals that do not engage with e-commerce sites that sell artwork to gain insight from different perspectives.
Key Findings
Ideal browsing experience:
Products categorized
Grid view of products
Larger individual image view for artwork
Easy way to contact the business
Simple navigation
Clear and spacious visual design
Impressions of Sacha’s website:
1. Brand Representation:
The logo and images effectively represent the artist and their work, creating a positive impression among users.
2. Layout:
Users found the website to be confusing and cluttered in terms of layout and organization, with product images too large.
3. User tasks:
Users noted that important tasks, such as contacting the artist, were not readily available on the website and found it to be frustrating.
4. Shop & Artwork Page:
The layout of the Shop section and Works page appeared cluttered which distracted the user from the images, some users said it felt visual overloading. The images on the Shop home page were large and took up the screen, limiting the user from being able to see the product and its details on the same screen without scrolling.
5. Navigation:
Users observed that the navigation bar completed changed when transitioning to the Shop page, causing confusion and disrupting the flow of navigation.
Affinity Map
Key Takeaways
Layout: Users found issues with the current layout. In the shop page the images were so large they took up the screen which hindered the user’s browsing experience. On the artwork section the images were spaced close together which didn’t allow for the user to view each piece individually and to take in the artwork.
Wants & Needs: User’s emphasized the desire for easy navigation and browsing, this includes products categorized, with an easy to view layout such as a grid format. They stressed the importance of being able to directly contact the artist on the website, which they were unable to do during their tasks.
Design Challenge
How might we facilitate meaningful connections and interactions between the artist and users, creating a sense of community and fostering a supportive creative environment?
User Persona
Based on the UX research two user personas were developed.
Linda, 48, Interior Designer
Linda as an Interior Designer is looking for a stained glass artist for a project and is potentially wanting to hire Sacha.
Matt loves supporting local artists and has a keen eye for design, he is always on the search for unique products to decorate his home.
Matt, 30, Musician
Site Structure
Sitemap
The sitemap was developed based on user interviews and client meetings with Sacha. Additional pages were created in the Contact section so the user will now be able to directly contact Sacha through the website.
Task Flow
Task flow for “Purchasing a Product” was developed to ensure a smooth and intuitive user experience while completing the specific task on the website.
User Flow
I created the user flows based on what was deemed the most crucial aspects of the user experience discovered during UX research:
Purchase an item
Contact Sacha directly through the website
From UX to UI
UI Kit
Moodboard
In the process of developing a responsive website for Sacha, creating a moodboard that seamlessly aligned with her existing brand was instrumental in ensuring a consistent and visually engaging online experience for her audience.
UI Kit
In designing the UI kit, the primary focus was to maintain Sacha's strong brand identity and vision, which is rooted in creativity, craft, exploration, and eccentricity. As Sacha had key elements already developed such as the logo, focus was placed on creating effective components, enhancing website navigation, and implementing design choices that seamlessly complemented the existing brand.
By striking a balance between preserving the brand's core values and improving the user experience, I aimed to create a website that resonated more effectively with both existing and potential customers while providing more cohesive components that highlighted Sacha's artwork and products, giving them space to be the focal point.
Low Fidelity Wireframes
Drawing from the findings of the UX research, a key issue, overcrowding of the website was addressed. A related issue was on the shop page, where the large images overwhelmed the user, whilst the artwork page lacked sufficient white space to appreciate each piece individually. By incorporating these insights from the research into the initial design phase, I aimed to lay a strong foundation for creating an improved user experience.
Desktop Screens
Mobile Screens
High Fidelity Wireframes
In the development of the high-fidelity wireframes, I wanted to recognize Sacha's exceptional photography of her artwork, therefore my goal was to ensure that there was enough breathing room for the users to fully immerse themselves in each image without feeling overwhelmed by an excessive visual load. Throughout the design process, I strived to maintain the playful and eccentric nature of Sacha's brand, toning down the visual load of the website so the user’s focus was naturally pulled to the imagery whilst maintaining accessibility and a user-friendly experience.
Key Screens
Purchasing a Product Flow
Mobile screens:
In developing the high-fidelity wireframes, particular attention was given to the mobile screens to ensure a seamless responsive experience across different devices. The challenge was to maintain the visual impact and functionality of the desktop version while optimizing the layout for smaller screens. By employing responsive design principles, I aimed to create mobile screens that adapt fluidly to different screen sizes, ensuring that Sacha's artwork and products remain visually engaging and accessible on mobile devices.
Usability Testing
Testing Goals:
Evaluate the efficiency and learnability for users to accomplish basic tasks
Identify user pain points and errors
Gain an understanding of user behavior
Increase usability and design of wirefames
Participants:
Five participants that met the criteria of having an interest in buying handmade goods
Methodology
Conduct usability test where users interact with a Figma prototype to complete a task. Testing was done in person or remotely
Creating a usability test plan:
Focusing on the what the business deemed as the main purpose for the site, two tasks were created for the usability test:
Purchase an item
Contact Sacha through the website
Key Findings
Task Completion: 5/5 participants completed both tasks
All of the participants were able to complete the tasks in a timely fashion and were satisfied with their experience.
There were no high severity issues, however some low level issues/suggestions came up that can be addressed.
The prototypes were described as intuitive, easy to use, smooth, CTAs were placed and designed as you would normally expect to find on a website, easy to follow.
Main priorities for iterations based on user feedback:
One participant found the text was too bold on the home page
One user thought there should be more options in the Sort component
One user thought the logo was too small on the navigation bar
Iterations:
In response to user feedback, I instigated slight redesigns with the aim of enhancing the overall user experience.
Iteration: Alternate logo
A user commented that the logo was hard to read and see what it was. Based on the feedback I opted for the text only logo as it was more legible. I also changed the hero image to be smaller to show the content below which would guide the user to scroll down.
Iteration: Additional Sorting Options
One user suggested that it would be beneficial to have more options in the Sort component. Sorting by Alphabet was added.
Iteration: Bold text
One user felt the text was too bold in this section. The boldness was therefore reduced to create a more balanced visual hierarchy and improve readability.
Final Prototype
The final prototype of the first aid feature aims to offer clear instructions, engaging illustrations, and a streamlined user experience, promoting safety and preparedness during outdoor activities.
Lessons Learned
Through this project of redesigning a responsive website for Sacha, I learned the importance of user-centric design. Through comprehensive research and usability testing, I gained insights into user needs, preferences, and pain points. This informed the creation of an intuitive and responsive user interface that adapts seamlessly across different devices.
This project highlighted the value of integrating UX research, responsive design, and usability testing to develop impactful digital solutions.