Yellow Decorative Tape

Your Cosmic Consultant

Freelance work designing a website with customized digital illustrations for a client who provides spiritual services such as tarot, chart readings, and distance reiki.

View Delivered Product
Cosmic Consultant Home Screens

My Role

UX & UI Designer

Duration

3 weeks
July 2023

Tools

Figma
Procreate
Google Suite
Pinterest
Wix

Team

Keauna Lyles

The Problem

Sarah is a new business owner looking to provide intuitive spiritual services such as tarot readings, chart readings and distance reiki. She is in need of a business website that provides details on her experience and service offering and encourages customers to book her services.

How might we create a website that lets customers know that Sarah is now open for business and encourages them to book her services?

The Solution

The website developed for Your Cosmic Consultant is designed to encourage customers to book even without having previously using Sarah's services by providing customer testimonials, highlighting Sarah's expertise, and developing a website simple to navigate and use, inspiring trust in new potential customers.

Your Cosmic Consultant Website on Laptop and Cellphone

The Starting Line

Outlining the Project Scope

Before starting the design process, I corresponded with my client regarding her website needs, her expertise and what services she would be providing. She noted that she would be providing intuition-guided tarot readings, astrological chart readings, and distance reiki. In addition to selling and booking these services online, she wanted a place to blog and house content.

Proto Persona

Sage McKesson, Proto Persona

I proposed that her target user would likely be mid-late 20s through early 30s. Someone who is curious about spirituality but may not have ever had a 1:1 intuitive reading. She is looking to book a reading to satisfy her curiosity, but has yet to book because she wants to be sure she is selecting the right person/service.

Key Goals for Your Cosmic Consultant

1.
Design a website that is easy to navigate and entices new users to book services
2.
Demonstrate the client's expertise through copy and testimonials
3.
Design a website that is simple for the client to update on their own post product delivery

Defining the Scope

Client Questionnaire

To start the ideation process, I drafted questions for my client to answer that would help me understand her aesthetic, understand what sections her website would need, tech savviness, and her familiarity with different web builders. I learned that she had started to use Wix, but hadn't gotten very far with building her own website. As she was already fairly familiar with the platform, wanted to book/schedule services and host a blog on her website it made sense to build this website on Wix as well. I thought the learning curve of Webflow or another more customizable web builder would require too much of a learning curve for her purposes.

Aesthetic Alignment

Pinterest Board

I asked my client to describe how they would like their website to look and feel using 5 adjectives. She choose feminine, bold, modern, artsy and simple. I then took these initial adjectives and used them to create a Pinterest board. I pinned a few inspiration images then shared the board and asked my client to pin along with me. I explained that these pins did not have to be website-specific, but could be color palettes, web design, illustrations or anything else that matched the vibe they were trying to get across on Your Cosmic Consultant.

Moodboard

Moodboard

After a few pins, I got clearly see my client's aesthetic and vision. I told her I'm getting a "desert at dusk, artsy bohemian femme vibe" from the board. She said "yes, you got it!!!" so I moved forward with synthesizing the inspiration into a more defined moodboard.

Developing Solutions

Low Fidelity Prototyping

Low Fidelity Homepage

I used Figma to make my initial low fidelity prototypes. I suggested that her homepage start with a headshot to help humanize her practice. I dedicated a space for fine line digital illustrations to give the website a unique, customized feeling. I made a section for some short testimonials that would help encourage potential customers to book.

Style Guide

UI Style Guide

I toyed around with a few site ID options based on the adjectives the client provided; ultimately I selected the typeface Grape Nuts, as it felt simple and artsy. At this point in the process, I also used the iPad app, Procreate to draw some fine line illustrations (hands to depict Reiki, the Empress Tarot Card, and feathers) to highlight Your Cosmic Consultant's key services.

High Fidelity Prototyping

High Fidelity PrototypeLink to High Fidelity Prototype

Finetuning the Experience

Designing in Wix

I was unfamiliar with Wix prior to starting this project so I spent a week getting to know the platform, its functionality and limitations as I built the Your Cosmic Consultant website. I learned that Wix has some limitations with responsiveness and object placement in comparison to some more customizable web builders. As a result, I had to deviate from my original design in some places. I kept my illustrations on the desktop version of the website, but used a Wix provided module for mobile as I was unhappy with how the website resized the illustrations.

I focused on setting specifications for the typefaces and colors that would allow me to hand off the website to the client who could then change text and sections as needed without disrupting the overall theme and appearance.

Delivered Product - Mobile

I took the Your Cosmic Consultant website as far as I could go without signing up for a more premium version of Wix that would allow me to change the information on the service list widget. I met with my client to do a quick training of Wix, teach her how to edit the necessary fields and then handed over ownership of the website. In a follow-up email, I provided her with web-ready versions of the service illustrations and her new site ID.

Cosmic Consultant Mobile

Delivered Product - Desktop

Live Desktop Homepage

What's Next?

What I would do with more time:

Delivered Mobile Screens