Calm & Clay

Calm & Clay

Calm & Clay

A Pottery Website for a Friend

A Pottery Website for a Friend

A Pottery Website for a Friend

Project Overview

Project Overview

Project Overview

Overview

Overview

Overview

A portfolio website designed for part-time potter and my friend, Rachel, featuring her creations, classes, and journey.

A portfolio website designed for part-time potter and my friend, Rachel, featuring her creations, classes, and journey.

A portfolio website designed for part-time potter and my friend, Rachel, featuring her creations, classes, and journey.

Goals

Goals

Goals

Develop a visually captivating high fidelity prototype that aligns with Rachel's vision.

Create a calming and intuitive interface that enables visitors to navigate through the website effortlessly.

Establish a serene and mindful atmosphere that complements Rachel's pottery aesthetic.

Develop a visually captivating high fidelity prototype that aligns with Rachel's vision.

Create a calming and intuitive interface that enables visitors to navigate through the website effortlessly.

Establish a serene and mindful atmosphere that complements Rachel's pottery aesthetic.

Develop a visually captivating high fidelity prototype that aligns with Rachel's vision.

Create a calming and intuitive interface that enables visitors to navigate through the website effortlessly.

Establish a serene and mindful atmosphere that complements Rachel's pottery aesthetic.

My Role

My Role

My Role

User Research, Stakeholder Interviews, Competitive Analysis, User Journey Mapping, Information Architecture, Wire-framing, Prototyping, Usability Testing, Visual Design, Branding, UI Implementation, Design Iteration, Documentation

User Research, Stakeholder Interviews, Competitive Analysis, User Journey Mapping, Information Architecture, Wire-framing, Prototyping, Usability Testing, Visual Design, Branding, UI Implementation, Design Iteration, Documentation

User Research, Stakeholder Interviews, Competitive Analysis, User Journey Mapping, Information Architecture, Wire-framing, Prototyping, Usability Testing, Visual Design, Branding, UI Implementation, Design Iteration, Documentation

Project Duration - 80 Hours

Project Duration - 80 Hours

Project Duration - 80 Hours

Project Timeline

Project Timeline

Project Timeline

80 hours

80 hours

80 hours

Secondary Research

Secondary Research

Secondary Research

STAKEHOLDER INTERVIEW

STAKEHOLDER INTERVIEW

STAKEHOLDER INTERVIEW

Numerous thorough interviews with Rachel were conducted to explore her artistic inspirations, objectives for the website, and desired user experience. These insights formed the foundation for the design process.

Numerous thorough interviews with Rachel were conducted to explore her artistic inspirations, objectives for the website, and desired user experience. These insights formed the foundation for the design process.

Numerous thorough interviews with Rachel were conducted to explore her artistic inspirations, objectives for the website, and desired user experience. These insights formed the foundation for the design process.

COMPETITOR ANALYSIS

COMPETITOR ANALYSIS

COMPETITOR ANALYSIS

Several websites were studied and examined, with a focus on those with a tranquil aesthetic and online-booking feature, to identify design trends and usability patterns.

Several websites were studied and examined, with a focus on those with a tranquil aesthetic and online-booking feature, to identify design trends and usability patterns.

Several websites were studied and examined, with a focus on those with a tranquil aesthetic and online-booking feature, to identify design trends and usability patterns.

Client Profile

Client Profile

Client Profile

NAME

NAME

NAME

Rachel

Rachel

OCCUPATION

OCCUPATION

OCCUPATION

Full-time Student & Part-time Potter

Full-time Student & Part-time Potter

BUSINESS

BUSINESS

BUSINESS

Handcrafted Pottery & Pottery Classes

Handcrafted Pottery & Pottery Classes

"I want people to feel a sense of calm and relaxation when they go through my website"

"I want people to feel a sense of calm and relaxation when they go through my website"

"I want people to feel a sense of calm and relaxation when they go through my website"

