Design Challenge to Lingbe


Contact with the Lingbe company and I send you my profile to work with them as UX / UI Designer and in a few days they tell me that I have to carry out a test to continue with the selection process. Without further delay, I get down to work and start reading what this test consists of. The test consists in the creation of a mobile application that allows the user to order a daily coffee, this application is called The Daily Grind, and what they ask is the following:

In addition, the user can:

Once the general analysis of what is requested and having read the brief, I decide to organize my time to be as productive as possible, I put the limit in 4 days from the next day, and for this I prioritize steps, ideas, concepts and streamline the work.


For this exercise I have worked with the Design Sprint methodology, whose processes can be developed in 5 days, 3 days or just in 4 hours, depending on the needs of each project. In my case, I have developed it for 4 days.

Why have I chosen this methodology? Because Sprint shortens processes, creates prototypes on rapidly developed ideas and tests them in the shortest possible time. Fail fast, learn quickly.



I start the day analyzing the brief and immediately realize that the possibilities are many and varied, depending on which user and in what context I use the application.

I need to create a scenario and a user. Analyze your needs depending on what actions you are going to perform and the environment around you. Therefore, I define my user and create a Customer Journey Map:

Image for post
Image for post

Marta is 32 years old, lives in Madrid and works as Marketing Director in an important company in the Fintech sector. This company is located on the outskirts of the capital and our user takes an average of one hour to get to work.

Monday, Marta arrives at her office and she has to work hard to get everything ahead. She sits down and begins to organize the accumulated work. Soon, she realizes that she will need more than her desire to accomplish the objectives of the day, she wants a cup of coffee, but the cafeteria is on the lower floor and she is on the 11th floor. She doesn’t even have time to get a coffee machine. She accesses The Daily Grind application and asks to have her favorite coffee delivered in just 8 seconds. In less than 30 minutes, Marta can enjoy her freshly brewed coffee without having to leave her office.

I have questions about how my user can cope with the application. Therefore, I begin to make diagrams and mental maps to define all this, and while I do it, many questions come to my mind. Therefore, I make what in this methodology is known as Sprint Questions, being some of these:

Based on these questions, I now try to solve the unknown through a How Migh We (HMW) and the best solutions go through these questions:

Once I have the questions to solve, I set my goals, and based on that, I conduct research that will lead me to a final prototype.



I start the day looking for references that add value to my design. I analyze several applications dedicated to the sale and distribution of food, I note the pros and cons of all of them.


This is an application to order coffee and go to pick it up at the nearest cafeteria. The main screen consists of a series of images representing the coffees sold in the cafeteria of your choice, and the user can discover new coffees by moving them from left to right and vice versa. Previous registration is required and as a positive I see the coffee customization panel. Big buttons, high contrast, fast and effective.

Image for post
Image for post
Cofe App Capture


From Glovo I highlight the speed with which you can place an order, in just 3 screens you can place the order, confirm the data and choose location. This idea is very good, when you already have all the personal data inside. In addition the interaction is attractive and easy to use.

Image for post
Image for post
Glovo App Capture


Details such as nutrition information and allergen information are taken into account in the application. I want to add this functionality in order to broaden the potential audience and reach more people. Make the physical product more accessible, taking into account the real needs of people.

Image for post
Image for post
McDonald´s App Capture


From Just Eat I highlight how they solve the problem of location, whether you want to pick up an order or have it delivered to your location. It has two default locations, home and work. It also allows you to remember other orders and reorder them with just one touch.

Image for post
Image for post
Just Eat App Capture


The design is very white, minimalist and easy to recognize. As for the use of the application is a little more difficult because it gives several turns on the form of payment, and the need to enter the phone number yes or yes. As positive point the markers of quantity and the copies in the texts.

Image for post
Image for post
Uber Eats App Capture

This analysis helps me to know what is on the market and how various brands solve problems that I had previously raised. Thanks to this, I have a much clearer idea and I begin to define how my application will be. To do this, I start by defining the information architecture.

I want that in my app, the user accesses a main screen where you can customize your coffee, from there just remains, choose when and where. Finally the payment would take place. The second time the user uses the app, their data is already saved, you can choose your favorite coffee to be saved in a list, choose if you want to take it or pick it up somewhere and pay. It will take at most 8 seconds.

Image for post
Image for post
Architecture The Daily Grind

With the architecture done, it’s time to capture the path the user will take when using the application. I haven’t made any wireframe yet, I want to define the processes well and then capture them in a visual way. Therefore, I make a flowchart and make visible the path to follow.

Image for post
Image for post
Flowchart The Daily Grind



