A Responsive Web Redesign
Driftwood Ceramics
Product
My role
UX/UI Design, UX research, information architecture, wireframing, prototyping, usability testing.
80 hours
Figma, Figjam, Maze
McKenzie Stanley
Background
With Driftwood Ceramics' rapid growth, updating the website has become increasingly important. As an instructor at this studio, users would bring to my attention that they were having difficulties booking classes on the website.
Problem
A user experience refresh is needed to increase profit and funnel new customers. An updated website will help users understand how many seats were left in the class and design a navigation flow that feels less clunky.
Design goals
The site needs a fresh user interface that aligns with the brand identity.
An improved landing page.
A clear call-to-action hierarchy.
A way to inform customers about class availability.
Current Site
Discover
What we want to find
Determine the needs and expectations of individuals interested in attending classes or becoming studio members.
Evaluate the current website's user experience by identifying users' pain points to increase overall usability.
Understand how the target audience perceives Driftwood's brand identity.
Learn how effective the current class availability method is in communicating with the customers.
Methodologies
Competitive analysis
User interviews
Usability testing
Define
Competitive Analysis
Successful class-based businesses pay attention to:
The environment of each space as it sets the tone of the business.
At the core of these companies education and learning are at the forefront.
A beginner's mindset. When opportunities are advertised to all levels you can attract more people.
Learning a new skill or hobby requires a level of commitment, therefore these companies offer consumers the chance to buy month-long packages.
Consumers will pick a business they align closely with. Business values = consumer trust.
People will pick a business that will help them achieve their specific goals.
Click to view full analysis
User Interviews
Overview:
3 young professionals between the ages of 20-30. 2 were members and 1 was a person taking a class.
All interviews were conducted through Zoom
An affinity map was done to synthesize all the data
Synthesis:
After interviews, it's clear both studio ambiance and website representation are crucial. Enhancing the website will attract more business and convey Driftwood Ceramics' essence. Streamlining navigation from booking to purchase and improving layout will create a seamless user experience. Adding more photos will enhance branding and offer users ease. These improvements will bring more visitors and capture Driftwood Ceramics' true vibes.
100%
Found the navigation to be clunky and confusing
2 of 3
Found that the website doesn't represent the studio well
Click to view full data
Affinity Map Themes
Navigation issues
First impressions are everything
Driftwood, the place to be
No gain, all pain
Meet Kim
After conducting user research, it was important to develop a user persona, because it aim to bring more empathy and understanding to the user's goals, pain points, and behaviors. Ultimately, helping me stay focused and better align my design decisions.
Click to enlarge
To better empathize with the user's needs we crafted POV statements and How Might We questions to develop a deeper understanding of the problem as well as present opportunities for innovation to help generate possible solutions.
POV Statements
Users who want to book a beginner wheel class need an easy way to find the class they are looking for without having to comb through all the options because this can be pretty overwhelming.
Users looking to start their ceramic journey want a welcoming fun studio to invest in. A user-friendly website that conveys this atmosphere will be highly beneficial.
How Might We Questions
How might we help users quickly find what they are looking for in a seamless booking process and minimize user effort?
How might we bring to life the feel of Driftwood Ceramics in the web design?
How might we use testimonials to garner trust and credibility to encourage more individuals to book/join Driftwood Ceramics?
Ideation
Sitemap
Digging deeper to understand how the website can be structured and organized better to improve the overall flow of the site.
Current Sitemap:
The current sitemap has too many unnecessary steps for the user to go through when finding available classes.
Proposed Sitemap:
My goal with the sitemap was to keep things as simple as the existing sitemap, but revving up the usability by condensing the navigation by removing and rearranging the flow from the current sitemap.
User Flows
Driftwood Ceramics thrives the most on its classes and active memberships, therefore it's important to detail the user journey of these two flows. The most challenging solution was considering how to display class availability to the user. Putting myself in the user's shoes, I explored solutions that would make the most sense backed by the research I conducted.
Book a Pots & Pints Class for September 2nd.
Join the waitlist to become a member of the studio
Develop
Style Guide
The client wanted the color palette to be neutral and earthy. Keeping things minimal and simple. In addition, I wanted to keep the typography, Quicksand, as the paragraph font, which was already being used on the current site. Pairing Quicksand with Noto Serif helps balance out visual hierarchy. I wanted to mix the old in with the new to bring in a sense of familiarity to the space.
Color Palette
Typography
Noto Serif | Bold
Header 1 64/72 pt
Header 2 48/56 pt
Header 3 32/36 pt
Header 4 16/20 pt
Quicksand | Regular
Body text 16/20 pt
Body text 16/20 pt
Wireframes
Keeping the research and the ideas for the website in mind, sketches were drawn up to continue to flush out any further issues. Lo-fi sketches allow us to quickly put our ideas into function to examine further pain points and to start to visualize our solution.
I had the privilege to collaborate with a studio member who is a professional photographer. With the help of Quinn, I was able to utilize the photographs to introduce color and personality to Driftwood as that was one of the design goals. These photographs definitely gives users more context into who Driftwood Ceramics is and what to expect.
Deliver
Prototyping
Prototyping is all about making the design come to life. Focusing on micro-interactions and visualizing how the screens will flow allows me to better understand the design and the user engagement at large.
Click to view prototype
Homepage
Booking a class
Join the waitlist
Usability testing
Once the prototype is set up, it is crucial to test the product to discover any pain points with the design. The usability testing was completed through Maze. co as an unmoderated test.
Determine the users’ first impression of Driftwood Ceramics of the website’s improved user experience.
Understand the user's pain points when it comes to booking a class.
Learn how accessible the new user experience is. If not, what can we design differently?
Successful completion rates
Time to complete
Ease of use
Positive first impressions
Purchase a Pots & Pints class for September 2nd.
Complete the waitlist form
Results
8 participants completed the usability test
Successful completion rate
Time to complete
Ease of use
Positive first impressions
“Great, it looks really cute and welcoming. The hover animations of the class cards were cool.”
“I like the vibe of the website, it felt like a calm studio, if I were to look into one that's what I would imagine.”
“I really like the colors, look, and feel of it. The little interactions when I hover over some sections are a nice touch.”
“Loved the moving imagery when hovering over the different classes on the home page. The design is clean and easy to follow/understand.”
“Super clean, easy to navigate.”
“Loved the look and feel of the website!”
Iterations
With the guidance of my mentor through DesignLab and with the great results of the usability testing, it was decided that no further iterations we're needed at this time.
Conclusion
Throughout this project, I learned so much about the importance of planning and how critical it is to step into the users' perspective. For example, when I was beginning to plan out the design for Driftwood, I was focused on designing the desktop designs first. However, as the project was underway, I realized through further research that most users completed purchases and booked more classes via smartphone. Therefore, if I had the opportunity to restart this project, I would have focused primarily on mobile first and then moved onto desktop and tablet.
Moving forward with this project, I would like to build out the "Meet the Team" section of the landing page more. This was something that was brought up in the user interviews, as users thought it would be nice to know who is teaching the class and what their creative work looked like. This could have been demonstrated through clicking on the card and a short profile and gallery pop-up window would appear, however for the sake of time and prioritization that feature was enlisted as a nice to have. In addition, I would like to enhance the user journey by adding ceramic education and resources for learners who want to dive deeper. My goal is to continue to bring a fresh perspective to the user experience by keeping things simple and minimal to help users find what they need and get what they want.
To review, the problem of this project was to enhance the overall user experience by bringing life to Driftwood Ceramic's website. This included revamping the layout of the landing page, reworking the navigation for a smoother flow, and creating an effective yet simple drop-down menu solution for providing users with additional information for class availability. This experience has continued to help my understanding of user-centric design grow and I learned more about what it takes to make a design responsive. This will guide me well for my future designs and help me make better decisions for the user and the business.
