Marco, Mobile Application - UX/UI Case Study.

About

Marco is an app that helps people to know what is happening in their city with a lot of events and activities to do, Marco facilitates contact with the creators of events and those interested, is an excellent tool for both people who want to go out and learn more about their city and for all tourists who want to know the city they visit.

Problem

Have you ever wanted to get out and see more of your city but don't know where to start? Do you want to filter all the activities and events happening in your city by the ones that really interest you? Do you want to visit a city and know the best events it has for you? Marco was born from this need, and we are committed to give you a solution to this problem.

Solution

The main objective is to create an app where people can create and book attendance to events in a large calendar, in Marco there will be many filters so that people can filter events and activities by their interests, you can also filter by city, you can view each event with their respective description, image and requirements, you can also vote the events.

Why I Design this Project?

The main objective is to create an app where people can create and book attendance to events in a large calendar, in Marco there will be many filters so that people can filter events and activities by their interests, you can also filter by city, you can view each event with their respective description, image and requirements, you can also vote the events.

Research

To have a broader and more realistic scenario, I conducted a survey to learn more about the problems my potential users face. The idea is that after the results obtained we can design based on real data that helps us improve the experience of our future users.

The survey consisted of 9 questions, 26 people and these were the results:

Observations

This survey and the feedback from the respondents was very helpful to understand mainly what are the problems and frustrations our future users face, their goals and desires and how our app can help them to fulfill them. An digital product is never 100% designed or developed, but these first findings inspire us to have a solid base with which to start designing our product.

In general our competition is very diversified and there is no product that resembles what Marco wants to be, although there are many aspects to take into account of these platforms that could help us to have a clearer picture of what users like and what they reject.

For this reason we collected some user reviews of these platforms that could help us to improve and give a better product to our future users, this is what we found:

Definition

The definition stage is essential to know in more depth who our users will be, which will help us to better understand their frustrations and objectives. It will also help us to segment our users, which will be of great help when designing a product with a true value proposition for our users.

UX Personas

I carried out two ux persona cases to have a broader spectrum of the profiles of the users who will use the app. In general, what I was looking for was to know more in depth who our users will be in order to be able to provide them with an app that gives them a fairly complete solution to their needs. needs.

Empathy Map

Through this tool I managed to learn more about our next users, delving especially into the most human part, I feel that if we want to give a more complete response with our product, this is one of the most necessary tools in any design process, especially when start of the project.

Storyboarding

I needed a broader picture, a great answer I found to understand and explore what our users' experience in the app would be like was Storyboarding. The result was divided into 2 panoramas: large image and close-up, the result was as follows:

📌 For this UX Storyboading I used Figma's Storyboard Mix-and-match library designed by Lucian Popovici.

User Journey Before Marco

Use this method essentially to identify ways to help users achieve their objectives as quickly and easily as possible.

Ideation

This phase was extremely important, it is about generating ideas, in order to establish what our users will see at the end of the design process, our goal is to get to have the architecture of the information that our users will receive, so we will start with two techniques that through research and exploration will help us to have a solid foundation to establish the information of our app.

Card Sorting

Having as a main goal to design efficiently, I needed to organize all the information that will go into the app, and I felt that the best tool in my context to achieve this was the information architecture, but first we would do well to perform a card sorting to build an efficient and friendly navigation with the user experience. According to the mind maps of our participants these were the results:

Information Architecture

Design

Based on all the data collected previously which was essential for the final product to meet everything our target audience expects, in this section we will delve into the phases of the interface design, we will go from the color palette that we will use in the app to the final design, through the typography we will use and many more great things.

Color Palette

Typography

Low Fidelity Wireframes

High Fidelity Wireframes

After several iterations, learning from the users and in general improving the previous wireframes, focusing on all the learnings obtained along the design process, and I must say that I really enjoyed this part, not only because I love UI design, but because I feel that all the way was valuable for these high fidelity proposals, feeling that every tool in the process was useful, is extremely pleasant at the end.

Recollect

It is important to remember each step of the design process and each important moment of the project, this is fundamental to keep us in constant learning and above all to improve our design process in each project, these were some points to keep in mind in the design process and in the project:

Challenges

• Handling this project was a challenge for me since this is my first project, it was really exciting and I was very satisfied with the result.
• Each part of the process is necessary for the final product to be the dreamed one, this makes each step as important as the rest, which requires a lot of attention to each step.
• Once I lost my motivation a little bit, taking a break and thinking with a clearer mind was a great help.

What I Learn?

• The whole process was a learning experience for me and the fact that it was a real case made me really strive to deliver a professional and flawless result.
• I learned that inspiration and learning from people who have already passed your way is a great way to improve.
• I learned that to deliver the best user experience design it is necessary to understand how those users think and interacting with them is extremely significant to solve their problems.
• Feedback is an essential part to improve as a designer, I think it is the main tool to provide value to our users.
• It is significant to design based on data, because the ultimate opinion is given by the user and this is what will make our design is of value.
• It is always necessary to take a break, because under stress we can make bad decisions that affect our design.
• I learned to use several design tools and libraries.
• Owning and identifying yourself with the project and giving everything you can to avoid ending up with an incomplete result is extremely significant.
• One of the most obvious yet gradually learned concepts through practice is that there are many techniques and tools within UX design, but our job is to know which ones to use &specifically depending on our context, and not to use all that exist. This will make us much more efficient.