01
CONTEXT
Mobile travel app connecting people all over the world through local experiences and products. The app aim is making Chinese FIT (foreign independent tour) visits in Europe more fun, convenient and efficient by providing personalized and local products and services.
Role: UI/UX Designer
Date: March 2020 - January 2021
Goals:
> Create a unique User Experience for Chinese travelers.
> Use: Before, during and after travelling.
> Eliminate pain points between two different cultures, connecting local shops and experiences directly with Chinese travelers.
> Use: Before, during and after travelling.
> Eliminate pain points between two different cultures, connecting local shops and experiences directly with Chinese travelers.
02
DESIGN PROCESS
Applying the Agile and Design Thinking methodology, a non-linear and iterative process, to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test.
1: Empathize—Research our Users' Needs
Empathy is fundamental to a human-centered design process, it allows us to set aside our own assumptions about the world and gain real insight into users and their needs.
2: Define—State our Users' Needs and Problems
3: Ideate Assumptions and Create Ideas
4: Wireframe—Start to Create Solutions in low fidelity. This is an experimental phase. The aim is to identify the best possible solution for each problem found.
5: Prototype—Start to Create Solutions in high fidelity.
6: Test: This is the final stage but in an iterative process, the results generated during the testing phase were used to redefine the problems and inform the understanding of the users.
Empathy is fundamental to a human-centered design process, it allows us to set aside our own assumptions about the world and gain real insight into users and their needs.
2: Define—State our Users' Needs and Problems
3: Ideate Assumptions and Create Ideas
4: Wireframe—Start to Create Solutions in low fidelity. This is an experimental phase. The aim is to identify the best possible solution for each problem found.
5: Prototype—Start to Create Solutions in high fidelity.
6: Test: This is the final stage but in an iterative process, the results generated during the testing phase were used to redefine the problems and inform the understanding of the users.
02.1 WIREFRAMES
I started the design process with low fidelity wireframes and hand-sketches. This is the way I iterate through many design options quickly.
I used Balsamiq, focusing in functionality over aesthetics.
I used Balsamiq, focusing in functionality over aesthetics.
> The Home screen:
It has been redesigned several times based on early feedback after the Create Ideas stage. The same has been applied to the onboarding screens and button bar menu.
Some early sketches displayed multiple carousel images, texts and colors based on our target users’ aesthetic, but we want to offer something different, something that solves our users’ frustration and problems, we want to build a product that our user can use with ease and delight, and meet their expectations.
When I showed the app to friends they seemed confused about how we structured the information, so I created a clearer version of scrolling images, added inner shadows to the texts to highlight and made it readable over the images.
The final design is bright, even if we use a dark style, and shows a clean and elegant hierarchy, combining both cultures and styles.
The final design is bright, even if we use a dark style, and shows a clean and elegant hierarchy, combining both cultures and styles.
02.2 HIGH-FI PROTOTYPES
I crafted high-fi prototypes using Adobe XD. These solutions helped and engaged our stakeholders in order to instantly see their vision and to be able to judge how well it meets their expectations, wants and needs.
Button app bar
VERSION 1.0
One of the early designs uses an orange and gray visual style that I later on retired.
We wanted to create a smooth, clean and stylish bar menu, and that wasn’t represented in the initial version.
I redesigned it by replacing the orange-gray for a purple color (more contemporary, fresh and stylish), following smoother shapes and adding transparency to the bar menu in order to stimulate our users’ curiosity.
FINAL VERSION
For our final design, we created a harmonious structure based on balance and patterns, matching our product personality.
The visual style we chose feels organic with our target audience.
The visual style we chose feels organic with our target audience.
03
FINAL RESULTS
Our final design is a combination of Scandinavian and Chinese culture and style.
We created a unique product that meets our user's expectations when they travel to Europe.
We merge two cultures, two styles, two looks, creating a authentic product.
We crafted solutions that convert complex processes into experiences that people can use with ease and delight, considering beauty as a combination of usability and visual interest.
04
LEARNING
Dandgi is the first app I developed from scratch, being the responsible for the entire design process.
Leaving behind the level of expertise as a UI/UX designer I gained, the most valuable competences I added were the non-design skills, the ones that make people likable and easy to work with.
> Learned how to collaborate and communicate with multidisciplinary and remotely teams in order to effectively problem solve
> Developed an extraordinary sense of empathy, because being collaborative is built on being understanding, open, and sensitive to your teammates’ need
Thanks for reading! ✌