home / Guía Hedonista

Designing a foodie App. Methods, theories and principles.

Intro

I would like to use this project to write about design, methods and principles, and at the same time treat it as a case study. Because writing helps me to create a “thesaurus” of topics that interest me, and helps me to think and communicate more clearly.

The Context

With the will to tell the life of the gastronomy of the Valencian Community, its cookers, restaurants, product and, much more importantly, to bring it closer to people, the digital magazine specialized in gastronomy "La Guía Hedonista" decides to move to mobile environments with an app experience.

First Prototype
Home, Map and Detail views of the IOS App

In collaboration with the head of the publication and art director @Nada Importa, the VG team, stakeholders, and along with a series of requirements, I helped identify the needs and answer the questions that emerged during the conceptualization of the app. As a product designer, I led the process of designing the application for IOS and Android as well as the concept of a unified cross-platform design language.

The Concept

Reformulating the strategy to create a foodie app.

The project has reformulated the content strategy from the digital magazine and created a digital product to better guide our users and attract them to know a gastronomy that is in an overwhelming moment.

Understanding the user (and empathizing with him)

Making design decisions is not easy, but if you know your users is much easier to design and validate those decisions.

In order to think about all the different possibilities of use, I helped identify potential users, situations, motivations and goals to achieve.

Defining a point of view

The mapping stage helps to have a frame, an ideal photo of the possible use cases, to create the user history.

The search and definition of our users defines many of these possible scenarios. It is very useful to define the scenario by introducing the context and presenting it with a focus on the cause, trying to define the motivations and expectations – This reading is essential. For example in our case:

Detecting needs

Each of these issues provides a solid hypothesis of how our users' flows should be.

And more interesting is that through the users and their contexts and histories, we detect a series of needs that help us to manage and define the architecture and the characteristics that the application should have. For example:

The Design Challenge

Perhaps the most critical part (and one of the biggest challenges) of the Design thinking process.

It will require the ability to synthesize observations, hypotheses and define the problem that the designer will focus on solving.

Ideally following a user-centered philosophy, it will have to respond to user needs but we can't forget that it must also respond to business needs. A good definition will guide the designer and his team, and will help to start the process of ideation in the right direction.

How could we bring gastronomy closer to our users? How could we find the ideal restaurant?

The idea that we can know and find an ideal restaurant, either through the recommendations of experts or through location, is one of the project basics, always bearing in mind principles such as simplicity, honesty and aesthetics.

Following a user-centered design philosophy that validates the strength of the proposals, adheres to the fundamental principles of design and gives content - to words and people - the importance they deserve, was at all times one of the main challenges, and what was going to help define the structure of the application.

Wireframes and prototypes

Starting from the previous hypotheses, we began the design stage.

My work started by getting this wireframe.

First Prototype
First wireframe provided at a very early stage.

Taking this first wireframe, along with the hypotheses and the framework that we had defined, plus fundamental design principles and standards, I began to design higher level wireframes with which quickly validate structure, flows and usability.

First Wireframes
First wireframes with indicators and annotations.

I've always thought that design is very good at faking things. The use of wireframes and clickable prototypes allows the team to prioritize their roadmap, and obtain feedback in earlier stages. This creates an environment for reporting on design decisions without the need to invest too much time and resources. If you have an idea, you can prototype in a couple of hours, test and validate, and repeat, creating a methodology very similar to what we mean by scientific method 👩‍🔬.

First prototypes
First prototypes testing interaction, and content digest in main view

Pprototyping and testing, report problems in advanced stages, and that's without any doubt a great advantage.

If a picture is worth 1000 words, a prototype is worth 1000 meetings. — Tom & David Kelley

In this case a problem was detected, however small it seemed, it created confusion in terms of interaction. More than confusion it was a mental map: a behavior assumption. In the screen where you select the filters, should the back button apply the selection?

Filter View
Problems detected in the Filters view

A big percentage of people simply wanted to return to a previous state, to the security of the main view, others would reset filters and then return, in general users were assuming that they were returning without knowing if selection was applied. It wasn't understood.

One of the basic needs we all share is that everyone needs to understand. — Essential design principles WWDC 2017

When I detected this problem and after testing and studying about mental maps, I decided to take a solution: emphasize the idea of closing, as the opposit to returning to an earlier state. Changing the back icon "←" for a close "X", meant closing, and not returning. In addition we added a "reset" of the filters and an "indicator" when there was some filter running in the main view.

