Serene Spa Prototypes

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.

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.

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.

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.