Rachel's love for pottery began as a therapeutic escape, but it quickly transformed into a full-fledged creative pursuit. Her pottery exudes elegance, intricate designs, and earthy colour palettes, capturing the essence of her creative expression. Rachel wants a website that not only showcases her beautiful pottery creations but also promotes her pottery classes.

Rachel's love for pottery began as a therapeutic escape, but it quickly transformed into a full-fledged creative pursuit. Her pottery exudes elegance, intricate designs, and earthy colour palettes, capturing the essence of her creative expression. Rachel wants a website that not only showcases her beautiful pottery creations but also promotes her pottery classes.

Rachel's love for pottery began as a therapeutic escape, but it quickly transformed into a full-fledged creative pursuit. Her pottery exudes elegance, intricate designs, and earthy colour palettes, capturing the essence of her creative expression. Rachel wants a website that not only showcases her beautiful pottery creations but also promotes her pottery classes.

Client Requirements

Client Requirements

Client Requirements

During an 80-minute interview with Rachel, we discovered many important things. We talked about her art, her business goals, and what she wants for her pottery website. This conversation helped us figure out what the website should look like and what features it should have.

During an 80-minute interview with Rachel, we discovered many important things. We talked about her art, her business goals, and what she wants for her pottery website. This conversation helped us figure out what the website should look like and what features it should have.

During an 80-minute interview with Rachel, we discovered many important things. We talked about her art, her business goals, and what she wants for her pottery website. This conversation helped us figure out what the website should look like and what features it should have.

1

Design Aesthetic

Design Aesthetic

Design Aesthetic

Create a calming and minimalist website design with an earthy colour palette to reflect Rachel's aesthetic.

Create a calming and minimalist website design with an earthy colour palette to reflect Rachel's aesthetic.

Create a calming and minimalist website design with an earthy colour palette to reflect Rachel's aesthetic.

2

Visual Showcase

Visual Showcase

Visual Showcase

Showcase Rachel's pottery as a visual album with high-quality images, serving as a central focus of the website.

Showcase Rachel's pottery as a visual album with high-quality images, serving as a central focus of the website.

Showcase Rachel's pottery as a visual album with high-quality images, serving as a central focus of the website.

3

Class Information and Booking

Class Information and Booking

Class Information and Booking

Implement a user-friendly online booking system for pottery classes, offering comprehensive information about the classes.

Implement a user-friendly online booking system for pottery classes, offering comprehensive information about the classes.

Implement a user-friendly online booking system for pottery classes, offering comprehensive information about the classes.

4

Artist Introduction

Artist Introduction

Artist Introduction

Feature a dedicated homepage section introducing Rachel and providing a brief background on her pottery journey.

Feature a dedicated homepage section introducing Rachel and providing a brief background on her pottery journey.

Feature a dedicated homepage section introducing Rachel and providing a brief background on her pottery journey.

5

Contact Integration

Contact Integration

Contact Integration

Include contact options, such as an email address or a contact form, for inquiries related to class bookings or collaboration opportunities.

Include contact options, such as an email address or a contact form, for inquiries related to class bookings or collaboration opportunities.

Include contact options, such as an email address or a contact form, for inquiries related to class bookings or collaboration opportunities.

Sitemap

Sitemap

Sitemap

The sitemap for Rachel's pottery studio website outlines the structured layout and organization of the website's key sections. It serves as a roadmap for visitors to navigate through the various pages and access relevant information efficiently.

The sitemap for Rachel's pottery studio website outlines the structured layout and organization of the website's key sections. It serves as a roadmap for visitors to navigate through the various pages and access relevant information efficiently.

The sitemap for Rachel's pottery studio website outlines the structured layout and organization of the website's key sections. It serves as a roadmap for visitors to navigate through the various pages and access relevant information efficiently.

Task Flow - Book a Class

Task Flow - Book a Class