Filter View
Back or Close? Apply or cancel? Before and After.

A small change and the result was quite satisfactory, a simple change of icon and we eliminated ambiguities, confusion and the most important was that we amplified its use with naturalness.

Solutions and development times

I like the maps and location was another important app feature 🙃, so facing this view's design was a challenge for me. After several proposals, the idea of a layer above the map, with the restaurants ordered according to the proximity to your location, fitted from the first moment.

Interaction
Primitive version with vertical listing showing Main View, Detail, and Map.

The idea is simple, your position appears in the center and around all the nearby restaurant markers, when you click on one, the card layer focuses on the selected item.

Design is never done. — Luke Wroblewski

Without being the perfect proposal, it worked and adapted to mental maps of interaction.It was the proposal that best fitted times of development and validation, so we decided to go on with this solution. In addition, can be said that solves a great insight as is the discovery factor.

Defining a language

Documenting every design decision.

I have as a principle to document every design decision I make. I try to register every change, every decision, every new solution. This is useful to inform the whole team and stakeholders, it also maintains a state of design that facilitates monitoring, understanding and its evolution. In the same way, I try to define a design language that facilitates its implementation. It also helps, above all, to create an environment that facilitates the creation of new solutions with less investment of time.

Design holistically for processes and systems, understand behaviors and user needs, and include participatory design in the process. — John Chris Jones

In this case the design system takes care of the culture and philosophy of the project, giving importance to words, to people and their dishes, their photos and their names, going down to branding and documenting libraries of components that, without being too extensive, define a design language. 4 colors, 2 fonts, a system of 8pt, atoms, repeatable components and blocks, space and white-space, image and iconography, interface cpywriting and tone, and a few more things, are included to allow creating more screens with the least effort and intuition possible. Trying to keep things simple, intuitive and aesthetic.

Design System
Style guide sample.
The Style Guide serves as a vehicle to help people through different disciplines, to share knowledge and to collaborate with each other. - Brad Frost
Building a Personal Voice

Letting photography and iconography lead.

Photography is super important to the app experience. Letting the photo lead, it gives the user interface a bold and tidy appearance, and makes navigation from master to detail easy and comfortable. In addition the great iconography created by @Calpurnio to represent the categories. The result is a voice that acts with great personality.

Design System
Calpurnio iconography.
No more Lorem Ipsum, please

I try to always design with the context in mind - how important the context is.

Designing with real data is a priori a highly recommended process, there is no doubt that the context you face is real, and you also grow in communication with the team of engineers 😉, because you are going to use the information in a very similar way. In addition we can test prototypes with real data, and validate if design solutions are prepared for scalability, repetition, etc. In general is a process involving the work of different teams - communication, development, design .. It is a win-win without a doubt.

    {
    “Restaurante”:”Ricard Camarena”,
    “Cocinero”:”Ricard Camarena”,
    “Estrellas”:4,
    “Plato estrella”:”Abandonarse al menú degustación.”,
    “Imagen”:”ricard_Camarena.png"
    “Crónica “:”2012. Ricard Camarena y Mari Carmen [...]”,
    “Colaborador”:”Jesús Terrés”,
    “Calle”:”c/ Sumsi, 4",
    “Latitud y Longitud”:”39.463595, -0.369633"
    “Teléfono”:”(+34) 963 355 418",
    “Web”:”www.ricardcamarenarestaurant.com",
    “Precio Medio”:”90€”
    }
    

With a simple json, from Sketch + InVision Craft you can make a request to the server or upload it directly from a local file, and insert the data into the design ⚡💥️. Here's a demo:

Json data
Inserting data in sketch from a json via Craft plugin.
Principles

Usefulness, honesty, simplicity and aesthetics ♠️ ♥ ♣️️ ♦️

In the end I'm pretty satisfied with how it all worked out. The app is consistent and fits into a perfect balance between utility, simplicity and aesthetics. Honesty comes from the critics and their opinion, personal, subjective and absolutely insobornable. Photography and iconography lead and bring personality, the interaction is worked to be intuitive as well as effective, and the team has been satisfied with the results.

Design principles are universal: truths contrasted a thousand times and tell us what works. - Javier Cañada
Final App
Final IOS app look and feel.

There are many ways to understand, focus and solve design problems, to define a point of view. This case study is just an example with which I wanted to discuss theories, methods and principles that interest me and lower them to deal with specific details.

I hope this case study can be helpful, meanwhile you can download on the AppStore or Google Play