A mobile app to track and order meals from local food trucks.
UX/UI | VISUAL DESIGN | BRANDING
The rise of the food truck went from lowly “roach coaches” slinging hot dogs on a street in NYC, to hip fusion “restaurants on wheels”. They serve every flavor combination imaginable, and this can arguably be attributed to the tech boom of recent years. With the introduction of smartphones and social media, tech-savvy entrepreneurs revived an old concept that took the streets by storm. However; somehow, the opportunity to further connect the tech world’s relationship with the food trucks parked outside of the office never really deepened.
Moien hopes to be that bridge; by giving users the opportunity to keep track of their favorite trucks, and being able to order and pay before even leaving their desks.
While there exists a surprising amount of food truck apps in the mobile market, very few do little more than give you a list of trucks that may or may not be up to date. The problem was to create a simple, but well-designed application that tracks and locates nearby food trucks on a map. This app should include information about each truck, their menus, and give the user the opportunity to read and leave reviews. In addition, Moien should also have the ability for the user to order and pay from their mobile device before even leaving the office.
Moien delivers functionality in a clean and efficient way. With the use of a simple onboarding system to quickly explain the ordering process and the implementation of big, colorful buttons in a flat design, it gives the user the opportunity to track, search, favorite, review, order and pay with minimal fuss.
In order to understand where to begin, research was necessary, as was the need to know who Moiens potential users would be. I conducted a survey asking a series of questions about what people wanted to see in an app like Moien. After formulating the questions, I distributed the survey through User Testing and social media such as Facebook, Slack, Twitter and Reddit. Through the survey, I learned that 81% of people questioned currently use apps to order food. They appreciated the ease of use and convenience, but would like to have more options with less confusing functionality.
Know Your User
Using the data I gathered from the survey, I identified who Moiens average users would be. I then created 3 unique personas that would guide me in developing the app with the users interests in mind. The 3 people I developed had one thing in common: they were very busy people and often took the less healthy, or at least, less satisfying option during lunch. I felt that I was on the right track.
Know Your Competitor
It was at this point that I needed to begin researching any competitors to find out what they did well, or didn’t do so great. I had trouble finding any app that was really capable of implementing what I was hoping for Moien to be, but I managed to narrow down the list to 3. Only one of the apps gave a limited option to pay via the app. All apps were limited to certain cities within the U.S. and most were poorly designed and confusing to use.
After gathering the data, it was time to start developing the stories that would keep me on track during the design process. With what I knew about my users via the survey and the personas, as well as the information gathered via competitor analysis, I put together User Stories to break down what I felt users would like to see in this app.
Afterwards, I created User Flows to manage the process of moving through the application from a New User standpoint as well as a Returning User’s standpoint. With the collected data and the user flows, I created a very rough Wireframe on Balsamiq.
With what I had learned through user testing, I knew that I was on the right track with the card system and large buttons, so I took these answers to the sketchbook and began to flesh out the visual design of the app. I created a series of sketches for icons, a log and illustrations I wanted to include in the onboarding process.
I utilized Mindmaps in order to truly flesh out the logo design, I used a mindmap in order to better understand what I would need to include in an onboarding process. Obviously, since the name isn’t descriptive about what the app does, there would need to be explanation and descriptions involved. I also created an illustrated mindmap of the name “Moien” so I could find a tagline that would work for such a unique name.
Afterwards, I began to play with color and typography. I knew I wanted to work with red because of its ability to invoke hunger in studies, but I also wanted some continuity in the name Moien and it’s tagline, so I thought I’d use Luxembourg’s national colors as subtly as possible.
The visual design of the HiFi Mockups took much longer than anticipated, having gone from 18 pages in Balsamiq, to over 120 pages on InVision, but I was satisfied with the look. I created another series of tests with the HiFi mockup. While, the overall design and simplicity of use was generally welcome, some expressed confusion about the swiping capabilities in the food truck section. I went back in and removed some swiping options in order to keep it simple and changed the last page of the onboarding screens to instruct the user on how to add items to your “lunch bag”.
In conclusion, some aspects of Moien didn’t make the cut. I imagined an application filled with gesture-implemented processes, but user testing proved that seems too confusing for most. I wasn’t surprised that flat design and the large, colorful buttons worked well, as well as the card system while looking at nearby food trucks. If I had time, (and perhaps in the future) I would like to code out Moien and create a fully functional interactive prototype that I might be able to bring to developers.