PitStop App Prototype
College Assignment | Solo Project | 4 months
Overview
PitStop was a four-month long independent project, completed in the winter of 2018. I decided to develop an interactive app prototype, and really focus on the process. I started with developing the concept. Then I had to do tons of research in order to clearly set my goals for the project. After the UX work was done, I moved onto UI design, wire framing, and screen flow. Finally, I put the pieces together in InVision to create a seamless and sleek app prototype. Here’s PitStop!
Concept
If you’ve ever been downtown Winnipeg during work hours (pre-pandemic), you no doubt have seen (or even heard) food trucks in the area. There are over 50 food trucks servicing Winnipeg today. Most of them have to reserve spots along Broadway to serve their clientele, but some have to resort to scouting for parking daily, and somehow letting nearby people know of their location. Most food trucks have their own social media, but it is often unreliable as a location tracker. This is where PitStop comes in. A single hub for all food trucks to display their menus, schedules, and live location. Easy to use for both vendors and customers, it could be the future of Winnipeg’s food truck scene.
I wanted to create an app that would let the user freely explore Winnipeg’s food trucks. I knew from the start there had to be a thorough and comprehensive filtering system for different types of food, dietary restrictions, and allergies. Having a central hub for our food trucks would also facilitate future expansion. If a business owner can be confident in reaching their target audience, they will be more likely to pursue that venture. With this app, food trucks would not need to be restricted to the downtown area, where the density of population guarantees a higher revenue. If a truck is popular enough it will garner attention in any area of the city. The app would help visitors and tourists if they are looking for a quick and cheap lunch option. PitStop would be very useful for events such as FolkFest, where many food trucks are gathered in one place. Don’t you want to see what Winnipeg could be like with PitStop’s help?
Research
As with any new product, I had to research similar apps on the market, the target audience, and app features. I found three similar apps in the Play Store, and installed them to explore their interface, flow, and features. From that research I compiled a list of features I wanted to include in my app, things that those other apps did well, and things I should avoid or watch out for.
At the same time, I was talking to my community to gauge the interest in a Winnipeg food truck app. I was lucky to connect with a food truck owner, who helped me solidify my concept. From speaking with multiple people, I created four personas – Two vendors and two customers. Exploring the different approaches people may have to using the app helped me focus on what was most important for the end user.
Before heading into UI design I researched the best app design and mobile design practices, and took a close look at the way people interact with their devices. Things like thumb reach and legibility certainly impacted my final design.
Process
The very first thing I did when starting the UI design, was a site map. I made sure to consider all the screens that would be necessary for the app to function well. I also developed separate screens for vendors (like account set-up and truck registration) and users (map, favourites, menu). When all the screens were accounted for, I thought about the flow of the app, where things would be placed in the virtual space of the app. For example, I decided that every truck was going to be a “card” that came up from the bottom of the screen, no matter where the user was viewing it from.
I moved on to wireframing the app. Every screen started as lots of lines and boxes on paper, moved through several iterations, and eventually into Sketch App. In Sketch, I perfected the initial wireframes, and developed them further with typography, icons, and colours. I sourced icons, photography and fonts, and chose a colour palette to finish off the UI design.
When all the screens were polished up, I moved them into InVision to link the prototype together. Hotspots were linked to lead to different pages. This is where the research about app flow came into play. Using what I had learned about motion, user experience, and accessibility, I linked the screens in a way that was intuitive and consistent for the end user. In the end I had 18 app screens linked together into an interactive prototype.
Result
After months of hard work I had finally achieved what I set out to do. Not without a fair share of challenges of course. The biggest challenge by far, was figuring out how to format multiple types of content into a consistent layout. Things like menus, descriptions, photos, were all different for different food trucks. To solve that problem I decided to make the truck setup a form with multiple sections to fill out. Best design principles were used to keep the form easy to navigate. Here’s PitStop!
Next Project
Witch – Zine
An exercise in layouts for print.
