Vidal Flow

A responsive web design for a small business providing reiki services in Pennsylvania.

Project Overview

Challenge

Vidal Flow wants to establish an online presence so their customer base can learn about their practice and book appointments.

Deliverable

A blueprint design for a website displayed for laptop and mobile screens.

Role:

Time:

Task:

Tools:

UX/UI Designer

6 weeks

Design a responsive website.

Figma, iPad Notes, Google Forms

Research & Discover

There were multiple phases of research for this project. First was a conversation with the client. This helps me gain clarity on their vision and the kinds of information they want to convey. They want a web presence that educates people on reiki and allows them to schedule an appointment online. 

 I quickly realized that I am not well-versed in reiki, meditation, and holistic healing. So I tasked myself with getting more familiar with the industry.

When taking a bird’s eye view of project goals, getting information on how people use appointment schedulers online, particularly in the area of wellness or beauty would be a great place to start.

User Research & Key Findings

Overall, participant expectations around booking appointments seemed relatively consistent. With a desire for the process to be smooth and have an option to book online.  The kinds of appointments mentioned during the user research were haircuts, fitness (gym, pilates), nails, and various kinds of doctors.

Affinity map of initial user research findings.

Define and Digest

User Personas

After these conversations emerged two core How Might We statements that will guide my design?

  1. How might we clearly and succinctly educate individuals on Reiki and its benefits?


  2. How might we ease the scheduling process for customers, both returning and new?

With the culmination of the initial research phase comes William, someone interested in bringing spiritual practice into his life while not being sure what direction to go in.

My goal is for William to visit this site, learn some of the fundamentals of reiki and once deciding it is the right choice for him, be able to go on and schedule his appointment with Vidal Flow.

Design

Develop

To communicate what I envision the starting point to be to Vidal Flow, I provided an initial site map and user flow.  This serves to ensure we are on the same page before I start working on the design.

This MVP was focused on the user’s ability to arrive at the site, learn about what services Vidal Flow provides, and move forward with scheduling an appointment for both new and returning clients.

LowFi Wireframe Sketches

Initial sketches started like this.

Visual Design Direction

Vidal Flow already has a logo that they wanted to incorporate into the design. 

While I had initially wondered how to incorporate more of the purple and green colors of the logo into the website design, upon experimentation, it felt a bit juvenile. Rather than trying to stick close to the brand colors, I reflected on the feeling I wanted to evoke for users. Vidal Flow focuses on spiritual wellness, so how do I bring a sense of calm and serenity?

I opted for a brown color palette. It felt comforting and inviting upon initial reflection.

While there is a deep rabbit hole when thinking about color psychology, I wanted to confirm my initial assumptions. Upon some digging, it seems that a “sandy brown has some liveliness and energy…is related to home, health and comfort.” as described by the free graphic design tool VistaCreate.

Initial Palette Inspiration

The decision to move away from the original logo colors to a brown palette dramatically changed the mood and the style of the site. The inclusion of a full-page leading image captures the attention of the viewer more effectively too..

Testing

User Testing Overview

Method:

Age:

Duration:

Tools:

Task:

Video/Audio conferencing

26 - 55

~12 minutes

Figma, iPad Notes, conferencing software

Move through the process of scheduling an appointment.

Themes

After synthesizing user testing notes, I came across some themes and items I wanted to address.

  • The header/opening image was a good idea. It was well-received in half of the interviews

  • Flow is easy and consistent to navigate

  • Comments on the spacing/padding of FAQ cards

  • People expected testimonials to be active for the prototype

  • It felt like a descriptive sentence could be included on the FAQ and Contact page

Final Prototype

Taking user feedback, I iterated on my design. I was pleased to see the progress the designs made.

Desktop Layout

Mobile Layout

Future Road Map

Vidal Flow wants to integrate a visual arts component into their business. They are hoping to build a place of community and care and believe art contributes to the spiritual healing of the human mind.  Here are some potential directions given these desires: 

  • A gallery to showcase artwork

  • An online storefront to sell the artwork

  • A page that displays local community events that they host