Hanker

Hanker is a curated food truck discovery app. Users read about highlighted food trucks, explore menus, and place orders within the app. Recommendations are drawn from local food publications and experts rather than user reviews.

The driving inspiration for the app was frustration: searching for food while hungry and walking into poor food experiences following unreliable user reviews. The content is handpicked by tastemakers, as opposed to being an open database of public food truck reviews.

Hanker onboarding mocks on iPhone 6

User Surveys and User Personas

To delve into the current landscape of the target market, I created a user survey to ask about food truck experiences, preferences and what drove decision making.

From studying the user survey and conducting a competitive analysis, I identified four user personas, each with their own distinct motivations and goals: The Local Foodie, Drunk and Hungry, Weekday Worker, and Food Tourist.

Set of four user personas View User Personas (PDF) Hanker competitive analysis chart View Competitive Anaylsis (PDF)

Branding

Hanker has a friendly and welcoming vibe. I harnessed my southern roots and used stylistic embellishments to pair southern hospitality with modern web aesthetics. Some motifs I drew on were heavy solid lines encasing lighter ones, subtle color banding, and lines with curled ends.

Hanker’s name takes a cue from the colloquial term hankerin’, which means to have a strong desire for.

Hanker logo and branding elements

Wireframes and User Flows

I chose user flows that always started or ended up on a page with recommended food truck content. Ideally, hungry users should not spend energy searching for food. The app is designed with a discovery page that the user lands on every time they open the app, so they are always shown the freshest recommendations.

User flow diagram View User Flows (PDF)

The other pages: "Featured", "Specials" and "Nearby", are shown as lower links in a tab-like format for fast navigation. When tapping the hamburger button on the top left of each main screen, the action slides the account menu across the screen from the left.

When a user taps on a food truck profile, the top navigation menu is replaced with page specific actions: Back and Checkout. The food truck menu is accessible by scrolling down past the photo and profile. This way the user is never more than a few taps away from the main discovery page or their account settings.

Set of Hanker wireframes View Wireframe Prototype

User Testing

I used Lookback to record users testing the first iteration of my Hanker prototype. My users were smartphone owners, ate at food trucks, and were within the 20-40 age range. I found that most users had no difficulty navigating onboarding, landing pages, search, and the map. Several of them tripped over search filtering and ordering workflows, which meant I needed to rethink them.

For search filtering, I clarified how to complete filtering. To do this, I added Cancel and Apply top buttons in the filters modal. For ordering, I made it more apparent when the user updated their cart and how to checkout. I replaced the Add button with plus/minus buttons to indicate number of orders and emphasized the order total with the shopping cart icon.

Final Prototype

I developed many versions of Hanker’s high fidelity mocks. Key principles that influenced the final interface include:

Photographs and illustrations draw the user in. When possible, display less text. Since this is a food truck discovery app, people’s emotional and hunger responses will be triggered by images of food. I kept copy lighthearted and pair with illustrations during onboarding to underscore the app's personality.

Keep the checkout page standardized with other online merchants. Don’t break the mold during critical flows involving payment. Use text size and placement to enhance the readability of a checkout page, so that users can quickly scan the page for salient information.

Usability above all. I base every design decision on my original problem statement: Will this help a user find a tasty food truck quickly? The main way to achieve usability is to create a set of UI patterns and differentiate each by content not style. Create consistency so that users know what to expect. Keep it simple.

Hanker final mocks on iPhone 6 View Hi-Fi Prototype
Back to Projects