Summary

I was challenged to design a signup process on a responsive website for a pottery studio.

Ceramix Studio welcomes both hobbyists and artists alike to attend their classes.

Objective

To design a responsive user-friendly website that represents Ceramix studio and allows potters to sign up for classes online.

Role

This was a project that I researched and designed all on my own, therefore I was lead UX Designer and Researcher.

Tools

Adobe XD

Back to top

Understanding our User

Understanding our User

Pottery has had a surge in popularity post-pandemic, partly due to its tactile, therapeutic appeal. Ceramix Studios' customers are either pursuing ceramics as a career or trying it out as a new hobby.

Although today, people often discover pottery online through social media, they are craving a tactical activity that allows them to get away from the digitally centered world we exist in and create with their hands.

Our user group works or goes to school and spends their limited free time trying an activity that is therapeutic and fun. This user group is adults who are comfortable signing up for a session in the studio online.

After conducting some qualitative interviews, we learned about pains that would prevent users from reaching the goal of signing up and attending a pottery class.

Pottery has had a surge in popularity post-pandemic, partly due to its tactile, therapeutic appeal. Ceramix Studios' customers are either pursuing ceramics as a career or trying it out as a new hobby.

Although today, people often discover pottery online through social media, they are craving a tactical activity that allows them to get away from the digitally centered world we exist in and create with their hands.

Our user group works or goes to school and spends their limited free time trying an activity that is therapeutic and fun. This user group is adults who are comfortable signing up for a session in the studio online.

After conducting some qualitative interviews, we learned about pains that would prevent users from reaching the goal of signing up and attending a pottery class.

Initial Research

Pain Points uncovered included:

Pain Points uncovered included:

Availability

Some people in our user group work 9-5 jobs, while others have less routine schedules. People said limited availability of classes would prevent them from signing up for a class.

Class Information

For novice or intermediate ceramicists, it can be confusing to know which class and level is right for them and what they are looking for.

Confirmation

Confirmation after booking a class is important feedback for people who are new to the signup process and the website itself.

Reminders

Our user group has many activities and responsibilities on their calendars, so it is easy to forget what time and day their booked class is unless our process reminds them of their scheduled session.

To serve as a representative of the common user needs, goals, feelings, pain points, and actions that I derived from my research and interviews, I developed a persona, Elliot.

Our Persona

Our Persona

To serve as a representative of the common user needs, goals, feelings, pain points, and actions that I derived from my research and interviews, I developed a persona, Elliot.

To serve as a representative of the common user needs, goals, feelings, pain points, and actions that I derived from my research and interviews, I developed a persona, Elliot.

User Journey Mapping

User Journey Mapping

Mapping out Elliot's user journey helped visualize how users would interact with our website, enabling us to identify their needs and emotions at each stage.

Mapping out Elliot's user journey helped visualize how users would interact with our website, enabling us to identify their needs and emotions at each stage.

Indirect competitor Starbucks mobile ordering screen features four tabs at the top: menu, featured, previous and favorites. Below are photos of featured drinks and featured food.
Indirect competitor Starbucks mobile ordering screen features four tabs at the top: menu, featured, previous and favorites. Below are photos of featured drinks and featured food.
Indirect competitor Starbucks mobile ordering screen features four tabs at the top: menu, featured, previous and favorites. Below are photos of featured drinks and featured food.

Starting the Design

Starting the Design

Site Map

Site Map

Though the project focuses on signing up for the pottery class, it was important to organize where information on the whole site will be architected to start visualizing the user flow on the website.

Though the project focuses on signing up for the pottery class, it was important to organize where information on the whole site will be architected to start visualizing the user flow on the website.

Digital Wireframes

Digital Wireframes

I created basic wireframes for both desktop and mobile screen sizes in Adobe XD.

I created basic wireframes for both desktop and mobile screen sizes in Adobe XD.

Screenshot of Mobile home page and desktop home page
Screenshot of Mobile home page and desktop home page
Screenshot of Mobile home page and desktop home page

