interactive prototype mobile app | ux/ui design | adobe illustrator + adobe xd

go to interactive prototype


Fusion, was a school project for the Interface Design class at SFU. We began by exploring different domains that we could develop an application for and we decided upon “personal development”. Because most of our group had learned instruments at one point in their lives, it was a natural progression towards creating an application that was focused in that area. Our application that we began conceptualizing was a tool that was to be used by musical instructors in cooperation with students that were learning an instrument. This tool was to focus on the connection between both these parties and as a communication and organizational tool.


We initially began doing some research with musical instructors that we knew, and people who had been learning instruments currently or in the past. Through that research we found several common goals and frustrations among both the students and teachers.

The teachers wanted to know whether their students were practicing their homework, and they also wanted a way to manage their scheduling with their large number of students. The students wanted a way to receive additional feedback outside of lesson time, and a way to increase motivation/engagement in the homework/practicing they were supposed to be doing.

With these goals in mind I began creating the experience maps for some basic tasks they could complete based on the goals that both the students and teachers had. These maps were made in Adobe Illustrator.

gray box wire-flow prototypes

After working out some of the main goals that our teachers/students had intended to be able to complete. I began building the initial wire-flow prototypes for some of the different tasks they would be completing. These prototypes were made in Axure.

initial mockups after prototypes

A lot of our application was focused around the teachers ability to manage their schedule and allow students to book lessons through the application. After some feedback from our professor and a few other people that looked through our prototypes, we decided to tighten our scope, and remove the calendar/schedule functionality. This lead to a more minimal app in terms of features and an easier experience for the new users who were learning our application. I began to build some of the initial mockups for what the main navigational points would look like. We had 3 different navigation points (from the student perspective) - the dashboard, which displayed your assignments for this week, your archive of assignments, and your profile. Everything from here on out is made in Adobe XD.

reworking the main pages

We found quickly into our prototyping before we even tested with other people that having 3 different sections that were showing similar content was not a good solution. We decided to combine the 3 different sections into one large scrollable section and removed the navigation bar.

final interactive prototype

This is the final interactive prototype involving all of the different screens that we built. I focused mainly on the dashboard, recording and annotation screens. But I created all of the interactions and the overall map of how things were connected. You can interact with it below - the blue boxes show you where the interaction points are.

go to prototype in external link


This project taught me how to ideate through multiple iterations of a design. The initial research we did helped us begin to shape our idea but in the end, the application was a lot more defined than when it started. I learned how to manage the navigational flow of an application through many different screens and what the best approaches were for making that a pleasant experience for someone. Consistency and details had to be applied throughout the application for it to feel cohesive and this was a challenging exercise in making sure that that was achieved throughout the entirety of the application.

next portfolio piece: guitar to piano tool