Back to top
Web Design | Web Development | Branding
Revitalizing a music school's website and brand to showcase the school's unique offerings
A complete website redesign and build including a much-needed events app built with Glide Apps.
I assumed the following roles designing this website:
User Experience (UX) Designer
Interaction (IxD) Designer
User Interface (UI) Designer
User Journey Mapping
Site Map & Wireframes
Glide Events App
Framer for Prototyping & Development
Duration: 8 weeks
with the current site:
Large existing site not functioning well for its users
Not attractive or user-friendly therefore not reflecting the amazing work of the teachers at this school
Much of the content on the site required knowledge of the subject area making it intimidating to new potential families
for the new site design:
Design a fully responsive website for the music school which portrays their program offerings
Maximize the effectiveness of the school's web presence for current families and potential new families
Make the site attractive, accessible, approachable, and easy to maintain
Gaining empathy through research
Through my research, three main areas of focus emerged:
Branding | Decluttering | Clarifying Function
Site Organization & Simplification
Site mapping & Wireframing
I started with an initial draft of a site map that I thought addressed many of the school's initial complaints.
However, after some back-and-forth and discussion, I decided that it would be beneficial to simplify the site navigation even more.
This site map, informed by surveys, interviews, and discussions with the school's directors, reflects our work on simplifying the site navigation. I was able to incorporate wireframing into this iteration in order for the school's directors to have a good sense of the functionality of the finished site.
Because of the relatively quick turn-around on this project, I felt that this low-fidelity wireframing could take the place of sketches.
Visualizing a Consistent Look & Feel
Creating components in Framer
Below, you will find a side-by-side comparison of some areas of improvement. These improvements were made possible by developing reusable components in Framer thus giving the site a more organized, calm, and consistent look.
New, Simple Events App
Looking for a solution
I came to realize that a website alone might not achieve what this school is looking for. I began to research ways that they could highlight past events, market their offerings, and display information.
I envisioned a product that would allow families to communicate directly back to the faculty without having to use email.
I used Glide Apps along with Google Sheets to create an events application for the current families and students.
Meeting the needs
Easy for the teachers to add events:
The Glide app's data is connected to a Google sheet which the teachers are easily able to access and add events.
Each parent can download right to their personal devices.
This is a Progressive Web App meaning it is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices. As the developer, and users will be able to add the application to their home screen
Easy for the parents to search and respond to events:
I set up a feature in Glide that allows the parent to respond/register for events.
Search all events or filter by category
Teachers can be assigned special user roles therefore giving them the ability to add their own events directly from the app.
Families can register, edit the registration and see all of their events in their profiles
Feedback | Iteration | Improvements
I am in close contact with the directors of the school and we continue to tweak the new site. They are thrilled with it so far!
They love the organization of the content and the fact that the events piece is now separated from the website...therefore decluttering the website.
I plan to continue learning and building more Progressive Web Apps in Glide and other low-code tools.
Perhaps my biggest takeaway in this project is the realization of how important communication is when dealing with clients. Being in close contact and really listening are the most important factors in determining a successful outcome of a project.