Task Flow - Book a Class

  • Exploration: User visits the Calm&Clay website and navigates to the classes section.

  • Selecting a Class: User explores the available classes, considering factors like date, time, and class description.

  • Choosing Date and Time: User selects a preferred date and time slot for the class.

  • Confirming Details: User verifies the chosen class details and proceeds to book.

  • Booking Initiation: User initiates the booking process by clicking the "Book Now" button.

  • Participant Details Entry: User enters participant information such as name, email, and any other required details.

  • Payment Processing: User proceeds to payment, enters payment details, and confirms the transaction.

  • Confirmation: User receives confirmation of successful booking and details of the class.

  • Post-Booking Actions: User may choose to share the booking on social media or explore additional classes.

  • Completion: User successfully completes the booking process, eagerly anticipating the pottery class.

  • Exploration: User visits the Calm&Clay website and navigates to the classes section.

  • Selecting a Class: User explores the available classes, considering factors like date, time, and class description.

  • Choosing Date and Time: User selects a preferred date and time slot for the class.

  • Confirming Details: User verifies the chosen class details and proceeds to book.

  • Booking Initiation: User initiates the booking process by clicking the "Book Now" button.

  • Participant Details Entry: User enters participant information such as name, email, and any other required details.

  • Payment Processing: User proceeds to payment, enters payment details, and confirms the transaction.

  • Confirmation: User receives confirmation of successful booking and details of the class.

  • Post-Booking Actions: User may choose to share the booking on social media or explore additional classes.

  • Completion: User successfully completes the booking process, eagerly anticipating the pottery class.

  • Exploration: User visits the Calm&Clay website and navigates to the classes section.

  • Selecting a Class: User explores the available classes, considering factors like date, time, and class description.

  • Choosing Date and Time: User selects a preferred date and time slot for the class.

  • Confirming Details: User verifies the chosen class details and proceeds to book.

  • Booking Initiation: User initiates the booking process by clicking the "Book Now" button.

  • Participant Details Entry: User enters participant information such as name, email, and any other required details.

  • Payment Processing: User proceeds to payment, enters payment details, and confirms the transaction.

  • Confirmation: User receives confirmation of successful booking and details of the class.

  • Post-Booking Actions: User may choose to share the booking on social media or explore additional classes.

  • Completion: User successfully completes the booking process, eagerly anticipating the pottery class.

Low Fidelity Wireframes

Low Fidelity Wireframes

Low Fidelity Wireframes

Why hand sketches?

Why hand sketches?

Why hand sketches?

I sketched wireframes to experiment with diverse design styles and concepts, providing a flexible exploration before moving to digital prototypes.

I sketched wireframes to experiment with diverse design styles and concepts, providing a flexible exploration before moving to digital prototypes.

I sketched wireframes to experiment with diverse design styles and concepts, providing a flexible exploration before moving to digital prototypes.

Style Guide

Style Guide

Style Guide

Why this logo?

Why this logo?

The name captures the essence of Rachel's pottery, harmonising tranquility in design with the earthy artistry of clay crafting.

The style mirrors organic essence, conveying authenticity and creativity, while its brushstroke-like quality enhances a handcrafted feel.

The name captures the essence of Rachel's pottery, harmonising tranquility in design with the earthy artistry of clay crafting.

The style mirrors organic essence, conveying authenticity and creativity, while its brushstroke-like quality enhances a handcrafted feel.

The name captures the essence of Rachel's pottery, harmonising tranquility in design with the earthy artistry of clay crafting.

The style mirrors organic essence, conveying authenticity and creativity, while its brushstroke-like quality enhances a handcrafted feel.

Logo

Logo

Logo

Favicon

Favicon

Favicon

Usability Testing

Usability Testing

Usability Testing

5

5

5

participants

participants

participants

between the ages of 20-30

between the ages of 20-30

between the ages of 20-30

GOALS

GOALS

GOALS

identify usability issues
determine ease of use
determine participants' satisfaction
determine if the design choices align with the client’s expectations
evaluate any roadblocks that hinder successful completion of a task

