Work

About

Resume
Contact

Work

About

Resume
Contact

Responsive Website Redesign

Rooted Remedy

Role

Research |

UX/UI

Tools

Figma |

FigJam|

GoogleSheets

Duration

5 Weeks

Role

Research |

UX/UI

Tools

Figma |

FigJam|

GoogleSheets

Duration

5 Weeks

Responsive Website Redesign

Rooted Remedy

Role

Research |

UX/UI

Tools

Figma |

FigJam|

GoogleSheets

Duration

5 Weeks

Role

Research |

UX/UI

Tools

Figma |

FigJam|

GoogleSheets

Duration

5 Weeks

The Background

Rooted Remedy is a woman-owned ashiatsu massage business based in Denver seeking a website redesign.

The goal of the redesign is to attract new customers and increase bookings by effectively showcasing the benefits and unique aspects of ashiatsu massage.

The Problem

Users don’t know what ashiatsu massage* is and can’t find information from Rooted Remedy to make a decision.


*Ashiatsu massage refers to the use of feet to produce deep tissue body massage.

Ashi= Foot | atsu = pressure

The Solution

Designed a pipeline from educating users on ashiatsu to book a massage with confidence

The solution involves designing a website that aims to boost user confidence by offering in-depth information about ashiatsu massage.

The Original VS. Redesign: A before and after view

Home Page

Original

Redesign

  • Improved accessibility and readability by increasing text contrast against the background.

  • Refreshed the design to create a fresh, calm, and nature-inspired spa atmosphere.

  • More information: Expanded the home page with additional content and features, such as why ashiatus is better, providing information on what clients can expect, showcasing reviews, and integrating an Instagram feed.

Treatments page

  • Added massage options: Enhanced user experience by adding massage options that were previously hidden on the booking page.

  • Added How to prepare for masssage: Provided more detailed information on how to prepare for the massage experience.

  • Design elements from massage studio: Incorporated design elements inspired by the stained glass window at the location, adding a unique and visually appealing touch to the overall design.

Original

Redesign

The Solution

Designed a pipeline from educating users on ashiatsu to book a massage with confidence

The solution involves designing a website that aims to boost user confidence by offering in-depth information about ashiatsu massage.

The Original VS. Redesign: A before and after view

Home Page

Original

Redesign

Improved accessibility and readability

  • By increasing text contrast against the background.


Refreshed the design

  • To create a fresh, calm, and nature-inspired spa atmosphere.

More information:

  • Expanded the home page with additional content and features.

Treatments Page

Original

Added massage options:

  • Massage options are more visible; Previously hidden on the booking page.

Added How to prepare for massage:

  • Provided more detailed information on how to prepare for the massage experience.


Design elements from the massage studio

  • Incorporated design elements and colors from studio

Redesign

Competitive analysis

None of the competitors explain what Ashiatsu massage is and why you should choose it (gasp)

Competitor weaknesses:

  • Not enough pictures of the therapy space or how it works

  • No description to differentiate each massage package

  • Reliance on user to click FAQ to convey important information

Interview

Users have trust issues....(me too).

Users value trust, credibility, comfort and safety to feel confident in booking with a therapist

Insight #1

Insight #1

Insight #1

Assurance that the professionals are knowledgeable and capable

Insight #2

Insight #2

Insight #2

Want to know who was going to massage them

& if they felt comfortable & safe

Want to know who was going to massage them & if they felt comfortable & safe

Insight #3

Insight #3

Insight #3

Wants to know why ashiatsu is better than regular massage and the benefits

Usability test of original website

Users rated overall experience of current website just “okay"

  • 5 moderated usability tests were conducted

  • Via Google Meets to see what users needed to know before they book a session.

Satisfaction Rating

3 Okay

80% users agree

1 Excellent - 5 Very Poor

"I feel like this doesn’t show the whole picture and convey all the information I need to make a decision."

- Participant #3

Affinity Map- Insights of original website

To analyze the qualitative data from usability testing, I utilized an affinity map and organized responses in groups to identify trends. I referred to transcription software to review data comprehensively. Through affinity mapping, I identified the most impactful problems, allowing me to create a user journey map and prioritize solutions.

To analyze the qualitative data from usability testing, I utilized an affinity map and organized responses in groups to identify trends. I referred to transcription software to review data comprehensively. Through affinity mapping, I identified the most impactful problems, allowing me to create a user journey map and prioritize solutions.

To analyze the qualitative data from usability testing, I utilized an affinity map and organized responses in groups to identify trends. I referred to transcription software to review data comprehensively. Through affinity mapping, I identified the most impactful problems, allowing me to create a user journey map and prioritize solutions.

Home Page: Website unclear what type of massage offering
What is ashiatsu?

About Page: Users searched for ashiatsu massage information on the wrong page

Services Page: Wants more information on massage services

“ What is ashiatsu massage on the homepage?”

