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:
That the user can add 0–2 milk packs.
That the user can add 0–2 sugar packets.
That the user can choose the size of the coffee: small, medium and large.
In addition, the user can:
Having them deliver the coffee to your location within 30 minutes
Setting a time to go pick up the coffee at their location.
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:
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:
Will the user be able to perform all the product customization tasks from the same screen?
Will the user always want the same coffee or will he prefer a different coffee every day? In the same cafeteria or in a different one?
Will the user be able to save his favourite coffee and create a daily alert to always have his coffee in the same place and at the same time, without having to order it daily?
Will you be able to receive your coffee exactly at your location without having to move to another point?
Will it be useful for the user to be able to pay using a mobile payment system?
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:
How can you make the order arrive exactly where the user is, without the user having to go down to a reception or have to move to another point?
How can I create an alert so that, if the user wants to, he or she can have his or her favourite coffee every day?
Will the user be allergic to any ingredient, will he want information about the physical product, will he want it hot, cold, warm?
How could you make the interface comply with accessibility standards in order to broaden its audience and reach more users?
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.
Create a main screen that can be used to personalize the coffee, as agile, simple and fast as possible.
Allow the user full control and freedom over the content of the app
Relieve the cognitive load in the user’s memory
Aesthetics, minimalism and consistency
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.