The Lokal Cafe App

The Lokal is a high-end cafe that specializes in nutritious food and drinks. Its long opening hours, uniquely-flavoured meals and organic ingredients make it the go-to place in the local area. With it’s new food delivery app it wants to make quality food and drinks accessible to people with a busy lifestyle who have limited time for cooking.

‍

My role in the project

I was the only UX Designer on this project and responsible for creating the app from conception to delivery.

Key tasks included researching and analyzing competitors, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

‍

Project goal

The main goal of the project was to design an app for "The Lokal" that makes it easy for users to order nutritious food to their doorstep. With a range of filter options, easy customization of food items and a fast checkout process users can place orders hassle-free.

‍

Target audience

The primary user group identified through research was young professionals working from home, who have limited time to prepare meals and place emphasis on the nutritional value of their food. A secondary user group was stay-at-home mothers.

‍

Key challenges or constraints

— Limited budget for the design and production of the app

— Relatively small user group, as the cafe only delivers locally within a 5km radius

‍

Research study details

I conducted interviews and created empathy maps to understand the users I‘m designing for and their needs. Research revealed that competitors in the local area do not offer many healthy options and users with special dietary requirements like gluten-free often struggle to find suitable items.

I identified the following user pain points:

• Time: Working professionals lack time to prepare meals themselves. Especially in home office settings they often work overhours.
• Nutritional value: Existing food delivery apps lack nutritious food choices.
• Accessibility: Existing food delivery apps list menu items without pictures and with little regard to accessibility or assistive technology.
• Scheduling: Pre-ordering food several days in advance would be useful for some users.

‍

Personas

Christoph is a busy young professional working from home who needs to be able to easily order nutritious food because he wants to stay healthy and motivated.

“I love when good food takes you on a journey.. I want to be able to experience that again, especially now in the pandemic, where life has become somewhat confined to my own four walls”

‍

Sarah is a housewife who needs to be able to pre-order cakes and snacks for a set delivery date because she wants to be prepared for her children’s next play-date.

“My kids love sweet snacks, but I’m not fond of store-bought options and I don’t have time to bake. It’s much better to get them from the local cafe.”

‍

Initial design concepts

I started the design process with paper wireframes. Taking time to draft iterations of each screen of the app on paper ensured that the elements that made it to the digital wireframes were well-suited to address users’ pain points.

‍

Wireframes

I then transferred my initial paper wireframes to digital wireframes using Figma. As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. It was important to users to be able to navigate the app easily and quickly and to be able to find detailed food item information like ingredients, allergens and nutritional info.

‍

Low-fidelity prototype

After completing wireframes for all screens, I created a low-fidelity prototype connected the primary user flow of ordering a food item, so the prototype could be put to the test in a usability study with users.

‍

User testing results

I conducted two rounds of usability studies. Findings from the first study helped me guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and highlighted which aspects of the design still needs refining.

‍

Round 1 findings highlighted that:

• Users want options to filter menu results
• Users want clear icons
• Users want visual information input like a calendar

Round 2 findings highlighted that:

• A clear distinction between immediate delivery and pre-order is needed
• Users want a delivery timer or live tracking

‍

High-fidelity designs & prototype

Using user testing results as a basis to design high-fidelity screens, I then created a high-fidelity prototype for the app.

‍

User research revealed that there needs to be a clear distinction between immediate delivery and pre-ordering food. Since most users will order food for immediate delivery this was made the default option, saving users time to complete the order. Research also revealed that it is important to users to have a very clear message upon completion that includes a time or live tracking for their food. I adapted the designs accordingly to best meet users' needs.

‍

Conclusion & learnings

While designing the food delivery app for "The Local" I learnt how important it is to consider the user right from the start. Often what we think users want isn’t what users actually want, so it is important to test concepts and ideas early on and adjust them as necessary.

I was particularly pleased by positive user feedback about the final app:

‍

"I like all this information on the food item page, not many places list the allergen info correctly and there is even info on nutrition, like kcal. I think this makes it easy for people to choose healthy options!"

‍

‍

‍