Design Thinking, UI, Layout, Hackathon

Alto is an application designed to improve your mood through the power of music and by exploring the world around you. This mockup shows the layout and concept of this application; created in a 48 hour time slot.

Preview of final project. Project Preview


This project took place at the TD Mars Hackathon in 2018, with the end result being a high fidelity prototype which was made in hopes to innovate and create something to enhance our culture and wellbeing using music, data and technology.


My Role

I ideated heavily with the group and organized/managed everyone, making sure we were on time and on-task. I was also responsable for writing one of the personas and designing how they were presented. I also had a hand in designing and polishing the layouts and overall design of the pages. In addition to that, I pitched and presented the final project to a random assortment of judges with another team member.

How might we create a data driven, technologically connected city that is inclusive, safe and vibrant for everyone that calls toronto home? What innovations and technologies will help torontonians live better lives?

Tools & Programs Used


We began by brainstorming our concepts using sticky notes, and trying to find an answer to the above question. As a group, we spent a few hours gathering information and reframing the question to create some kind of concept. I kept the group in check, tying our concepts together, and making sure we remained within the boundaries of time and what our clients actually needed.

Black and white, sticky notes on a glass wall.


Our ideas diverged into two main concepts with our prevailing idea being the concept of Alto; a tailored playlist experience that influences your mood through music. We divided the work and researched our idea to find the extent to which it could be produced.

Mockups & Personas

We started by thinking through our concept and figuring out our target user base. We not only wanted to target casual music lovers, but people who commute and casually listen to music as well. We designed 3 personas to help this process, targeting middle aged commuters, highschool teenagers, and a university student with a hearing impairment.

A test render of the visuals.
Illustrations provided by


As we continued to research and conceptualize, we began going very much out of our scope of possibility. Some of our concepts being plausable but reliant on many other factors that we did not have access to. In addition to that we found that our knowledge of the music industry and copyright was lacking and needed to be more thoroughly researched.

Scalability Solutions

We dedicated one of our members to gathering and sharing research and we continued to think through those concepts, seperating them from our core concept. Those "Scalable Solutions" became possible expansions in the future, if the project were to be created. Some of our ideas included an algorythm that could synthesize music into phone vibrations, allowing deaf individuals to be able to feel the music instead of hearing it using a smartphone. As well as possible events, games, and community experiences that we could create using our initial concept.


This finished high-fidelity mock-up shows how the application would look and function with some of the basic features, and excluding any complexities.

View on InVision

Product & Pitch

In the end of the 48 hours, I pitched the demo and a presentation document to a selection of judges with another group member. The application was never produced further than this conceptualization, but we were able to take a simple concept and idea into a fully realized design, and Mock-up in the time provided.

Final Conclusions

After the hackathon had ended and I had a chance to thoroughly look through and analyse our work, I found that we spent too much time in the ideation and conceptualization phase, which hindered our actual production and creation time. I also found and realized how important group communication was, in which my group was constantly bouncing ideas off one another and keeping every individual in the loop.

Endless Moji: a web game to teach users Japanese letters...

To Top