APP DESIGN

Case Study:
Ya Voy App

| All your purchases delivered straight to your doorstep.
All your purchases delivered straight to your doorstep.

MY ROLE

  • UX/UI Designer

YEAR

2021

Overview

Yavoy is a digital business that offers home delivery services for various products. Its mobile application is designed for users to search and purchase products from different establishments and generate an order for home delivery.

The design focuses on user needs and seeks to facilitate quick and easy purchases. Yavoy competes with companies like Rappi, Glovo, Deliveroo, and Uber Eats, and aims to create a high-quality product that offers the same functionalities as its competitors and satisfies user demands.

Prototype and animation made in Adobe XD

Process

Design Thinking methodology

1. Discovery

Functional Requirements Analysis

The first step has been to establish a document to define the essential aspects that must be taken into account in this digital project. Essential functionalities, interactions, and other fundamental elements are pointed. From a usability perspective, it is important to know and delimit the functionalities of the project to prioritize the information and functions of greater relevance over others of lesser importance.

Define business goals

Defining the project’s goals has helped me focus on meeting the business requirements while also finding a balance to meet user needs. The initial business requirements were:

  • Facilitate the possibility of placing a previous order
  • Option for users to rate businesses and riders
  • Easy way to find a specific product
  • Incentivize users to make the highest number of purchases
  • Enable users to track their orders easily
  • Acquire users more easily
  • Show categories and products in a simple way

Benchmark

To gain insights on e-commerce app products, the benchmarking technique was carried out, which has been crucial to analyze the competition in order to understand their strategies, identify key functionalities and see how navigation and purchasing processes have been established.

User interviews

As it was a small project, three “talks” were scheduled via Zoom with three potential users. The “Voice of the Customer” technique was used, where the needs and feedback of the users regarding the concept of a product like the YaVoy App were carefully listened to. This helped me identify the product’s needs and expectations, such as the need to track their order in real-time or the ability to make purchases at multiple stores in a single order.
entrevista 2 usuario
entrevista usuario 1

2. Definition

User persona

Creating a user persona for Ya Voy has been essential as it has allowed me to personify the “typical” user and better understand the needs, expectations, and goals of potential users that it represents. In the same way, it has been a visual reinforcement to keep this information in mind in future phases so as not to forget that I am designing for the user.

User journey

A brief customer journey was conducted for Yavoy. The user’s journey was followed, and opportunities were identified to make the purchasing experience simpler.

Based on the Customer Journey, I was able to analyze that the best option for YAVOY would be to start with a Mobile First approach, and the best option would be a native app, as the target user uses their mobile phone wherever they are, whether it’s at home, at a friend’s or family member’s house, etc. They would not necessarily need a computer to place orders for home delivery. In my opinion, the entire concept of YAVOY is aimed at being used on a mobile phone.

Defining the problem

Yavoy has the need to display categories and products they offer in a simple way so that users can make purchases at different establishments in a single order, track them in real time, and receive them at their home to later be able to rate the service.

3. Ideation

Solution brainstorming

It’s time to start looking for solutions! The “how might we” technique was used to brainstorm ideas to address the pain points in a creative and user-focused way. By asking questions like “how might we make the purchasing experience more intuitive for the user?” or “how might we simplify the payment process?”, more specific and effective ideas and solutions are generated.

Value proposition

In Ya Voy’s case, drafting a clear and well-defined value proposition helped prioritize and reinforce the key functionalities of the app, convey its advantages and benefits, and showcase them to users as benefits and differentiators from the competition.

User flow

The ideation phase continued with the creation of a flowchart. This illustrated the main user flow from the registration and login process, product search and selection, purchase process and shipment tracking to delivery, indicating the actions that the user takes at each step.

Information arquitecture

Establishing an efficient information architecture was essential for Yavoy. As a business collaborating with different establishments, each with their own catalog, it could have been an obstacle for the user to locate desired information and/or products.

4. Prototyping

Low Fidelity wireframes (sketching)

Low-fidelity wireframes were designed in sketch format to quickly explore different design ideas and solutions without investing too much time and resources. The main objective has been to establish the structure of key elements and understand user interactions.

Mid-Fidelity wireframes

The medium-fidelity wireframes have allowed me to focus on the visual structure of all screens in a more detailed way without requiring a greater time investment. In this phase, the typographic hierarchy, button sizes, and contrasts to highlight the call to action have been primarily established.

High Fidelity designs

In this phase, the use of color and images is incorporated to provide a closer idea of how the final product will look and function, and to prepare screens to move on to creating a prototype for user testing and interaction validation.
· Style guide
Style guidelines were established for the interface’s appearance. The typography, corporate colors, interface elements such as icon style, and visual hierarchy were defined to present users with a consistent design that serves as reinforcement to ensure clear and intuitive navigation.
· Screens design

Several screens were created to not only show the interface design, but also to showcase key actions to provide a good user experience. For example:

  • Notifications informing the user of successful actions, such as account creation or sending a review.
  • Search bar to encourage users to search for an item or establishment when their shopping cart is empty.
  • Error prevention messages.
  • Examples of cross-selling, where users are suggested to add a complementary product to their purchase.
The last step in the purchasing process is service reviews. It has been simplified so that the user can easily carry it out and not skip it. If the user does not want to do it at that moment, they can postpone it for later. The evaluation is important for Ya Voy and for the establishments, as it helps to improve the quality of the service and to influence the purchasing decisions of future users.

Prototyping

Prototyping has helped me in the UX process for two fundamentally aspects:

  • To conduct user testing and test the product.
  • To show the behavior of certain elements such as notifications to the development team.

Prototype and animation made in Adobe XD

5. Testing

User testing

Once the prototype was created in Adobe XD, brief usability tests were conducted to validate the app experience with 3 users. From these brief tests, insights were extracted to iterate before moving on to the development stage, including, for example:

  • Small font size makes reading difficult.
  • Restaurant and product listings require a lot of vertical and horizontal scrolling.
  • In checkout, there is no way to save the card for future purchases.
  • There is no clear confirmation message after placing an order.
  • No contact information for the establishments is shown.
  • It’s not clear enough how many product stock is available.

In conclusion

Some of the learnings I take from this project is the importance of conducting research beforehand to maintain a balance between both business and user needs. For an online store, it is crucial to have clear objectives and, therefore, keep in mind the user flow to understand their behavior and make navigation easier for them.

And, of course, as it is a big digital product since it works with a lot of information from different establishments, investing and paying attention to information architecture is essential to maintain a clear, logical structure and, therefore, obtain a usable product for our users.

Let's work together!

Send me any inquiries, feedback, or comments about my work.
Get in touch