Overview
HatchBridge Incubator is a company within KSU that hosts a design competition called the Designathon. My team and I participated in their second ever competition. For the event, real startup companies present their products and then give the competitors 1 week to complete the design task. This semester, the challenge was to design a landing page for the company of our choosing.
My group and I chose to design for the company Spectrum Play. The company was founded by an elementary school music teacher, Erin Collins, and an instructional design professor, Dr. Tiffany Roman. The main purpose of the company and the product is to make learning music fun and easy for children. To do this, they use colors for note notations instead of letters.
The Process
The first thing my team and I did was look at the existing website that Spectrum Play had so that we could get more details about their company. We looked through all of this important information and identified the key features that we wanted to include in our design. After this we did some brainstorming and came up with a few layout ideas and talked about what worked and what didn’t.
Creating a Persona
Part of our process was creating a user persona that we could refer to when creating our design. We wanted our persona to reflect the goals of the company and to have a relevant demographic to the brand we were trying to design for. We ended up with a persona named Emily Carter, who is an elementary school music teacher.
Designs and Challenges
From there, we moved to Figma where we designed our landing page. We went through a lot of different ideas with the ordering of our information, colors schemes, interactions, etc.
In the end, we designed a colorful landing page that represented SpectrumPlay’s brand and incorporated the information that they felt was important to them. The founders appreciated that we kept their slogan in the hero section the same as their original website.
One challenge we came across was the background for the hero section. There was a lot of negative space on the right side of the frame that we knew needed to be filled. We tried several different designs like some simple shapes with the background blur effect, but nothing that we tried was representing the brand like we wanted it to. Eventually we had the idea to create the interactive keyboard component that raises the keys when the user hovers over it. We also incorporated the actual product and color coded each key as the real user would. For my team, I created the keyboard component, the piano shape behind it, and the music notes.
Since we were given only a week to complete this challenge, there were a lot of things that were left out of the design process such as usability testing. If we were to continue iterating our design, we would test our prototype with users and make observations. Preferably, our target users would be music teachers or those involved in early education. In addition to usability testing, we would also look into redesigning the information architecture to have a better flow through the layout.
%402x.svg){kind=icon}