High-Fidelity Prototype
Description of Project
My goal for this project is to design a website/platform where people of all backgrounds and ages have the ability to learn how to play an instrument at any level without any cost, can view pre-recorded lessons with instrument-learning basics, can schedule live lessons with a teacher they can match with, and have unlimited access to a high quality, large database of sheet music for any instrument.
Purpose of High-Fidelity Prototyping
The purpose of making a high-fidelity design is to test the functionality and accessibility of the final design you have created, that would be close to the final product. Additionally, it gives developers a clear vision of what the website or application would look like. You can also visualize the clear journey a user may take, and see whether or not the flow is ideal.
Design Process
I used my paper prototype as a reference to create this design. I utilized Figma to first create the design system (view here), and then incorporate it with all of the tasks I have proposed. With the feedback I received from the cognitive walkthrough we did in class with two other students, as well as my impression testing and feedback from the low-fidelity prototype user testing, I was able to create my final designs.
Main Tasks My Prototype Supports
- Signing up + Onboarding
- Viewing and searching through a sheet music database, markup of sheet music
- Teacher search and booking lessons through a modal pop-up
- Searching through the Academy with courses that include pre-recorded lessons
Additionally, my prototype supports:
- Viewing the homepage signed in/signed out
- Signing in
Links to Figma File and Prototype
Link to Figma File, includes all frames of tasks the prototype supports.
Link to Figma Prototype, clickable prototype of the tasks
Wireflows of Main Tasks
The wireflows can be viewed in the Figma file in the “Wireflows” page. I separated the wireflows into each task so that it is easier to take in. I excluded showing the searching capabilities of the search bars, but they are clickable in the interactive prototype. Additionally, I have the arrows in lower opacity to indicate a flow going back for readability.
01. Sign up + Onboarding
02. Sheet music database, searching a song, viewing a song
03. Teacher search + booking lessons
04. Academy, browsing courses, course lessons/playlist
Cognitive Walkthrough
Data from the cognitive walkthrough can be found here.
Overall, the cognitive walkthrough went well. There weren’t many issues when my testers went through my prototype. I think one issue was that my testers could not find any issues, or at least did not mention any issues. Since that was the case, most of my iterations came from the feedback I received from the low-fidelity prototype testing, which will be in the next section. Next time I conduct a cognitive walkthrough, I think I would ask more questions specific to my design that would lead to more constructive criticism and feedback.
From the cognitive walkthrough, I found that:
- My testers understood the purpose of my website.
- Both of my testers believed that “in terms of navigating the website, the breadcrumb indicates the progress well.” They liked the breadcrumb feature I added to the website.
- My testers think that the clickable buttons were clear.
- One of my testers stated that the “Home page is really colorful, inviting, and well done. Instantly get the impression that its a well-made credible resource.”
From realizing that a breadcrumb makes it easy for a user to go back and visually show their progress in the website, I decided to add a breadcrumb for every feature, like below.
Additionally, since I learned that seeing progress is important, I decided to add a progress bar for the onboarding screens and the scheduling lesson modal screens, like below.
Iterations
From the feedback I received from the low-fidelity prototype testing, these were the functions I added.
1. Add genre to sheet music filters
2. Markup/note-taking feature on sheet music
3. Download as PDF feature for sheet music>
4. Add times available filter for teacher search
5. Additional comments feature when scheduling a lesson
6. Include level of course for the Academy courses
Usability Testing
Usability testing details can be found here.