Throw Clay LA
Re-design the Current Website & Responsive Design
Throw Clay LA is a local pottery studio founded by a potter, John Prescott. Their vision is to offer a vibrant and welcoming neighborhood studio - a creative way to get out and get involved with friends, neighbors, and co-workers.
This project centered on transforming a website through a comprehensive website re-design and implementing responsive design. The primary goal was to optimize the user experience by restructuring the site's layout, improving visual elements, and making it accessible on desktop and mobile.
Overview
UX Researcher
UX Designer
UI Designer
My role(s)
Zoom/Google Meet
Figma/Figjam
Adobe Photoshop CC
Tool(s)
Final Product
Desktop
Mobile
The Opportunity
Enhancements in design aesthetics, navigation structure, and responsive features could elevate the current website's performance.
These enhancements aim to create a more engaging and visually appealing website, making it easier for users to find and access information seamlessly, regardless of their device. By addressing these aspects, we can ensure a more user-friendly and accessible online experience for our visitors.
Reviewing the Current Website and Competitors
The project journey began by conducting a thorough assessment of the current website, identifying areas for improvement. Additionally, a detailed review of competitors' websites offered a broader perspective on the pottery studio industry's digital landscape, helping me understand the competitive dynamics and opportunities for enhancement.
Throw Clay LA
Navigation Includes: FAQ / STUDIO SALE / STUDENT PRACTICE / GIFT CARDS / CLASSES / MEMBERSHIPS / EVENTS
Responsive Design: Yes (Not 100%)
👍 GOOD
Consistent color scheme
Many engaging images
🔨 COULD BE BETTER
Inconsistent font size, weight and color
Inconsistent icon size
Visually overpowering background photo - causing difficulty in reading some text
Confusing buttons
Inconsistent aligning
Lack of full responsiveness / misaligned elements
Competitors: Top-rated Local Pottery Studios
Based on the research findings..
The Key Focus Areas would be:
✔ Improve visual hierarchy & content organization for easier navigation
✔ Well-structured navigation menus to improve information access
✔ Achieve optimal responsiveness for mobile devices
✔ Ensure optimized alignment and utilize white spaces for better readability
I conducted usability tests to gain insights into user experiences and identify feature priorities for enhancement. Users were tasked with completing 3 assignments to evaluate their perceptions of each process and the overall design.
Connecting with Users
The usability tests revealed that users:
💻
Visit the website mainly to check out the offered classes & book a class online
✨
Hope to see some improved visuals on the website that match the studio's aesthetic
📁
Agree that the current website needs to organize the information better
Considering the user expectations, my primary focus will be re-designing the "Courses/Classes" page.
This redesign will incorporate user suggestions and adhere to industry conventions, ensuring alignment with user expectations.
Restructuring: What makes the most sense?
Insights from both research phases highlighted that the current navigation system lacks coherence, making it difficult for users to locate and access certain menus.
Hence, I decided to conduct card sorting with some users to find a solution that makes the most sense.
The current navigation menus lack proper organization and can be challenging to locate due to factors such as the dominant background photo or their presentation within lengthy paragraphs as links.
Current Navigation System
To discover a more user-friendly solution, I engaged in card sorting sessions with several users, employing a set of 16 cards. This process allowed me to regroup certain menus and pinpoint areas that required enhancements for improved clarity.
Card Sorting Result
↓
Confirmed groups (100% agreement rate)
Need Clarification
1. Studio Sale
👉 The Purpose of The Page
Encouraging users to visit their studio to browse/purchase their products
💡 Proposed Solution
Group: "Our Studio"
Considering that the page only contains a promotional description of the sale along with studio location details, it could be more effective to relocate it under the "Our Studio" section, where other studio-related information resides.
Also, I would consolidate this into 1 page with other studio information so users can conveniently access all relevant information.
2. Student Practice
👉 The Purpose of The Page
Information about the practice session that is being offered only for students who enrolled in their 6-week courses.
💡 Proposed Solution
Group: "Classes" > Sub menu “Courses”
Given that practice sessions are exclusively available to students enrolled in 6-week courses, it would make more sense to feature this information within the "Courses" page, situated under the "Classes" menu. This approach ensures that students seeking details about practice sessions can readily find this information in the context of their course-related inquiries.
3. Gift Cards
👉 The Purpose of The Page
For purchasing gift cards. However, gift cards are exclusively applicable to course or class payments and cannot be redeemed to buy products.
💡 Proposed Solution
Group: "Classes" & Change the menu name to “Gift a Class Voucher”
Considering that these gift cards are solely intended for class and course payments, a more appropriate location would be under the "Classes" section as a sub-menu.
Additionally, renaming the menu to "Gift a Class Voucher" rather than "Gift Cards" would provide more clarity for users.
4. FAQ
👉 The Purpose of The Page
Class FAQs & Studio FAQs
💡 Proposed Solution
Group: "Classes" & “Our Studio” (Separate “Class FAQ” & “Studio FAQ”)
To enhance user experience and streamline information access, splitting the FAQ section into two parts - Class FAQs and Studio FAQs - and placing each under the related menu category would make it more convenient for users to find the information they need.
Class FAQs could be located under "Classes," while Studio FAQs would be best situated under "Our Studio."
To initiate the UI redesign, I started by building a mood board, which would serve as the foundation for the color scheme update. This updated palette will guide the redesign of various design elements, including icons, buttons, and more.
Elevating Aesthetics
Soft / Calming / Welcoming
Inspired by the texture of clay
(Current Colors)
→
🎨 Proposed Color Palette
Still kept the calming base colors while introducing some accent colors inspired by elements from the studio
Incorporating the revised color palette, I built wireframes for the course booking process. Here are some highlights of key pages:
Re-designing: High-fi Wireframes
1. Landing Page
- Balancing the layout of the visuals
- Overall organizing
→
✨ Proposed Re-design
2. Course Detail Page
- Consolidating course details
- Summarized bullet points rather than long paragraphs
→
✨ Proposed Re-design
3. Booking/Checkout Page
- Consolidating checkout page (users were required to input their contact information before proceeding to the checkout page)
- Organizing layouts & information placement
→
✨ Proposed Re-design
Upon creating the wireframes, I initiated usability tests with both current and potential users. This allowed me to determine the extent to which the updated design could seize the initial opportunities and evaluate how well the new wireframes aligned with the key areas identified during the research phase.
As a result, I was able to pinpoint a few areas for enhancement, and the following summary outlines how I refined those screens based on valuable user feedback:
Validating with Users
Iteration#1 : Cancellation Policy
Iteration #2: “Courses” Page (Mobile View)
1. Re-sizing the Selected Card
2. Dropdown vs Toggle
3. Placement of the Unselected Card
Final Prototype
Desktop
Mobile
Monitoring and Iteration: Keep a close eye on website analytics to monitor how users interact with the new design. Based on data, make iterative improvements as needed.
Content Updates: Regularly update website content to keep it fresh and relevant.
Next steps
“The Essence of Crafting Responsive Design”
One big lesson from this project was that creating a responsive design is not just about re-sizing the design; it's about making things work smoothly on all kinds of screens. I learned that you need to be very strategic when designing screens for smaller devices as you have a limited amount of space you could utilize. Although it was challenging to design the mobile version for that reason, I actually enjoyed the process as it allowed me to gather constructive feedback from users and fellow designers, making it a valuable learning experience. This hands-on insight has made me appreciate the nuances of responsive design and the importance of a user-focused approach.