I spent the first week researching the existing field and learning about what resources users currently have access to. This allowed me to uncover possible market opportunities, which I then assessed by interviewing potential users.

Competitive Analysis

User Interviews

To better understand my users and their needs, I planned on conducting six different interviews with motorcycle riders. However, after a few interviews, I uncovered riders' interest in using smaller mechanic shops, so I shifted my interviews to include 4 motorcycle riders and 2 mechanics. I am not very familiar with how mechanic shops work, so I paid special attention to the mechanics to increase my empathy towards them.

Interview Results

These interviews have revealed that current riders use multiple sources to learn about and store information about services, and that they share my frustrations in storing these. Many prefer to do services themselves, either to develop the skill or to save money. Aside from simple tasks like tracking their MPG, riders want to but don't keep up with the suggested bike maintenance, which results in overdue services that could harm their bikes.

These results have validated my prediction of a need for this app, but the information needs to be sorted and further analyzed to be more useful.

Affinity Mapping

In order to sort and condense all of the insights gained from the user interviews, I wrote down the participants' behaviors, needs, goals, and frustrations on post-it notes. I then grouped these into similar categories in order to visualize what features to include and to assist me in prioritizing these features.

User Personas

With such varying needs of users, I felt that creating three different personas was necessary. These personas helped me focus on potential users, which aided me in deciding which features to add or remove.

For an example, I was originally thinking of making the mechanic feature a larger focus of the app. However, if Loren, one of my personas, would open the app simply for notes on one of his project bikes, finding a mechanic wouldn't be an appropriate focus. Considering this, I decided to add a separate page for mechanics.

Initial Wireframes

By utilizing my user flows, I began sketching screens using a marker and paper. I then transformed these sketches into basic wireframes in Figma. This allowed me to better visualize the proposed user flows and to fill/adjust the flow as needed.

Mid-fidelity Prototype

After using the wireframes to better understand the flows users will take, I started to develop the functionality of each screen, and began to create the visual hierarchy of each screen. At this point, I regrettably spent too much time focusing on the appearance/theme of the app, and ended up completely changing it afterwards. In future projects, I will focus on prioritizing functionality over appearance, especially before running initial usability tests.

Usability Testing

Using the mid-fidelity prototype, I conducted usability tests to uncover and fix any usability issues. I recruited three different motorcyclists to test my prototype, as well as two aspiring motorcyclists. I realized that some potential users might be just getting into motorcycles, so I wanted to gauge how user-friendly the app was to those who aren't familiar to motorcycle lingo/practices. The tests were held in two different quiet cafes, during slow hours.

Test Results

The usability tests for MyGarage were very useful, as I was able to uncover multiple features that could be improved. While no catastrophic errors were found, I was able to improve several minor and one major usability problem. I used the severity rating scale created by Nielsen Norman to see what errors should be prioritized.

Nielsen's severity rating scale

0- I do not agree that this is a usability problem at all.
1- Cosmetic usability problem: Need not be fixed unless extra time is available on project.
2- Minor usability problem: Fixing this should be given low priority.
3- Major usability problem: Important to fix, so should be given high priority.
4- Usability catastrophe: Imperative to fix this problem.

Iterations

Iterations have subsequently been made to fix these different issues, and are shown in the different main screens shown below. Further testing to evaluate these changes are required, and will be used to either validate or adjust my design decisions, and might need further iterations.

Final Look

After iterating needed features and improving the app's usability, I started designing the final screens in Figma. I changed the existing darker theme to a more lighter theme using white, black, and lime green. This high contrast of colors and use of green conveys more of an energetic, aggressive feel, which fits the intended audience of motorcycle riders. This change also brings increased emphasis to buttons, which was previously lacking in the prototype.

In order to ensure my design was as accessible as it can be, I checked the colors with the WCAG contrast checker, and slightly tweaked them to comply. As for design guidelines, I focused more on Material Design for this case study.

I am happy in the way this design turned out, and I found that the drastic theme shift was well worth the time spent.

Summary

I am very happy with how this project turned out. My experience gained from this project helped me develop my skills as a designer, as well as increased my skills in communicating and empathizing with users.

The aspect I struggled with the most was how to condense all the information I thought was necessary down to the most relevant, and how to display it. If I could do this project over again, I would focus more on the structure and priority of information early on. This would help with organization and displaying info. I kept changing these in the later iterations, which took up more time than I wanted to take.

Relying heavily on feedback from participants helped me realize that some of my proposed solutions were very effective, while others were not. This stressed to me the importance of continually testing my ideas, and I will implement this with me in future projects.

Next Steps

MyGarage is currently in the early stages of development for Android/iOS devices. I will remain available to answer the dev's questions and continue to check progress during the process to ensure accurate implementations.