“How come the pictures in the front showed her touching the face? What is being offered?”

“ What is ashiatsu massage on the homepage?”

What is ashiatsu? I thought I would find it in the "about".

“How come the pictures in the front showed her touching the face?
What is being offered?”

“ What is ashiatsu massage on the homepage?”

“How come the pictures in the front showed her touching the face? What is being offered?”

“ What is ashiatsu massage on the homepage?”

What is ashiatsu? I thought I would find it in the "about".

“How come the pictures in the front showed her touching the face?
What is being offered?”

“ What is ashiatsu massage on the homepage?”

“How come the pictures in the front showed her touching the face? What is being offered?”

“ What is ashiatsu massage on the homepage?”

What is ashiatsu? I thought I would find it in the "about".

“How come the pictures in the front showed her touching the face?
What is being offered?”

User Journey Map

Users had a difficult experience finding information about ashiatsu and booking

Insights from user interviews and usability testing

Persona

Interview Insights to Personas, shaping a clear understanding of the target audience for the website.

2 types of users appeared:

  • The relaxation seeker: someone who wants to unwind and relax

  • The Pain Relief seeker: someone who is an active Colorado and needs muscle relief from their hobbies (skiing, climbing, biking... all of the above)


Card sorting

Users chose new navigational headings and information architecture

5 participants | Type: Moderated open card sort | Tools: Google Meets, Figjam

I created a hypothesis and took it to users to see if they would agree. I wanted to compare the current navigational headings VS new ones through card sorting.

Site Map

Listening to the users: Removing testimonial page and adding an FAQ page, along with name changes

Listening to the users: Removing testimonial page and adding an FAQ page, along with name changes

From card sorting results, a site map was made to reflect user’s navigational expectations.

Wireframes

Iterating fast and furious from low-fi to mid-fi wireframes

  • The process for coming up with the layout included making multiple iterations in lowfi/ sketches to brainstorm different layouts to fit all the information needed for home page and treatments page.

  • In low fi, I wanted to explore different shapes and ways to display information such as the benefits of ashiatsu or the testimonials.

  • With Midfi's created, I was able to request peer feedback from other designers to validate if the layout was clear.

  • The process for coming up with the layout included making multiple iterations in lowfi/ sketches to brainstorm different layouts to fit all the information needed for home page and treatments page.

  • In low fi, I wanted to explore different shapes and ways to display information such as the benefits of ashiatsu or the testimonials.

  • With Midfi's created, I was able to request peer feedback from other designers to validate if the layout was clear.

  • The process for coming up with the layout included making multiple iterations in lowfi/ sketches to brainstorm different layouts to fit all the information needed for home page and treatments page.

  • In low fi, I wanted to explore different shapes and ways to display information such as the benefits of ashiatsu or the testimonials.

  • With Midfi's created, I was able to request peer feedback from other designers to validate if the layout was clear.

Sketches

Midfi w/ feedback

Final Midfi

Sketches

Midfi w/ feedback

Final Midfi

Home Page

Low-fi Wireframes

Moving forward to Mid-fi wireframes I pulled influences from each of the low-fi layouts. I leaned more closely to V3's layout while using the hero layout from V1 and V2.

Moving forward to Mid-fi wireframes I pulled influences from each of the low-fi layouts. I leaned more closely to V3's layout while using the hero layout from V1 and V2.

Midfi w/ feedback

Final Midfi

Treatments Page

Treatment page

Sketches

Figuring out the layout for the massage packages regarding the booking button:

  1. Have 1 booking button on each card

    OR

  2. 1 button for all the cards


Figuring out the layout for the massage packages regarding the booking button:

  1. Have 1 booking button on each card

    OR

  2. 1 button for all the cards


Midfi w/ feedback

Final Midfi

Wireframes

Iterating fast and furious from low-fi to mid-fi wireframes

  • The process for coming up with the layout included making multiple iterations in lowfi/ sketches to brainstorm different layouts to fit all the information needed for home page and treatments page.

  • In low fi, I wanted to explore different shapes and ways to display information such as the benefits of ashiatsu or the testimonials.

  • With Midfi's created, I was able to request peer feedback from other designers to validate if the layout was clear.

Low-fi Wireframes

Moving forward to Mid-fi wireframes I pulled influences from each of the low-fi layouts. I leaned more closely to V3's layout while using the hero layout from V1 and V2.

Summary of feedback from design critique:

Change:

  • CTA to “Learn more”

  • Link to the treatments page instead of booking page

  • Page has too much text- shorten it

  • Try bigger hero section

    • Add a titles to all sections

    • The Benefits/

    Ashiatsu Massage benefits

  • Place IG feed- to its own section- B/C looks out of place

Midfi w/ feedback

Final Midfi

Treatments Page

Home Page

Sketches

