Introduction

The idea for my app “Curbside Auto Spa” actually began many years ago when I was in high school. I used to drive around to neighborhoods and ask people if they would like me to clean their car while they sit in the comfort of their own homes! After a year or so, better opportunities presented themselves and I strayed away from the car cleaning industry as a whole. But, when the professor for my Advance Prototyping class said we would need one app idea to build on for the rest of the semester, I knew exactly what my prototype was going to be.

For the next 9 weeks our class was assigned individual challenges that taught us new and creative ways to prototype interactions in Figma. While keeping in mind throughout each challenge our original app idea. While not all of these challenges were used in our final prototype, they all came to be important Figma based skills that I will use going forward. Each challenge required us to input new features/interactions from pop-up modals, to interactive maps, and even slide-up animations.

On this page, I will give an overview of the style guide, a few screens showing redlining, and components I used in my prototype. All of that followed by a short video representation of how the Curbside Auto Spa app can be interacted with.

Style Guide / Components

The first thing I did when I set out to idealize the Auto Spa app was to make sure I had an effective Style Guide to keep me on track throughout the challenges. Because I was creating a cleaning service application, I wanted to use colors most associated with cleaning and water. Therefore, I used a few variations of blue mixed with white and grey undertones to make the user feel a sense of cleanliness throughout the interface. (shown in image)

The style guide for Curbside Auto Spa also helped me to establish fonts I would be using throughout the project. From the cursive style Norican to the bold and thick Righteous font which both helped establish an elegant but efficient atmosphere for the app. All in all, I wanted the user to have fun and breezy while scheduling appointments and writing reviews and these colors and fonts helped me to accomplish that.

Redlining

Redlining proved to be another essential part of making sure my prototype functions correctly. Originally, I had expected redlining to help establish elements in your prototype evenly. While this is still true, redlining helped me to do much more.

As a designer, deciding to redline your prototypes early can save you hours of headaches in the future. Because most software/applications like Figma require you to have both matching layer names AND matching positions between screens that share the same content to effectively smart animate any interaction you’ve created. Below this text, an image shows an example of a few pages from my prototype that have been redlined to help me move and duplicate elements throughout the design process.

 Curbside Auto Spa Prototype

This sections shows a video that guides the user through a few of the interactions and design choices presented in my “Curbside Auto Spa” mobile care detailing application prototype. Overall, I feel like this project will prove to be a HUGE boost in knowledge and readiness moving forward into the UX/UI & prototyping world. Hope you enjoy my creation.