identify usability issues
determine ease of use
determine participants' satisfaction
determine if the design choices align with the client’s expectations
evaluate any roadblocks that hinder successful completion of a task

identify usability issues
determine ease of use
determine participants' satisfaction
determine if the design choices align with the client’s expectations
evaluate any roadblocks that hinder successful completion of a task

28s

28s

28s

time on task

time on task

time on task

100%

100%

100%

task completion rate

task completion rate

task completion rate

0

0

0

difficulty (very easy)

difficulty (very easy)

difficulty (very easy)

FEEDBACK

FEEDBACK

FEEDBACK

The cover photo dominates the page, leading to confusion among participants.
Add hover to the class options (eg. Saturday, 7pm-8pm) to maintain consistency
Provide appropriate warning when users try to go back from the Participant/Payment page

The cover photo dominates the page, leading to confusion among participants.
Add hover to the class options (eg. Saturday, 7pm-8pm) to maintain consistency
Provide appropriate warning when users try to go back from the Participant/Payment page

The cover photo dominates the page, leading to confusion among participants.
Add hover to the class options (eg. Saturday, 7pm-8pm) to maintain consistency
Provide appropriate warning when users try to go back from the Participant/Payment page

Iteration

Iteration

Iteration

Before
Cover photo covers the entire page

Before
Cover photo covers the entire page

Before
Cover photo covers the entire page

Before
No hover over class option buttons

Before
No hover over class option buttons

Before
No hover over class option buttons

Before
No warning when users click on ‘go back’

Before
No warning when users click on ‘go back’

Before
No warning when users click on ‘go back’

After
Width of cover photo reduced

After
Width of cover photo reduced

After
Width of cover photo reduced

After
Hover added to class option buttons

After
Hover added to class option buttons

After
Hover added to class option buttons

After
Warning provided when clicked on ‘go back’

After
Warning provided when clicked on ‘go back’

After
Warning provided when clicked on ‘go back’

UI Implementation

UI Implementation

UI Implementation

Easy Access to Pottery Classes

Easy Access to Pottery Classes

The "Explore Classes" CTA button is strategically placed at the top of the page for easy access and seamless discovery. The user-friendly design ensures immediate engagement and exploration.

The "Explore Classes" CTA button is strategically placed at the top of the page for easy access and seamless discovery. The user-friendly design ensures immediate engagement and exploration.

Personal Connection with the Artisan

Personal Connection with the Artisan

Rachel's short bio establishes a personal connection between visitors and the artisan behind Calm&Clay, while providing insight into Rachel's passion and expertise in pottery.

Rachel's short bio establishes a personal connection between visitors and the artisan behind Calm&Clay, while providing insight into Rachel's passion and expertise in pottery.

Rachel's Pottery Showcase

Rachel's Pottery Showcase

A collection of high-quality images showcases Rachel's pottery creations. This visual presentation captivates visitors, allowing them to appreciate the craftsmanship of Rachel's work firsthand.

A collection of high-quality images showcases Rachel's pottery creations. This visual presentation captivates visitors, allowing them to appreciate the craftsmanship of Rachel's work firsthand.

Easy Access to Pottery Classes

The "Explore Classes" CTA button is strategically placed at the top of the page for easy access and seamless discovery. The user-friendly design ensures immediate engagement and exploration.

Personal Connection with the Artisan

Rachel's short bio establishes a personal connection between visitors and the artisan behind Calm&Clay, while providing insight into Rachel's passion and expertise in pottery.

Rachel's Pottery Showcase

A collection of high-quality images showcases Rachel's pottery creations. This visual presentation captivates visitors, allowing them to appreciate the craftsmanship of Rachel's work firsthand.

The Prototype

The Prototype

The Prototype

High Fidelity Wireframes (Desktop)

High Fidelity Wireframes (Desktop)

High Fidelity Wireframes (Desktop)

Test Prototype Here

High Fidelity Wireframes (Mobile)

High Fidelity Wireframes (Mobile)

High Fidelity Wireframes (Mobile)

Test Prototype Here