Hinna
Your guide to organized music lessons.
Toronto, Ontario, Canada
Music/Education
Introduction
ABC Academy of Music entrusted our team with designing HINNA, a platform aimed at enhancing their online music education experience. As the team lead and UX Designer, I guided the early stages of this project, ensuring a user-centric approach while fostering collaboration among team members. This case study highlights my contributions to research, design, and leadership throughout the project.
Problem
ABC Academy of Music needed a platform to simplify the process of connecting students with instructors while maintaining a cohesive digital experience. The challenge was to design a user-friendly interface that accommodated diverse user needs—ranging from scheduling lessons to managing payments—while ensuring scalability for future features.
Objectives
Establish a cohesive brand identity to build trust and recognition.
Design a scalable framework that supports future platform enhancements.
Deliver clear and actionable style guidelines, wireframes, and prototypes to facilitate seamless development.
Create an intuitive user experience for both students and instructors.
Scope & Goal
This project focused on developing the foundational elements of HINNA, an online platform for ABC Academy of Music. As the UX Designer and Team Lead, I aimed to create a cohesive design system and deliver key assets, including brand guidelines, wireframes, and high-fidelity prototypes, to ensure a seamless user experience for both students and instructors.
Tools
Miro
Figma
Adobe Illustrator
Team
3 UX/UI Designers
My Role
Team Lead
UX Design
UX Research
Workshop Facilitator
Timeline
Overall: 4+ weeks
Discovery & Research: 1+ weeks
Design & testing: 3+ weeks
My Design Process
1
RESEARCH
2
BUILDING A STYLE GUIDE
3
SKETCHING
Research
Our research phase began by understanding the needs of ABC Academy's diverse user base, including students, parents, and instructors. Through stakeholder interviews and competitive analysis, we identified key pain points: a lack of intuitive navigation, inconsistent branding, and insufficient accessibility features. These insights informed the design direction and ensured the platform aligned with the academy’s educational goals.
Competitive Analysis
To determine our project's direction, we analyzed our competitors' strategies, categorizing them based on what we deemed essential for our product. This process streamlined our selection, enabling us to draw inspiration from the most valuable features and attributes for our own endeavor.
Wellnessliving Wellnessliving provides a user-friendly experience for booking appointments and managing staff schedules. The interface makes navigation straightforward, although some actions could be more clearly categorized. Calendar management is simple and efficient, with tasks clearly defined. While the customer/staff database works to a certain extent, it struggles to support the specific needs of music instructors. Communication tools are accessible and effective for both staff and clients. The UI design combines contrast, shapes, and typography well, creating a satisfying visual experience. From a UX perspective, most tasks are easy to complete, but categories could be more logically structured. Mindbody Mindbody offers solid functionality but suffers from a steeper learning curve. Scheduling is possible, but the layout can be confusing for new users, and assigning employee tasks is daunting. Calendar features are less intuitive than competitors’, and editing appointments is not always straightforward. The platform lacks clarity around instructor and category limits in the database. While contacting staff is easy, reaching out to clients is hindered by unfriendly navigation. The UI design feels flat and dull due to a lack of visual hierarchy. UX is weakened by distant buttons and a confusing interaction flow, which can mislead users. Fons by MakeMusic Fons delivers a well-rounded user experience by combining ease of access with solid scheduling tools. Both staff and clients can manage calendars effectively. Employee scheduling is intuitive, with features like shift swapping and time-off management handled smoothly. The calendar page is well-designed for both staff and clients, offering seamless task and event management. Its database stores client and appointment information on the home page for quick access. Communication tools are intuitive and include a clearly displayed conversation tab for streamlined messaging. Visually, the platform uses color and typography well, guiding users’ attention. UX design aligns perfectly with user goals, offering low-friction interactions. My Music Staff My Music Staff simplifies studio management with automatic event scheduling and a strong calendar system. Employee scheduling is efficient, allowing for task assignments and easy event tracking. The platform enables users to coordinate lessons and events with customizable views and color-coding, improving clarity. Its centralized database includes client and instructor information in one secure location, streamlining access. Communication tools are robust, offering seamless contact with students, parents, and staff via email and notifications. The user interface is clean and intuitive, supporting a clear visual hierarchy. UX flow is polished, supporting task completion with little resistance and fostering delight through smooth interactions. Mangomint Mangomint provides efficient appointment scheduling and staff calendar access with built-in reminders. Employee scheduling tools are straightforward, and features like time-off and shift swaps are clear and easy to manage. A centralized calendar view helps with event planning, and external syncing with Google or Outlook is supported. The client and employee database is well-organized, storing appointment history and other essential data. Built-in messaging and communication tools make interactions with staff and clients simple, although some elements feel more scan-focused than immersive. Visually, the UI is clean and consistent, using typography and layout to highlight priority actions. UX design is minimal and frictionless, with clear guidance throughout. |
|---|
Ideation
Using insights from the research phase, the team brainstormed solutions to address the platform's primary challenges. Through collaborative sketching sessions and whiteboarding, we explored multiple design directions. This process led to the development of a design system that prioritized simplicity, accessibility, and a modern aesthetic tailored to the needs of ABC Academy’s users.
Brand Style Guide
Sketches
With a general concept in mind, we returned to the fundamentals, opting for pen and paper to draft a preliminary sketch of our main screen. We carefully considered the features from our competitors that we deemed effective, ensuring they were incorporated into our design.
Digital Sketches
Following the paper sketch, our next step was to swiftly create a digital representation to verify that the dimensions envisioned on paper would translate effectively to a digital format. Once we refined the basic measurements, we commenced the wireframing process.
Wireframes
The initial wireframes were created to visualize the platform's core structure and user flows. These low-fidelity designs focused on simplifying navigation, enhancing accessibility, and providing clear pathways for different user types. Each iteration was refined based on team feedback to ensure alignment with user needs and project goals.
High Fidelity Wireframes
The initial wireframes were created to visualize the platform's core structure and user flows. These low-fidelity designs focused on simplifying navigation, enhancing accessibility, and providing clear pathways for different user types. Each iteration was refined based on team feedback to ensure alignment with user needs and project goals.