Figuring out the layout for the massage packages regarding the booking button:

  1. Have 1 booking button on each card

    OR

  2. 1 button for all the cards


Summary of feedback from design critique:

  • Add text

recommended to card

  • Consider moving Cancellation/ time zones to FAQ - ppl said it looked out of place

  • Too text heavy

    • Add icons

    • decrease words or bold

Midfi w/ feedback

Final Midfi

Usability Testing and Success Metrics

Improved user experience rating from Okay to Excellent!

A moderated usability test was conducted

  • 5 participants interested in ashiatsu massage

  • Via Google Meets

  • Tasks were measured on a 5 point scale (poor to excellent, very easy to very difficult)

Tasks

Completion%

  1. Finding information about ashiatsu massage

100%

  1. Choosing a massage package and clicking book

100%

🚀 Mission success!
Points of friction, confusion, & low confidence from original website were resolved!

  • 100% of users were able to complete both tasks with ease!

  • Furthermore, the majority of users rated the design as very easy to use and excellent for satisfaction, trust, and credibility.

  • From the breakdown in ratings, there are still areas of improvement that are addressed in the next phase: revisions.

Revisions

User feedback validated the design approach with minor UI and copywriting adjustments

Users wanted to know why Ashiatsu was better than regular massage.

Changed “Ashiatsu Benefits” to why Ashiatsu massage is better than regular massage.

“This didn't tell as much about why its better than regular massage.”- Participant 1

Before

After

Users stated the options were unclear- they wanted to to know why pick one option over another.

Options stated in bullet form, and more information on what is included in the massage

Before

After

UI Design

The visual design was inspired by elements from the owner's massage space

I sampled colors from pictures used in the design, linking pictures to the design and providing visual consistency. The resulting color palette combined natural hues with mint green to establish a soothing spa and nature ambiance.

Colors

  • Influences from elements like plants, the massage table (green)

  • Salt lamp (pink), and wood (darker colors) were incorporated

Using the stain glass window in the studio as design inspiration

Style Tile

Final Design

Final Design

View Prototype

View Figma Prototype

Next Steps

If I had more time ..

  • Work on Add on services - owner wants to eventually add services like cbd - cupping , etc

  • More testing on Booking Page- work on the booking process more- there is information architecture in initial testing that people could not navigate back to home page conduct more testing just on the booking process

Final Design: Desktop

Final Design: Mobile

View Figma Prototype

Key Learnings

  • The importance of content writing usability testing- Through this project, I learned how pivotal writing content is for strategy and helping users understand the product. I was so focused on the design elements, high-level content, and images that I missed the mark on what was being conveyed to the user. For example, users wanted to know more information about the treatments even though I had assumed I put enough and why ashiatsu massage is better. Through this learning, it also re-affirmed the importance of usability testing - because I was able to amend my content writing mistakes and learn from users their points of view.

  • The importance of content writing usability testing- Through this project, I learned how pivotal writing content is for strategy and helping users understand the product. I was so focused on the design elements, high-level content, and images that I missed the mark on what was being conveyed to the user. For example, users wanted to know more information about the treatments even though I had assumed I put enough and why ashiatsu massage is better. Through this learning, it also re-affirmed the importance of usability testing - because I was able to amend my content writing mistakes and learn from users their points of view.

Next Steps

  • Work on Add on services - The owner wants to eventually add services like cbd - cupping , etc. So future steps will be to create a layout to accomodate this.

  • More testing on the booking process- In the initial usability test, partipant stated while they were able to book a session it was challening to navigate back to the home page or find information about the treatments.

    • My hypothesis was that users would want to click into a treatment session to learn more, then book that particular session vs selecting a session and being taken to the 3rd party site to then be presented with the same options to select again.

    • During the 2nd usability testing of the redesign, users were fine with the flow disproving my hypothesis. Despite this, the booking process could improve its user flow so users don't get confused while using a 3rd party site.


Thank you for reading!

  • Work on Add on services - The owner wants to eventually add services like cbd - cupping , etc. So future steps will be to create a layout to accomodate this.

  • More testing on the booking process- In the initial usability test, partipant stated while they were able to book a session it was challening to navigate back to the home page or find information about the treatments.

    • My hypothesis was that users would want to click into a treatment session to learn more, then book that particular session vs selecting a session and being taken to the 3rd party site to then be presented with the same options to select again.

    • During the 2nd usability testing of the redesign, users were fine with the flow disproving my hypothesis. Despite this, the booking process could improve its user flow so users don't get confused while using a 3rd party site.


Thank you for reading!

See More Work

Medbridge- Add a new feature to existing product

Goat Guide- Concept Mobile Application

Interested in my work? Let's connect :)

Designed with matcha 🍵 + brown noise sounds 🎵

© 2024 Heidi Moy

Interested in my work? Let's connect :)

Designed with matcha 🍵 + brown noise sounds 🎵

© 2024 Heidi Moy