Oakridge

Tasty

Lawndon

Oakridge

Tasty

Lawndon

Elevating Your Relaxation - Massage Services and Online Experience

Elevating Your Relaxation - Massage Services and Online Experience

Seamless, Modern, Responsive Web Design

BACKGROUND

A Skilled Masseur Needs a Top-Notch Responsive Website for His Startup Business in Vancouver

Ever since discovering his passion for massage in 2013, David has dreamed of opening his own massage store in Vancouver's most popular area. He knows that a professional website is crucial for success, which is why he brought me on as his UI/UX designer to help bring his vision to life.

(The Persona)

PROBLEM

The Massage Owner Needs a Better Website to Retain Visitors and Increase Appointments

Many Vancouver massage stores are struggling to attract and retain customers due to their outdated and user-unfriendly websites, which puts them at a disadvantage in the competitive industry.

(Outdated Massage Website)

SOLUTION

Integrating Modern Website Trends

  1. Easy navigation

Help users quickly find what they need, making them satisfied with the flows.

  1. Seamless website layout

Make the website cohesive and harmonious, with consistent designs and smooth transitions between elements.

  1. Related images and videos

Effectively convey the subject and evoke emotions in users.

  1. Responsive website

Provide an optimal user experience on any platform to access the website.

  1. Personalized features

Provide an optimal user experience on any platform to access the website.

  1. Motion design

Capture users' attention and keep them to stay on the website.

USER INTERVIEW

Target Website Myodetox - Views on Approval and Disagreements from Five Interviewees

Before hands-on anything, I gathered opinions about a modern physical therapy website - Myodetox, which is the most ideal and related website in Vancouver, to understand the needs, challenges, and motivations of users.

(The User Interview)

INTERVIEW QUESTIONS:
  1. How would you describe your experience with other massage websites?

  2. What is your main goal when visiting a massage website?

  3. What do you like about the current page/screen/function?

  4. What would prevent you from achieving a task/action?

  5. What improvements could be made to make the website easier or better?

THE MAIN INSIGHT

Elements of a Positive User Experience: Layout, Content, and Visual Design


(The Main Insight from the Affinity Map)

(The Main Insight from the Affinity Map)

(The Main Insight from the Affinity Map)

LOW FIDELITY WIREFRAME

Crafting Layout and Design: Aligning Elements with Precision

Facilitating the rapid exploration of various design possibilities and allowing for seamless adjustments as required.

DESIGN PROCESS

Five Steps Loop

TESTING & IMPROVEMENTS

3 Major Iterations

I've streamlined service selection, integrated the FAQ with the contact form for quicker access to answers, and placed contact information in the footer for enhanced user convenience across all pages.

  1. Simplified Service Selection

The redesign streamlines access to services on one page, promoting efficient scrolling and eliminating 'more' or 'next session' clicks, enhancing user efficiency and a seamless experience."

  1. FAQ Integration with Contact Form

Combining the Contact Form and FAQ enables quick access to answers, allowing users to find solutions before and after submitting queries.

  1. Contact Info in Footer

Placing contact info in the footer ensures easy access on every page, unlike the original design that had it exclusively on the contact page.

DESIGN DECISION

Interface Design

The accent color, vintage gold, is used to emphasize important elements and add a touch of luxury to the overall style.

The secondary color is pure white, which provides high color contrast and enhances the readability of text on a dark background.

The primary color is a mix of dark ocean blue and blurred deep teal gradients, creating a soothing and upscale aesthetic.

The secondary color is pure white, which provides high color contrast and enhances the readability of text on a dark background.

The primary color is a mix of dark ocean blue and blurred deep teal gradients, creating a soothing and upscale aesthetic.

The accent color, vintage gold, is used to emphasize important elements and add a touch of luxury to the overall style.

The secondary color is pure white, which provides high color contrast and enhances the readability of text on a dark background.

The primary color is a mix of dark ocean blue and blurred deep teal gradients, creating a soothing and upscale aesthetic.

The secondary color is pure white, which provides high color contrast and enhances the readability of text on a dark background.

The primary color is a mix of dark ocean blue and blurred deep teal gradients, creating a soothing and upscale aesthetic.

(The Color Pallet)

Aa

Cabrito Didone

The heading typography is Cabrito Didone which is widely used in luxury branding due to its refined and elegant appearance.

Corbert


The body text typography is Corbert, it has clean, minimalistic design and excellent legibility.

Aa

Cabrito Didone

The heading typography is Cabrito Didone which is widely used in luxury branding due to its refined and elegant appearance.

Corbert


The body text typography is Corbert, it has clean, minimalistic design and excellent legibility.

(The Typography)

DESIGN DECISION

Motion Design

  1. Opening-after-delay animation

Introduce features gradually, providing a guided path for users to explore.

  1. Parallax effect

Guide users to interact with the webpage, while also presenting information in a more digestible and enjoyable manner.

  1. Proximity drop-down menu

Link to the navigation bar reduces user movement to access them.

  1. Accordion

Save space and provide scannable questions.

  1. Fixed input

Keep users aware of the requested information.

  1. Wrong input value

Trigger an accent color reminder to maintain consistency in the design.

(The Prototype Video of Motion Design)

THE DESIGN

View a video of the complete website below

(The Prototype of Web Design)

THE CONCLUSION

Reflection and Plans for Continual Improvement

Some valuable lessons have been learned throughout the process. One of the main takeaways was the importance of considering content when designing. It became evident that content significantly impacts elements like video and image placement, as well as alignment. Even the length of the content plays a role in overall design.


To avoid similar issues in the future, the focus will be on prioritizing content confirmation and closely collaborating with clients to ensure consistent and authentic designs. By involving clients in the process and giving special attention to the primary text, designs that truly resonate and meet their needs can be achieved.


Although the project took longer due to the learning curve associated with implementing unfamiliar features, the mindset now revolves around viewing learning as an ongoing journey. The goal is to make incremental improvements each day to expedite project progress. This positive mindset serves as a powerful motivation and source of empowerment for future endeavors.

Other Projects

Other Projects

Other Projects

You are welcome to connect with me!

I'm always interested in meeting new people and exploring new opportunities.

Made with

in Framer

2024 All Right Reserved.

You are welcome to connect with me!

I'm always interested in meeting new people and exploring new opportunities.

Made with

in Framer

2024 All Right Reserved.

You are welcome to connect with me!

I'm always interested in meeting new people and exploring new opportunities.

Made with

in Framer

2024 All Right Reserved.