Feed Me was an IOS UX/UI design project for Bloc. The assignment was to use all the design skills and tools we learned to design a food truck finder mobile application. I developed user flows, sitemaps and wireframes using Balsamiq. I designed all the logos and final designs using Sketch. I then created a high-fidelity clickable prototype using Invision.
Food trucks are becoming a more and more popular option for meals for urban dwellers in cities like Chicago, Denver and New York City. One of the problems for high density neighborhoods particularly around lunch time is that long lines pose a problem for those wanting to purchase items from food trucks. Also, food trucks are not always found at the same spot making it difficult for customers to find easily.
My goal was to create a consumer app that allowed users to quickly find nearby food trucks, search their menus and puchase items easily directly from their phones. Users could then mark a truck as a "favorite" and get notifcations when their favorites were nearby their location. Being able to purchase food ahead of time allows customers to quickly pick their food up and avoid waiting times. Food truck owners benefit from this application, as well, and can use this app to advertise specials, easily accept payments and benefit and learn from the reviews.
To conduct user research I did a competitive analysis of food truck applications. I conducted user surveys using Twitter and Facebook, spoke to friends and neighbors and observed local food trucks during high traffic hours. I created personas of my target audience/users from this research. I also developed user stories and started identifying features and the structure of the application.
I was able to begin mapping out my information architecture (IA). The goal was to create intuitive steps that a new and/or returning user would take to complete the necessary tasks of the app. From here I was able to develop a sitemap which I then used to develop the hierarchical structure of the application and the pages I needed to design.
I started the initial wireframing process using paper and pen to create very rough sketches and moved to Balsamiq for wireframing. I produced multiple iterations of the layouts, features, navigation and tested certain pages/features on usability websites (preference tests) and with friends.
I created the style guide below using bold colors and a simple easy to read typography for mobile. I created the logo and high fidelity wireframes using Sketch.