Creating an Appointment Booking Feature
The goal of this project was to build a responsive website for a business of choice.
Project
Academic
Role
All aspects
Timeline
Approximately 80 hours
Tools Used
Figma, Figjam, Illustrator, Photoshop
The Problem
Limited web presence and expected features
Glamor Nails & Spa is a real-life family owned and operated business. The owners want to find ways to run their business more efficiently so they can expand. Their website is a very basic Facebook page with very little information for new clients. Clients can only book an appointment by calling or walking-in.
Discovery
Competitive analysis
To get a more comprehensive look, I analyzed both salon websites and booking software. My goal was to investigate how salons use their websites to gain new customers. In addition, I investigated what features booking applications offer. View competitive analysis.
There were many common features among booking software: appointment confirmation & reminders, appointment history, and client notes. Some unique features were waitlists and gap times between appointments.
Salon websites also have common features, though I found many salons didn’t have websites at all. Online booking, service descriptions, staff descriptions, prices and photos of client results were typically available on websites.
User Interviews
Investigating website and booking expectations
My biggest goals during my interviews was to determine what information users look for when choosing a salon and what their experience and expectations are when booking online. I had 5 participants between the ages of 34-64. The biggest challenge here was finding a male perspective.
Analysis
More information for easier decision making
Information was key for users. They needed to know the salon’s services, expertise, and values. They sought to understand the level of customer service, cleanliness, and personalized attention. Reviews were especially important to users. Background on the staff and photos of client results helped the users feel more connected to a salon. Surprisingly, users were only slightly biased towards having an online booking feature. View affinity map.
Personas
The prospective & recurring client
I ended up with two personas with different needs. First was a prospective client who was focused on gathering information to make an informed decision. The second was a current client who needed additional booking methods for increased convenience. View personas.
The Solution
A dedicated website & booking feature
The business goal was simple: growth. With a website, the salon would increase their visibility and provide relevant decision-making information. They would also build confidence with potential clients by providing user reviews. Creating a booking experience would help entice new clients and make it easier for current ones. Since the booking feature was the most complex part of this solution, I mapped out how to create and modify an appointment. View task and user flows.
A simple feature set
I focused on a minimum viable product that would build a strong foundation. This included the most relevant salon information as well as a simple appointment and appointment modification feature.
Wireframes
Mobile first with select web screens
I believed users would lean towards using the mobile site, so I mapped out the task flows for the booking process with just a few key screens for the desktop version. View mid-fidelity wireframes.
Final Design
Working with existing branding
Since Glamour Nails & Spa is a real-life business, I have to incorporate their branding. The salon had very minimal branding to work with—there was only a logo. Figuring out how to make my design feel true to their branding was quite difficult. I ended up adding a black version and a white version of their logo to give myself a bit more wiggle room in my design. View final wireframes.
Usability Testing
Testing goals
The focus of this test revolved around the ease of booking and modifying an appointment. I sought to test my navigation, as well as uncover points of frustration or misalignment with user expectations.
Analysis
User suggestions
Luckily users did not express many frustrations with either flow. They did, however, have suggestions of things they thought would be helpful to add. I narrowed down potential improvements and prioritized my efforts using an impact/effort matrix. View impact effort matrix.
Revisions
Small changes for a better experience
I chose five revisions that I felt were impactful. For example, users suggested adding information on each staff member during the appointment booking flow. While they could find this information on the main website, they said they would have trouble remembering that information.
Takeaways
What if this was a real client?
My intention with this project was to mimic a realistic scenario—doing freelance work for a small business client. Choosing an existing business helped me think through realistic constraints. In this hypothetical scenario, I was working with existing but very limited branding. In reality there would be even more constraints, such as time and budget. This project was also interesting because so many great booking programs already exist. If this was my real-life client, I would have considered different paths like integrating an existing software into their site.
Some Other Projects
Creating clarity through improved alert messaging.
Empowering users for more efficient software testing
Enhancing independent language learning through stories.