Reserve a Class

Reserve a Class

The Reserve page allows browsing the studio’s schedule by week, filter by class type and read descriptions of classes in the calendar view. Each card on the calendar represents a class and features a Sign Up button, where users can start the sign up process for the selected class.


The Reserve page allows browsing the studio’s schedule by week, filter by class type and read descriptions of classes in the calendar view. Each card on the calendar represents a class and features a Sign Up button, where users can start the sign up process for the selected class.


Class Information

Class Information

After users select Sign Up from the Reserve page, important details for the class like date, time, and cost appear. Users can change number of attendees if they want to sign up a friend and change the number of sessions if they want to repeat the class weekly on the same day or again on a different day when the class is available.

Low Fidelity Prototype

Low Fidelity Prototype

The low-fidelity prototype where users browse, sign up for a class, and get a reservation confirmation was then tested on users to give me feedback early on in the design process.

Focusing on defining layouts and interactions for my users to find and complete a workout class, I created a low-fidelity prototype in Figma.

View Web Prototype

View Mobile Prototype

Refining the Designs

Refining the Designs

Usability Testing

I conducted usability studies with participants to see if we could learn about the user flow and how the user signs up for the class.

I conducted usability studies with participants to see if we could learn about the user flow and how the user signs up for the class.

Usability Testing

1

Include Date in Calendar

Showing the date would be a simple and helpful addition to the calendar view 

Showing the date would be a simple and helpful addition to the calendar view 

2

Reconsider repeat session feature

Instead of implementing a confusing repeat session feature, we should instead design a way for users to book another class if they want to.

Instead of implementing a confusing repeat session feature, we should instead design a way for users to book another class if they want to.

3

Export Events to Calendar Third Party

Export Events to Calendar Third Party

Users like to utilize their calendar apps on their phones so exporting the event to third-party calendars would be helpful to users.

Users like to utilize their calendar apps on their phones so exporting the event to third-party calendars would be helpful to users.

  1. Include Date in Calendar

Changed the calendar to show which date correlates to the day of the week. 

  1. Reconsider Repeat Session Feature

If users want to now book many classes, they can add them to their cart and review and checkout by clicking on the cart icon.

Mockups

Mockups

I iterated on the mockups to create a prototype closer to the real customers’ experience of the product.


I saved the color palette, iconography, typography and elements as assets in the design file to have consistency across the high-fidelity pages for both the web and mobile screen sizes.

4 Screens with the high fidelity design of the mobile app
4 Screens with the high fidelity design of the mobile app
4 Screens with the high fidelity design of the mobile app
4 Screens with the high fidelity design of the mobile app
4 Screens with the high fidelity design of the mobile app
4 Screens with the high fidelity design of the mobile app

View Desktop Prototype

View Mobile Prototype

Takeaways

Takeaways

Outcome:

The responsive website I created offers a seamless sign-up process that accommodates users on any device.
Both artists and hobbyists can easily find what they are looking for and sign up for their preferred class in 3 steps.

What I learned:

Simplicity in design and presenting the most important information to users was a focal challenge in this project.

Designing for web and mobile devices that have limited real estate makes it critical to prioritize the most important information that aids users in the journey.

This project also refined my skills in Adobe XD. 

Next Steps

Next Steps

1. Increase Testing

More testing with more users!

2. Expand Sign-up Process for Recurring Visitors

Explore desiging a checkout process for signing up and buying multiple classes.

3. Personalize the Experience

Add some personalization to the website for recurring customers.

Get in Touch

Let's Connect

Feel free to contact me if having any questions. I'm available to chat via LinkedIn or Email.

Meaghan Smith

Get in Touch

Let's Connect

Feel free to contact me if having any questions. I'm available to chat via LinkedIn or Email.

Meaghan Smith

Get in Touch

Let's Connect

Feel free to contact me if having any questions. I'm available to chat via LinkedIn or Email.

Meaghan Smith

Create a free website with Framer, the website builder loved by startups, designers and agencies.