Greenhills Music School
A responsive booking website for a seasoned institution focused on classical music.
Role
UI/UX Designer
Timeline
December 2023 - January 2024
(4 Weeks)
Tools
ChatGPT, Figma, Giphy, Google Workspace
Responsibilities
User Research & Testing, Data Analysis, Information Architecture, Wireframing, Visual Design, Prototyping
Background
Since the time of founding in 1968, this musical institution has continued to offer lessons regarding classical string instruments and the piano.
Located in Manila, the school is known for utilizing the Suzuki method of learning, and often targets interested youth that can learn from an early age. Students that start out from this institution have gone on to win international music competitions and awards.
The Solution
Create a product that can accommodate a wide range of potential users, and maximize convenience so that users are able to book music lessons in a multitude of environments.
Adaptive Booking Interface
Adaptive and detailed input forms for lesson scheduling
The landing page illustrates and explains what makes this institution distinct
Smartphone Iteration
Enables convenience for users to schedule at their leisure
UI is congruent to the responsive web design
Research Phase
What steps did I take to arrive at this solution?
Competitive Analysis
Various musical institutions in Manila have long-standing websites. Although not all are fully modern or optimized, the ability to stay accessible attributes to their overall reach in drawing in future students.
During my competitive analysis, it was important to take into account two separate facets:
1. The business’ overall offerings
2. The website’s functionality and ability of its UI to represent its brand
Reviews highlighted that having an online presence improved these music business’ success, but the design’s lack of impact implied the possibility of needing improvements.
Greenhills Music School
Utilization of “The Suzuki Method”
Holistic teaching approach has led to successful students
Lack of online presence
Manila Symphony Orchestra Academy
The Orchestra’s website is up to date & easy to navigate
The Academy website is lacking, and is not currently accessible
Music School of Ryan Cayabyab
Contains multitudes of information about programs
Displays contact information to schedule lessons
User Interviews & Insights
I conducted six user interviews with participants associated with the institution. Some of these interviewees consisted of current teachers, the musical director of the Greenhills Music School, and parents who currently have children enrolled.
Because the local business is targeted towards a specific subset of users, I needed their anecdotal experiences to fully flesh out a website that could serve both this specific set of users, and a larger entity.
What kind of website could entice users and help them book music lessons online?
Coming away from the interviews I conducted, I was able to compile the gathered data into two major themes: Specificity & Credibility.
The First Theme: Specificity
Users prefer a straightforward, attractive UI, and minimal workflow, when completing conventional tasks with an unfamiliar digital product.
Female, 58
Music Director
“I prefer going online if the process {to book} is easy! If there’s a lot of details to read and go over, it can sometimes be difficult.”
Male, 43
Student Parent
“I like simple and intuitive websites. Simple websites mean not too many options.”
Clear interfaces and minimal task flows were often seen as favored approaches to booking designs, regardless of the interviewee’s age, job, or other extraneous demographics.
Information should be presented on a need-to-know basis.
Booking music lesson for a child, or for the user themselves, is consciously choosing to take on new tasks on top of a presumed busy agenda.
Providing a booking flow that displays only the needed information, multiple options (adaptability), and alternative abilities to fix mistakes and reach solutions, will ultimately make taking on this new task easier.
Female, 33
Student Parent
“Reservations for restaurants are often easy. {The online flow} only has a few questions, and then the process is over. I also really appreciate the confirmation email, afterwards.”
The Second Theme: Credibility
The quality and reputation of the school were often cited as reasons for choosing the institution. To further infer this message, the website needs to reflect the quality of the institution.
Quality and adaptability were stated to be non-negotiable, whether the user questioned was devoted to cultivating their musical talent or simply indulging in it as a new hobby.
Quality needs to translate into the website’s overall feel, and the adaptability should be indirectly expressed in the booking flow.
Male, 28
Musician
“The reputation of the school is important; The look of the school is important. Also, is the equipment new and up to date?”
Opinions on past booking flow experiences appeared completely anecdotal, with users citing past occurrences that promoted either joy or disapproval. To be safe, the product should be thorough and include an option to “call the institution” in the booking flow to set up appointments; This should help to satisfy all manner of customers.
Music Teacher
Male, 51
“{Websites} feel easy to use when I know what I’m doing… If I don’t know where something is, I’ll just get really lost unless I ask someone with more experience for help. It takes me a long time if I have to sit and figure stuff out on my own.”
Female, 44
Music Teacher
“ {Booking} online seems more convenient since I don’t have to talk to anyone, but my personal experience has made it seem like doing it over the phone has been more so {convenient}.”
Creating responsive web design that highlights the goals and culture of the music school while stressing an outlet of enjoyment and recreation will likely draw in new students.
Once a user has decided to give Greenhills Music School a chance, the only remaining hurdle is booking the initial appointment. To make sure it’s cleared, the task flow needs to be thorough, but simple and feel low to the ground.
From User Input -> Empathic, Empirical Data
Personas
Synthesizing the interview data, I created two personas that would make use of my intended mobile product. These two personas represent two types of clientele that would garner more traffic towards this music school.
The product needs to lend itself to a less tech savvy parent that needs easy workflows while looking modern, sleek, and minimal for a younger demographic. Expressing the quality of the institution is something all parties would want; If there are features that are likely to be favored by everyone, all the more reason to focus and hone in on them.
Consider the persona scenario below:
Iris
Iris is a mother of three young children. She juggles a busy, hectic schedule, but is happy doing so when she sees her family flourishing. Wanting the best for her children, she wants her five year old, the oldest of her kids, to start music lessons.
After beating the heavy Manila traffic, Iris decides to go look up reputable music institutions while cooking family dinner.
Iris has her hands full with her current lifestyle. Any new tasks, or pieces of information, are likely to get lost in the mix. The best way to prevent this is to keep new information as simple as possible.
The question at hand...
How might we create user flows that convey both varied information, but also only necessary information presented in a clean, legible way that will not confuse any user?
Ideation Phase
How did I turn this data into serviceable actions?
Prioritization
Given the scope of the case study, I ultimately decided my focus should be on initial, trial appointments that increase online foot traffic. While brainstorming, I also thought of a booking flow for recurring classes, as well as a calendar sync’ing option for established students. The following are features that are needed to start the site, as well as begin the initial booking flows.
Task Flows
With the booking flow being the central feature, I needed to make sure that the flow was centered around adapting to the user’s needs.
I focused on creating a system of frames that modify themselves based on user input. This way, users are only exposed to text fields and actions that are pertinent to them or their children, and are not unnecessarily bombarded with excessive information.
The booking flow should do its best to not confuse and overload the user.
What follows are two different user flows and experiences based on different user need and inputs. Further attached is a full, detailed user flow.
Short Booking Flow
Long Booking Flow
Design Phase
How did I organize the structure and create the features?
Low to Mid Fidelity Wireframes
I assessed several criteria when working through low and mid-fidelity; Below are the needs I addressed when consolidating all the collected information into physical designs.
The Central Feature: Booking Flow
The booking flow should follow suit with features that successful booking flows already emulate; The interface needs to appear clean, organized, and concise. I wanted to make sure that the user knew where to enter information and continue the flow process.
As bare bones as the low-fidelity frames are, I’ve prepared myself to iterate additional tweaks and features that will make the flow even more intuitive.
I implemented a placeholder for an image. In the same vein that grocery consumers “eat their packaging,” the same effect can be done with the right image by choosing likable wrapping.
Home & About Pages
I would like the home page to, at a quick glance from the user, convey a sense of the experiences a student would receive at the institution.
Below is a rough representation of that; I’d prefer using multiple photos, but need to keep the overall feel “airy” and clean. What is below will likely change.
There is a simple about and faculty page as well. I may combine these together.
High Fidelity Wireframes
The creation of the high-fidelity frames prompted drafting of several frames that would simulate an “if, then” scenario. In the first images of the high-fi frames I’ve provided, the adaptive booking flow’s process is depicted. Much of the text fields would go through similar prompting.
Beyond this illustration, initial user testing of the low fidelity frames prompted several iterations to the information presented in the booking flow.
The questions presented were further specified, and tailored to feedback received from usability testers.
Additional questions were also created to anticipate the details the user will need to input. The order in which certain queries were placed also changed (e.g. The date for the lesson often preceded the choice of instructor, so the date text field was changed to appear first).
These iterations will likely continue to change to generate further optimization, even after the initial rollout of the site.
This question prompts an “if, then” statement, which changes the UI to fit the needs of the user.
What corresponds are two separate outcomes. If a child plays an instrument, the option on the left populates, and if not, the option on the right will populate.
This text field appears if the user says the child has played the instrument.
No additional text appears if the user says no.
Testing & Iterations
How did usability testing go?
I conducted user testing with nine participants, in person and via Facetime video calls.
Usability Task:
Locate the “Book a Class” CTA Button.
Fill out Page one of four: Student Information.
Fill out Page two of four: Pick an Instructor for the Lesson.
Fill out Page three of four: Pick a Date and time for the Lesson.
Confirm the Lesson on page four and provide email and phone number for further communication.
Results and Findings:
At a success rate of 96%, all nine users met the overall time metrics defined as quantitative goals for the user testing.
Listed below are their success measurements:
9/9 users were able to locate the CTA button within one minute.
8/9 users were able to fill out page 1 within 3 minutes. The one who could not, filled out the form on their phone.
8/9 users were able to fill out page 2 within 2 minutes.
9/9 users were able to fill out page 3 within 2 minutes.
9/9 users confirmed their appointment within 2 minutes.
From a qualitative perspective, users were observed and measured on:
How difficult it appeared for the user to get through the text fields & how clear it was that the users understood what needed filling out.
If the overall experience filling out the booking flow was pleasant.
Overall, users found filling out the booking flow “easy” and had no issues doing so. Some had suggestions on the flow’s overall structure, but these appeared as user preferences as opposed to any improvements based on experienced friction.
Iteration Focus & Possible Additions:
As a majority of the suggestions or possible addendums to the product were not flow related, only a few tweaks were made to further cement clarity.
Instead, the new iterations were largely focused on improving the UI experience for the user, and creating an appropriate digital representation for the Greenhills Music School.
Female, 53
School Teacher
“I’m not sure if there should be both a “submit” and a “continue” button. Get rid of one. I also think the button to move forward should say “continue” instead of “submit” until the form reaches the very end. I feel like I’m turning in a bunch of different forms when it’s just one.”
The following items were addressed in the creation of the final frames:
1. Tweaks were made to the UI elements of the booking flow.
2. Overhaul of the landing page, as well as aesthetic choices of the booking flow interface.
Key Improvements
Revamp & Redesign of the Landing Page
After brainstorming speaking with my mentor, I settled on several design choices that would better articulate an established, traditional institution embracing modern trends and capabilities.
A carousel feature was added to the hero image, allowing for both a sleek interface, and for the user to view multiple photos to gauge the institution’s feel.
To add dimension to the school title, a small logo was added and text changes were made.
The “CTA” button was highlighted with the page’s distinct green to give it visibility.
The bottom half containing information about the school was split into sections to make the text more digestible, and less daunting for the reader.
Tweaks to the Booking Flow UI
To give the booking flow visual importance, I removed the piano image on the right side. Replacing it, a small vector, wallpaper of pianos with low visibility was added to imbue a subdued sense of dimension.
The box was moved to the center of the page. Both it, and the corresponding text fields were enlarged to draw focus.
Highlighted frames wre created for each fill in the text fields.
In accordance with user testimonies, the submit button was omitted until the final page. On the last page, the “Continue” text on the button changes to “Submit.”
The text field becomes highlighted to ensure recognition and prompt the user to know where to go next.
Addition of clickable link to read full instructor biographies
To give users access to more information, I added clickable text linking to instructor profiles.
The option appears at the time when a user may have use of it.
Clicking this text leads into further instructor details.
Results & Looking Forward
What’s next for this responsive website?
The Solution
Create a product that can accommodate a wide range of potential users, and maximize convenience so that users are able to book music lessons in a multitude of environments.
Adaptive Booking Interface
Adaptive and detailed input forms for lesson scheduling
The landing page illustrates and explains what makes this institution distinct
Smartphone Iteration
Enables convenience for users to schedule at their leisure
UI is congruent to the responsive web design
Key Takeaways and Future Iterations
Given more time, I would...
Test further iterations of the booking flow and ensure the questions and organization are optimized.
Create an option to sync calendar options with booking appointments. This would be the next feature, as it would greatly benefit users and boost convenience
Consolidate past school photos and place them in a photo gallery on the website.