Serene Spa Design

MY ROLE

UX Designer, Web Developer, Web Designer. Google Analytics and Adwords research, user testing, user flows, wireframing, prototyping, and client presentations.

PROJECT SUMMARY

Serene Spa was a startup spa that provided spa services to a wide range of clients. The goals of This project were to design and implement an effective web presence and selling tool that works on desktops, tablets, and phones. In addition, this website needs to display the spa offerings and an easy way to contact the Spa and book appointments.

PROJECT CHALLENGES

The previous site was difficult to navigate and didn’t prominently display any necessary calls to action (CTA). It was also not very well optimized and poorly worked on mobile. In addition, the color scheme was not appealing, and the booking experience was not easy to navigate. Checkout consisted of a PayPal checkout system that took the client off the site to complete a transaction. Lastly, the client had a limited understanding of the power of a practical, targeted website that works to increase usability and conversion.

Wireframe Services Page
High Fidelity Wireframes

One of Serene Spa’s issues was that they wanted to provide their clients with a way to connect with them from the website. To address this need, I provided them with, at the time, what was a cutting-edge contact us page. I added a Google Call Me button, a Map to their location, and a contact form. This design covered all of their needs, and the layout also included the reservation bar directly under the navigation. Additionally, to optimize all of the real estate on the page, I placed the social media in the page footer. This separate section included newsletter signup and links to the rest of the site. This location was carried out to the whole site and placed where the end-user would expect to find it.

Wireframe Contact Page
High Fidelity Wireframes

I presented Serene Spa with a Square Palette color scheme based on Muted Green (#96D294); this color palette worked perfectly for what they were looking for and led to a complete brand redesign as well. In addition, since there is a responsive site component, I created wireframes and prototypes for desktop, tablet, and phone versions.

Wireframe Home Page
High Fidelity Wireframes

THE SOLUTION

This project was typical of most of the work that I did earlier in my career. The site’s owners wanted to see a few mockups of the site as wireframes, so I created the wireframes and prototypes and added callouts to highlight some of the features they wanted to see. My first order of business was to bring the reservation system front and center. I decided to add a featured area that displayed some of the spas services in action, and I put the reservation system directly under the featured area. I also added a cross-promotional section under the featured location for three of their most popular services. Finally, as a bit of overkill, I included “Book It” buttons under each service that directly sent you to an individual service page with a reservation area with the service preselected.

RESULTS

This website project was redesigned with improved usability and increased conversion rate as one of the many goals. The wireframing allowed the client to visualize the usability and make changes to the design before the actual prototyping phase. The initial strategy was for Serene Spa to perform usability testing before and after the redesign. The pre-testing revealed some of the problem areas of the previous design (see Project Challenges). The testing after the redesign showed a 30% improvement in user satisfaction. Unfortunately, booking an appointment pre-redesign timed between 3-5 minutes, causing increased user loss and an increase in phone and support calls. With the updated changes to the navigation and booking system, I could get the time to booking down to a little over 2 minutes. We also decreased the time on page 15% and reduced the bounce rate by over 30%. 

This project was an all-inclusive redesign that allowed me to show my UX Design skills and flex my branding and web development chops.

DRT Footer Logo