Now, it’s time to capture everything in a graphic way and I make some light demos on paper, using mobile templates, I want the design process to be as safe as possible.

Image for post
Image for post
Image for post
Image for post
Light Demos The Daily Grind

Transfer of the final sketch in paper to a few wireframes of average fidelity. I use this resource to make, in turn, a wireflow with the path to follow in our app. This will help me a lot to make the final prototype, helps me visualize the path that the user will make through our screens.

I have taken into account the path that the user makes within the application from the moment it is downloaded. When this happens, the user has to create an account, either by adding his data himself, or through other applications such as Facebook or Google. Once inside, would appear the main screen or dashboard, is the heart of the application and where the customization of the product takes place. Here we add a series of chips with which the user interacts horizontally to choose the one he likes best. Choose quantity and type of ingredient to add.

Once done, it is added to the basket, where it proceeds to the check-out process. There, the user decides when he wants the order and if he is going to pick it up somewhere or if he prefers to be taken to his location, whatever it is. In my case, Marta decides to have it uploaded to the office, so the application detects exactly where it is thanks to artificial intelligence and all Marta has to do is click “continue”. She adds the data from the card, which also has Apple Pay technology, checks that the data is correct and pays. You can monitor the status of your order through notifications.

As Marta is in a private building, the application sends a warning to the cafeteria of the building, which is at the bottom and the staff brings up the coffee exactly where it is. It has a geolocator inside the building, this technology is beginning to be implemented a few months ago and is so accurate that only allows 1 meter of error.

The user can choose the cafeteria he wants and create an alert to be uploaded every day to the same place and at the same time his favorite coffee, without having to move anywhere.

Image for post
Image for post
Wireflow The Daily Grind



Finally, I build the final prototype for IOS high-fi, thanks to the entire research and development process previously carried out. Whenever I’m going to make a prototype, I use the rules set by Apple’s Human Interface Guidelines for their devices and I follow the rules set for usability patterns, accessibility, visual design, icons, controls,… etc. I have developed a design system for this application using the Atomic Design methodology, through which nested symbols are generated and used in the final design.

Image for post
Image for post
The Daily Grind Design System

What design criteria have I taken into account?

  • Aesthetic integrity. I have tried to integrate the appearance of the application with its main function, “take a breath”, “have a coffee”, taking into account the use of subtle and discrete graphics, standard controls and predictable behaviors.

What do the colors used symbolize?

Purple: It means loyalty, well-being, success and wisdom. This is why kings and other leaders wear purple robes.

Pink: It is used to express fun, emotion, energy and youth.

Red: Stimulates appetite.

  • Consistency. The application incorporates features and behaviors the way people expect. It implements known standards and paradigms through the use of interface elements provided by the system.
  • Feedback. The application I have designed recognizes actions and shows results to keep people informed at all times of what they are doing.
  • User control. People, not applications, have control. This application can make people feel in control by keeping interactive elements known and predictable, confirming destructive actions and facilitating the cancellation of operations, even when they are already underway.

What aspects predominate in the prototype?

  • Clarity. Throughout the system, text is legible in all sizes, icons are precise and lucid, ornaments are subtle and appropriate, and a clear focus on functionality motivates design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.
  • Deference. Smooth motion and a beautiful, crisp interface help people understand and interact with content without competing with it. Minimal use of bezels, gradients, and shadows keeps the interface light and airy, while ensuring content is paramount.
  • Depth. Different visual layers and realistic movement convey hierarchy, impart vitality and facilitate understanding. Touch and discovery increase pleasure and allow access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.
Image for post
Image for post
Final Prototypes The Daily Grind

For the construction I have used a grid of 5px, and on this I have been placing the elements. In IOS it is frequent to use this type of grid. For its design in Android I would have used the 8px grid.

Image for post
Image for post
5px Grid for The Daily Grind

In addition to the grid, it is very useful for the construction of screens, the use of layouts, in this case 8 columns, where the arrangement of the elements, generates that the content adapts to different screens to perfection.

Image for post
Image for post
12 Column Layaut for The Daily Grind


It has been a very interesting test, capable of having a multitude of solutions and with many unknowns. I needed a user and a context, from there everything was filmed. Analyzing the needs of my user and the problems I could have with the use of the application, I managed in 4 days to obtain a prototype of an application that solves these problems very effectively.

Of course, the project will have errors that in future phases such as the Testing, could be solved through exhaustive observation, and the application would be improved. I deliver the test on time, and I hope it lives up to what has been asked of me.

If that were the case, I would be happy to talk to you again and receive feedback, as well as corrections in the exercise. Thank you very much.

Written by

Digital Product Designer based on Madrid.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store