👋 Hi, welcome to the Vista al Mar
delivery app.
This is a 7 min reading
The Problem:
In this post-pandemic world, many concepts we take for granted are under re-examination. For example, more users prefer to stay home, and consumer habits are shifting to at-home delivery and reduced restaurant consumption.
My role:
UX/UI designer, Ux research, IA (Information architect) designer.
The Goal:
The goal is to create an application that enables customers to recreate a gourmet dinner experience at home. The app will allow them to order food based on its ingredients. In addition, the restaurant's chefs will provide a unique experience for each diner.
Responsibilities:
I conducted interviews, paper and digital wire-framing, low and high-fidelity prototyping, usability studies, accounting for accessibility and iterating on designs.
...a single step
We wanted to stand out in a mature and competitive market, so we identified a desirable role for the app and how it could meet the needs of the scheme's users. In addition, we were excited by chance to create something meaningful.
Meeting with key stakeholders enabled us to gain insight into their business challenges. As a result, we identified risks, aligned expectations, and created a shared vision for the app. Subsequently, I developed an experience strategy outlining our phased approach and direction for the app.
Because of the Covid situation, I divided the project into 3 phases. The first objective was to create a usable and functional app that the client could start quickly to give her services. To achieve this goal, I focused on five main points.
First and foremost, the user interface (UI) had to be well-designed, emphasizing easy navigation and a modern look. Additionally, the app needed a fast loading time, so the user would not be stuck waiting for the app to start. Then, we wanted to ensure that all the data was securely stored and protected and did not expose the user's information to any potential threats. We also wanted to ensure that the app had excellent user support so that users could answer any issues or questions quickly. Finally, we tried to incorporate built-in integrations so the user could access other services and platforms from within the app.
User research summary
The discovery phase was a swift, high-intensity effort. We defined project milestones, audited existing work, reviewed the competitor landscape, understood our client's vision, and began researching user needs, behaviours, and pain points. We also initiated a technical discovery phase to understand feasibility and constraints.
I interviewed potential customers for this app to study their dietary habits, cooking skills, and preferences when ordering food for a celebration. Then I compared the results of these interviews with the restaurant's data to map the most viable offers.
This research yielded two key findings. First, the problem assumption and goal were valid. Second, it showed that users would be more satisfied if they were involved in preparing a celebration dinner.
Paper wireframe
The ideation phase starts with napkin sketches, where I project the visual image of what the app should look like. From there, I continue with some structural wireframes and elements to develop further in the next phase.
User Flow
This process is reflected in the user flow diagram, which shows the user's movement in the platform, the data flow, and the resources needed for development and implementation.
Digital Wireframe
The first wireframes were created by combining the initial sketch with the web flow analysis.
Low-fidelity prototype
The prototype is based on the previous user flow to reach the necessary complexity level to test this first phase with real users.
Usability study
I conducted two usability studies. The first was after I completed the wireframe prototype. I interviewed five people for this test and performed a 45-minute usability test with a complete survey and a pain point analysis. The second was after I finished the first high-fidelity mockup and focused on KPIs.
Pattern Identification
-
It was observed that 1 out of 5 participants had a problem trying to sign in with his google account. This means that users need a more intuitive way to access different accounts.
-
It was observed that 1 out of 5 participants had forgotten the password and had to create a user from the beginning. This means that users can’t recover their passwords and usernames.
-
It was observed that 5 out of 5 participants had a problem selecting the ingredients from the menu. This means that the menu page needs more clarity in its development.
-
It was observed that 2 out of 5 participants had problems with the checkout page and the credit card. This means that some user can’t access their credit cards.
-
It was observed that 1 out of 5 participants can’t find their way to the presentation page. This means that users stay stoked on the track’s page and don’t have continuity to the presentation’s page.
Insight Identification
-
Based on the theme that: for most users, it’s not immediately clear how to select the ingredients in the menu an insight is: that users need a menu page better organized that includes categories and filters.
-
Based on the theme that: The credit card option is percent difficult for some users that can’t reach their card path at the moment, an insight is: that users can take advantage of saving their credit card info in the app or use an external payment system like PayPal.
-
Based on the theme that some users have problems access using their Google accounts and recovering their forgotten passwords, an insight is: that create different options to access and implement a forgotten password action.
...the thousand miles journey.
An effective home page creates a more trustworthy relationship with the user, as it is the only implementation on the front page that allows them to use the app as a guest.
I simplified the menu page and added a search filter to facilitate navigation.
High-fidelity prototype
The final high-fidelity prototype presented a user flow that effectively met user needs, covering all necessary functions and providing a filter, active search tool, and other features. This search tool allowed users to find information quickly and efficiently, and the filter enabled them to narrow results to specific criteria. All of these features combined to create an intuitive user experience that was easy to use and highly effective.
Accessibility considerations:
-
The app was designed with the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG) in mind from the start.
-
All the images have alt text, and the app is also reader-friendly.
-
The app is available in four languages: English, French, Spanish, and German. Additionally, it is designed to work with two different internet bandwidths.
Impact:
The Vista al Mar app has only one mission join the family and friends around a nice table. Not any table, not any food, your table, your house our food.
What I learned was a journey of self-discovery, understanding my reactions to criticism, recognizing my own biases and prejudices, and most importantly, the ability to truly empathize with the people around me. As I explored my own motivations and beliefs, I was able to gain a better understanding of the perspectives of others, and how our individual experiences shape the way we interact with the world. Along the way, I learned to appreciate the power of growth and development, and the importance of continuously striving to be better. More than anything, this experience taught me that nothing is ever truly "final" - there is always room to grow, to learn, and to improve. It was an invaluable lesson that I carry with me every day and that I hope to share with others.
First, thank you for taking the time to review this job. Any feedback is most than welcome.
Thanks, Gracias, Merci, Danke, 谢谢, ありがとうございました.