Harmonia

Illiac(soon to be Harmonia) is a project currently under development for Illiac Software. Harmonia is a desktop and iOS application for teaching and learning music theory and composition that offers real-time playback and feedback notations. It is also a complete classroom management tool for testing and grading.

I was contracted to improve branding, usability, UI design and user satisfaction for the website and desktop applications.

The Harmonia team and I agreed that simplification and a clear division between the dashboard, and the rest of the website was vital. Below are the results of a total site re-organization as seen through the proposed navigation menu. Plus a name change to Harmonia!

 
The logo is still being worked on but this is my favorite so far. I wanted to merge a treble clef into the name. See it?

 
These are some of the wireframes for the dashboard part of the website. Designed collaboratively with Figma.

 

In speaking with teachers currently using Harmonia we noticed a challenge around students connecting their accounts to their class. A sixteen-digit pin was generated by the teacher who then gave it to the students to make this connection. As an improvement, we built a system that allowed the teacher to send email notifications to all students who would then be able to connect to their class by simply confirming in the email.

I put a lot of thought into the decisions I make. I have annotated these decisions, ideas, and questions for further discussion in blue alongside the wireframes and mocks. This works well in tandem with Figma’s commenting system as we are all remote team members.

 
The design system is built alongside the high-fidelity mockups.

 

We needed a consistent source of on-brand art.

I developed a guide for photographic treatment that gave us recognizable on-brand art to be used throughout the website and marketing channels. With a limited budget, this allowed for other non-artist to create graphics and did not require a large custom art expence.

 
Selecting fonts, colors and spacing in a design tool is ok, but so much better when you are can see these choices in a live browser. Especially when designing a website. Though I declined to code this website, I couldn’t resist building out a page to fine-tune my choices and see how the elements render in the browser on a variety of devices. This is also a great tool for communicating processes between the developer and I.

 

High-fi Mocks. The Dashboard pages, seen with the darker sidebars, now have more visual similarity to help unite the dashboard with it’s desktop software.