Saguaro Skin Bar website design

Project background

Saguaro Skin Bar, a leading medical aesthetics brand, seeks to establish an online presence through a beautifully designed and user-friendly website. This website will serve as the cornerstone of the brand's online identity, providing comprehensive information about services, products, and the brand's philosophy. The website aims to enhance customer engagement, streamline appointment bookings, and showcase the expertise of Saguaro Skin Bar in the field of medical aesthetics.

Problem statement:

The owner of Saguaro Skin Bar currently does not have a website and would like to establish one to streamline the booking process for clients, accentuate their brand identity and provide descriptions of their services and products.

Project goal:

Design a responsive website that accurately portrays the brands aesthetic, provides clients with an user-friendly booking service, display information on services and products offered, and make navigation seamless.

Key objectives:

  1. Brand identity & aesthetics:

    Reflect the unique identity of Saguaro Skin Bar, combining modern design elements with the serene and sophisticated essence of the brand by using high-quality images, a cohesive color palette, and stylish fonts to create a luxurious and professional look.

2. Service & product information:

Provide detailed and accessible information about the services offered, including treatments, procedures, and products. Create dedicated service pages with descriptions, benefits, and FAQs. Include before-and-after photos and customer testimonials.

3. Appointment booking system:

Enable users to book appointments online with ease by integrating a user-friendly booking system that allows customers to choose services, preferred dates, and times.

4.Customer testimonials & reviews:

Build trust and credibility through customer testimonials and reviews by featuring client testimonials prominently on the homepage and service pages.

5. SEO optimization:

Improve search engine visibility to attract more organic traffic by implementing SEO best practices, including keyword optimization, meta descriptions, alt tags for images, and fast loading times.

Creating personas

Following the identification of the key objectives of the website design, I created two personas to represent the targeted clientele of the Medical Aesthetician. Each persona plays a crucial role in the need of specific features that will streamline the appointment booking process, provide a positive user experience and keep them up to date with their provider.

Some of the key features that are important to our personas are:

-Ability to easily book appointments online

-Locate information on services and products

-Read testimonials about their provider

-Locate information about their provider such as social media links and their biography

Wireframing & prototyping process

Once the key objectives were established and the personas created, I began the wireframing process. For this application, I envisioned a couple different ways I wanted the screen to layout and progress as the user scrolls down the page. I drew a handful of sketches, selected my favorites and turned to Figma to begin imputing them digitally.

When creating the wireframes, I knew there were certain elements I wanted to include such as: a large banner of a branded image, about me section for the provider, a scrollable carousel of the services offered and multiple call-to-action buttons to book an appointment. Once the main screen was completed, I also added in a section that list out the brands the provider is partnered with and a feature of their brands Instagram page. After a few iterations, I landed with a stream of wireframes which led me to the user flowing testing stage.

Usability testing phase

Once I had a satisfying user flow demonstrated throughout my low fidelity prototype, I conducted a usability study to test a list of questions I wanted answered:

  1. Locate where you can book an appointment.

    2. Locate & select a service you would like more information on

    3. Locate where you can find the brands Instagram feature


Iteration

After the usability study was completed, I decided to iterate on a few elements to improve the user experience. One example is I placed a call-to-action “book an appointment” button under the service carousel and in the services tab, rather than having one on each part of the page. I added a separate tab at the header for a “services” tab and simplified the carousel for the Instagram feature to their 8 most recent posts.


Final testing

After the implementation of the needed design iterations, I conducted an moderated usability study to test the product before final launch. Refer to the image below of the moderated usability study which includes the introduction, research questions, KPI’s, methodology, participants, script and schedule.

Final product

Key features

  1. Appointment booking system

The integrated booking system automatically redirects the user to the providers third-party booking website.

2. Service & product information

Users can easily locate information on services and products by using the scrollable carousel or clicking on the “services” tab.

3. Instagram feature

An Instagram feature was added at the footer to display the providers 8 most recent post to boost their marketing.

4. Customer testimonials & reviews

Users can now see client testimonials and reviews by clicking on the “testimonials” tab, on the third-party booking website or on the providers Instagram.

5 . Brand identify & aesthetics

The brand has a very specific desert themed that is captured throughout their website to tie into their established online presence and practice.

Humanizing the design process

Humanizing the design process