Resonance Music Academy (RMA) offered private lessons and Kindermusik to as many students as possible. When their business model shifted focus to training fewer, more elite students, they needed a complete digital redesign.
Original Website Design
The previous RMA website betrayed its lack of style guide and brand identity. Though information was presented relatively clearly, inconsistent color and typography communicated a lack of prestige and legitimacy. Large blocks of text and clinical forms left users with an experience that lacked any unique impression from the music studio.
Original Website Structure
Limited information on lessons and extensive information on a niche Summer Opera program left the RMA website improperly aligned with the goal of attracting high caliber piano and voice students. A news section without content gave the impression that the site was outdated, reflecting poorly on the quality of instruction.
Target Audience and User Personas
The target audience for RMA was developed using demographic information from the surrounding area, existing client information, and research on likely candidates for private music lessons. Ultimately, the target audience consists of parents and students with existing musical talent/interest, disposable income, and participation in a variety of school activities.
User Personas
I developed the above personas to represent parents that elect students into lessons and students that self-elect into lessons. Primary user goals center around time-management, improved musical skills, and ability to achieve success in music.
Competitive Analysis
Competitive Matrix
Feature Comparison
Key Features to Include in New Design
Online payment option
Highlights and photos of students and performance opportunities
Reviews and quotes from students and parents
Information Architecture
I developed a sitemap to describe the contents and structure of the new site. Lesson information was organized by student type, allowing for more precise searches for users with specific goals. Information relevant to current students was moved to a separate page to eliminate distractions to new user conversions. Online payment was integrated into the site upon request of existing users and analysis of competitive features.
Happy Path User Flow
I generated the above user flow which illustrates the path taken by the ideal student (or their parent). Users land on the homepage and either navigate to learn more about the academy or select the lesson type they are interested in. Once finished with the lesson page, they follow the call to action leading them to fill out the form on the contact page. I developed edge case user flows and paths of non-ideal students as well to further explore site structure and content needs.
Creative Brief
I scheduled a consultation with the studio’s owner to gain a clearer understanding of RMA’s future and brand identity. From this, I created a brand attribute presentation and worked with the owner to agree upon a set of specific terms to capture the tone and feel of the new RMA.
Mood Boards
I developed a set of three distinct mood boards based upon the brand attributes and my conversations with the owner. Each existed on a spectrum from classic to modern styling and included detailed explanations of how color, form, and typography would be used to communicate the brand attributes. (Bottom: Chosen Board)
Initial Sketches
I created numerous sketches to quickly iterate upon ideas for content structure and user interface aesthetics.
Wireframes
I presented these low-fidelity wireframes to the studio owner to illustrate the proposed content layout and emphasis. I included example content to showcase the tone of voice that best fit with the messaging discussed in the creative brief.
High-Fidelity Screens
To provide the studio with further options for the visual design, I created three versions of the home page to illustrate what emphasis on different shapes and lighting would result in.
Final Designs
The new RMA website focuses on clean, clear content with plenty of whitespace and well-utilized CTAs. Content for the site strikes a formal, informative, and enthusiastic tone. Imagery captures the aspirational nature of lessons and the goals of many students. A neutral color palette with pops of orange emphasizes creativity and sophistication.
Desktop Designs
The homepage (left) introduces site content and features a large CTA segment beneath inspirational customer reviews. The current student page (middle) offers online payment and performance/studio updates in a clean, simple format to improve ease of use. Lesson pages (right) for piano and voice provide a succinct description of lessons and showcase multiple examples of real student achievements with RMA.
Success Metrics and Desired Results
The redesign of RMA’s website communicates an elevated prestige and more clearly expresses lesson results to parents and students. The goal of the website was to attract conversions from few, highly motivated students. The following metrics are being monitored to determine the success of the redesign.
Quality of Lesson Inquiries (As determined by specificity of goals for lessons)
Site Traffic and Bounce Rate
Conversion Rate (Lesson Inquiry)
Length of Lesson Engagement vs. Prior Student Average