I conducted a case study of responsive web design with a local ceramics studio, called Muddy’s Studio, that I took a four-week ceramics beginner class at during 2022. After my experience with interacting with the studio’s difficult sign-up process, I felt that this studio’s website could use a refresh to encourage more novice potters to visit and learn the craft of ceramics.
As the sole UX/UI designer and UX researcher on this responsive web design project, I worked on the initial research plan to the final handoff.
1. Understand the user experience when they look for classes and memberships at ceramics studios
2. Present Muddy Studio’s current website to users and conduct a semi-usability test to understand their first impressions with the current website and flow
3. Understand what pain points that users experience when using the Muddy’s Studio website and how they can be addressed
4. Identify what different target users want to see when they use the website
What do users look for when they are searching for a studio to take a ceramic class/course?
What do users expect to find on websites that having booking services?
How do users make a decision when they are browsing online for services/courses/products?
What are improvements that can be made to Muddy’s Studio’s website following usability testing with their current site?
Assumptions were made based on a best guess of the potential user group in order to ideate the scope of this app design.
• Users who are looking for a ceramics studio also prioritize visuals along with class information
• Users who are looking for a ceramics studio
Purpose: Gather qualitative data on potential interviewees’ experiences with ceramics courses and signing up for one
Participants: 16 participants
Mode: Google Forms
I conducted 45-minute user interviews with 6 participants, who have taken a ceramics course before. The purpose of these interviews was to understand the user experience with looking for a class and see what draws them to selecting a particular studio over another. Additionally, I conducted a semi-usability test with the current Muddy's Studio website and Mud Hen Clay and Art's website to compare the sites, assess the first impressions, and gather feedback. I alsotested the sign-up process that Muddy's Studio's website uses, which is a Google Form integration that lacks sign-up confirmation and is difficult to understand.
What I found was that users agreed that the current website feels a bit outdated and lacks strong visuals and appeal compared to that of Mud Hen Clay and Art's website. They also felt that the list of classes and Google Form sign-up were confusing on the Muddy's Studio website. To organize the main insights from user interviews, I conducted affinity mapping as my next step.
Users find the current Muddy’s Studio website to be overwhelmed with text, which makes it difficult to parse through the information
Users are captivated with visuals on a studio's website
Users find outdated design, information, and low-resolution images to be off-putting on the Muddy's Studio website
Users like a visual aspect of seeing upcoming classes in a calendar format on Mud Hen Clay and Art's website
Users typically prioritize information on price of classes and location of studio
I developed two personas named Serra and Jazmin to represent the users that I spoke to during my user interviews. Serra represents the beginner potter that wants to enhance her ceramic skills and eventually get a membership, and Jazmin represents the user who wants to take one or two classes for fun.
Serra and Jazmin expresses the same user needs and pain points as shared by those said users.
After identifying the main user problem, I wrote out Point of View Statements that helped create How Might We Questions in order to open up the opportunities of how to address user pain points.
💡 I’d like to explore ways to help people interested in ceramics to easily digest the information on Muddy’s Studio website because they experience information overload upon entering the site.
❓ How might we organize the information about Muddy’s Studio to be more easily and quickly understood?
💡 I’d like to explore ways to help people interested in ceramics to easily sign up for courses or membership on the Muddy’s Studio website because they find the current sign-up process to be ineffective and confusing in comparison to that of other competitors.
❓ How might we eliminate confusion with signing up for classes on Muddy’s Studio’s website? How might we make the process more intuitive?
💡 I’d like to explore ways to help people interested in ceramics to see more visuals of the Muddy’s studio space and what classes are like because they find that images help them get an idea of what the experience would be like.
❓ How might we provide access to physical therapy treatment on a mobile platform?
As per user feedback on the Muddy's Studio website and user interview insights, a rebrand was necessary to refresh the overall look and feel of the website to convey the mission and goals of the studio.
The current website is lacking in visual and informational hierarchy, high-quality resolution images, and organization of ceramics classes information. Below, you can see what some of the pages of the current Muddy's Studio website looks like.
To understand user expectations of where features would be located, I conducted a hybrid card sort involving 10 participants. I had given 6 predetermined groups for participants to organize the features into and allowed users to create their own categories that felt more logical to them. The results of this card sort indicated that users mostly agreed on similar groupings of features, which led to the creation of the site map in the next step.
As per the results in the card sort, the site map was structured based off of those responses. The main pages that would be in the primary navigation include Classes, Groups and Parties, Home Page, Membership, About Muddy’s, and Contact Page. These were all included in the original website and just needed reorganization within those pages. As seen in the site map below, there are subpages that better adhere to informational hierarchy and to user expectations.
Once the site map was developed, I created user and task flows for the Muddy’s Studio website that would be more interactive and match user expectations of what a ceramics studio website should do. The main flows that I created were signing up for an adult class and signing up for a membership. The original Muddy’s Studio website directed the user to a Google Form integration within the website that was not well-constructed and provided no confirmation of their sign-up; the website neither accepted payment online, which could cause the studio many missed opportunities of ensuring students attending from week one.
In the new user and task flows for both of these flows, the user would be able to browse the studio’s offered classes and membership types and then directly sign up for the class or membership within the website. This would ensure seamlessness within the user experience. Furthermore, the user would also receive a confirmation once they signed up through a confirmation page and a confirmation email; the Muddy’s Studio website initially did not provide this and left room for ambiguity in what the user submitted for their class sign-up.
To ensure that I was conveying informational and visual hierarchy, I worked to develop low-fidelity wireframes that would direct the user to where they can find the information they are looking for. Furthermore, I aimed to excite users with more visuals to balance the necessary class and studio information.
Mid-fidelity wireframes were created following low-fidelity wireframes. These wireframes developed through rounds of feedback from my mentor and peers in my DesignLab cohort, in order to create a more seamless website experience. The images below discuss my design decisions at this point of the project.
Usability testing on the prototype of Muddy’s Studio’s redesign was conducted to measure the functionality, usefulness, and first impressions of the product. The main objectives for testing included testing the flows of signing up for a class and membership, in addition to contacting Muddy's Studio regarding a question.
The unmoderated usability testing was useful to see heat maps in where users clicked the most to complete the tasks. Overall, users were able to complete all the tasks successfully, with the first two tasks having indirect success and the last task having more direct success.
After usability testing, I conducted a feedback prioritization matrix to organize the insights that were learned from usability testing. The insights showed that the rebranding is fitting and appealing for a ceramics studio business. Furthermore, users found the user flows to be straightforward. However, there was some confusion that lay with the use of the calendar; users are unsure of whether they can sign up through the calendar or not. Lastly, multiple users noted the small detail of changing the color of text when the text boxes are filled in with an input.
To conclude, unmoderated usability testing has revealed that there is room for improvement in the prototype interactions, in addition to the user flow for selecting dates in the calendar. Overall, users found the website to be effective and met their expectation of what a ceramic studio website would be like.
The feedback and insights from the usability testing led me to the final prototype of the responsive website of Muddy's Studio. Within the images of the final high-fidelity wireframes are annotations made to show the deliberate design choices made for each screen, as based on user testing and feedback, in addition to my best judgement and knowledge as a product designer.
%20(3).png)
As student who has great appreciation for Muddy's Studio and their impact on the Orange County community, I was inspired to envision, plan, and redesign the current Muddy's Studio website into something that represents the studio space and communicates their mission to current and potential students and artists. The final MVP was a result of my user research to identify what the current website was lacking and how it can match up to other studios in the area. Furthermore, it is the product of design iterations based off of feedback from users, peers, and my mentor.
In conclusion, does the Muddy's Studio redesign fulfill the purpose of research and design? Let’s refresh….here are the research objectives again:
Understand the user experience when they look for classes and memberships at ceramics studios
Yes, through conducting user interviews and usability testing, I was able to identify what users prioritize and are drawn to when looking for ceramics studios ✅
Present Muddy Studio’s current website to users and conduct a semi-usability test to understand their first impressions and expectations
Yes, through a semi-usability test during the user interview and unmoderated usability testing, I identified what user first impressions and feedback were ✅
Understand what pain points that users experience when using the Muddy’s Studio website and how they can be addressed
Yes, through the user research, I identified pain points users encountered or felt when using the Muddy's Studio website and created a redesign that better encapsulates Muddy's Studio ✅
Identify what different target users want to see when they use the Muddy’s Studio website
Yes, I identified what users look for when they seek out ceramics courses and studios to see what they prioritize and are drawn to when making a decision of where they want to take a class/course ✅
This project helped me learn how to conduct a rebrand and improve an existing website in the context a local business. By conducting user interviews and comparative research, I gained perspective on specific ways users viewed the current Muddy’s Studio website and how it can be improved. Finally, I have created an interactive prototype for the final handoff of this project.
...was that I am capable of making interesting and interactive designs with my current level of skills on Figma. Some specific skills I developed include creating a calendar and clear sign-up user flows, in addition to creating prototype overlays.
…was the design process. The current website needed a lot of work in terms of what the user research communicated. This gave me a lot of room to explore re-branding and eventually create a visually appealing platform for users to try new hobbies or cultivate their ceramics skills.
...was the initial project brief. I wanted to extend my services to Muddy’s Studio by offering a redesign, but I never received a response. Since I wanted to remain within the allotted timeline, I pushed through because I was inspired by my experience at Muddy’s beginner class and wanted help their business grow.
...are to further develop the rest of the pages that were not designed in this initial redesign. I would conduct more usability testing with the further iteration I created after the first round of testing. Furthermore, I wish to present this to Muddy’s Studio in the future as a show of appreciation for their studio providing me with such a great ceramics studio experience!
Special thank you to my DesignLab mentor, Nicola Rushton, for the guidance and support during this project! Thank you to my DesignLab peers for the support in user interviews, usability testing, and providing feedback. Everyone’s generosity has not been overlooked – 💌