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)
