aroute-cover
Aroute is a travel plan and route generator platform in web and app versions that acts as a guidance and community to support multi-destinaion trip for all level travelers.
Timeline -
1 month
Role -
App Product Design
UX Research
Visual & Branding System
Development
For -
Individual Final Project of
"Web and app prototype" Course
Tools -
AI, FIGMA, VSCODE
Overview
The integrated platform makes it more convenient for people to travel. But the planning behavior of independent travelers is therefore ignored by the market. They are forced to use office tools for planning, such as excel, word, memos, etc., to assemble bits and pieces of information. The monopolistic behavior of multiple platforms and their respective advantages force users to use them at the same time to obtain the most cost-effective travel experience, but they do not use all the functions of the app, resulting in a large number of users' mobile phones are occupied by redundant and invalid content.
The purpose of design is to allow different users from individuals to companies, to create their own journey with the tools built in. Ensure the responsible use of data and drive better outcomes with map management, intelligent route generation, visual analytics, and collaboration in a highly customizable way.
aroute-brands
📱Main Features
View Prototype
01. Dashboard
Make Important Things Fast
The main screen has been designed to allow users quick access to primary functions of the application. The size of the icons make tapping easier, the order of the icons are based on ease of reach and the layout was chosen to provide a way for the design to scale for future releases.
dashboard
02. Plan
Minimise Learning
Primarily designed to support people on-the-go, users can depend on their prior experience with Google Maps and existing iOS design conventions to help them learn to use the app.
gif of main routes
gif of main routes
Search, Add, Generate
A journey started by simply entering a location. Aroute empowers smart, intuitive big data to understand every single keyword. The user can leave the location as a specific spot or a general category to edit later on.
The app delivers key information you need to access, visualize, and design your plan. That information are only from other users' posts and is updated daily. With an intuitive drag, drop, click, and enter interface, people can uncover hidden insights and make smarter decisions faster.
Drag to Change Route
After adding a location to the list, no matter how specific it is, it forms a module, and users are allowed to drag to change the sequence. The route will also change automatically with visible animations.
Click to Add Note
Each location provides serviceable information from the system and remains a memo module for people to add their own notes from all sources, such as tickets, links, and copies of announcements and suggestions from others’ posts.
drag route
compare
03. Comparison
The app empowers smarter, insight-driven decisions with fast, flexible, graphical analytics. Providing customer statistics and comparisons about Passenger Flow Volume, Cost, Time Spent, Score, and a lot more that can be added.
With Aroute's route optimization technology and data only from users, you will clearly and visually understand your plan and compare with other popular posts or your other designs under one click.
04. Community
Looking for Friends
Aroute is a young and creative app which have a large community for your to explore. Easy access by starting to look at other travel enthusiasts' posts and copy and follow their journey. It is also available for solo adventures to find appropriate companions. A built-in chat environment is provided to talk to your follows, followers, and travel groups.
community
05. The Mobile Version
to track gif
To Track
Real-time and location tracking helps you know what's happening throughout your whole journey. Build your travel map without recording yourself.
To Explore
As phones are gradually developed into social devices, every app needs a community. Aroute has a unique channel for users with all kinds of travel experiences to find their potential companions to explore the world together!
to explore gif
to share page
To Share
Cultivate an internal travel community and engage with the global Aroute Community to share your experiences.
06. Reusable UI Components
🔎Research
Problems
platforms icon
Too Many Platforms
People use different platforms to book their transportation, stays, tickets, which took up space in their phone. And the only thing they need is a “order confirmation”.
information icon
Information
For informations collected from social medias, there are both useful and useless tips in one post. In order to eaiser find when we need, people screenshot instead of saving to folders inside apps
ambiguous icon
Ambiguous
For locations, we are not familiar with, it is ambiguous about the real-time weather, condition, passenger volume even though we have some source to check.
maps icon
Maps
Maps are only available to claculate one distance and cannot customize if we have certain road to travel.
problem route
Prompt
Focusing on features Goals
“HMW enable people with varied travel preferences to plan efficiently and collaboratively on a single platform?”
User Persona
Our persona hypothesis consisted of three different archetypes which we used to facilitate discussions about our users needs, desires and varying contexts of use. We found our personas have overlapping journeys and the primaray users require more repetition.
primary user
secondary user
potential user
Questionnaire & Interview
Sample Size: 157
1. Evaluate how detail you are going to plan a travel from 1 to 5?
2. Have you ever struggle with which app to use for travel planning?  
3. Have you ever cannot find proper confirmation code/foget where your save them?
4. What is the most important element to consider when plan your travel?
            a. overall budget with score
            b. transportation (time, location, sequence, price, etc.)
            c. passenger volumesomething else
5. What are some of the challenges you face when planning group trips with friends or family members?
6. Have you ever used a travel planning app or website? If so, which ones have you found most helpful and why?
7. What kind of travel planning features do you find most useful, such as itinerary planning, destination research, or budget tracking?
8. How do you typically share your travel plans with others, such as friends or family members, and what are the biggest challenges you encounter in doing so?
86%
have struggled with using multiple apps and websites when planning their travel
72%
of self-plan travellers will compare budgets between different plans
51%
find difficult sharing plan before and after the trip becuase it is hard to read ( in word doc. or excel)
User Journey
user journey with empathy
I created the user journey map to identify the detailed pain points and feelings the customer might go throught while planning and travelling  in the contemporary way.
I imagined ideal experiences and focused on how our personas think and behave rather than getting into specifics about interfaces, technologies or business goals.
before-travel
"Before Travelling"
We used experience mapping techniques to visualize the user experience throughout the whole shopping process across various touchpoints with the scheme. This allowed us to represent user pain points and it shows us we have to focus on the "Before Travelling.“
before-travel empathy
What does "travel plan" mean?
Our research revealed that the concept of 'travel plan' represented something different to users of the scheme. Users' motivations for starting a trip and generating information in the scheme differed, hinting at different requirements.
overall brainstorm diagram
The discovery phase was a quick, high‐intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client's vision, and begin research into user needs, behaviours and pain‐points. We also kicked off a technical discovery phase to understand feasibility and constraints.
📌 Definition
Hierarchy of Pain Points
01
01-multi destination
Cumbersome to search each leg of the journey since every map and app did it separately.
02
02-compare
Difficult to compare price, time, distance side-by-side with companions.
03
03-filter info
Cannot copy valid information directly from other people's travelogues or articles posted on other social media platforms with one click.
04
04-record and share
Unable to search precisely and share/record in real time without affecting the tour.
Competitive Analysis
direct competitor
potential competitor
tripit
Find Travel Plans in One Place
Forward confirmation emails as soon as you book a flight, hotel, car, or other reservation, simply forward it to plans@tripit.com, and we'll automatically add it to your trip
Itinerary and Map in One View
No more switching between different apps, tabs, and tools to keep track of your travel plans. It can collaborate with friends in real time, optimze route, import flight and hotel reservations, and export to Google Maps.
wandergo
The Vision
Understanding the usage contexts of the app helped me develop a clear vision of the tonal expectations of our users. To communicate the personality of our app to our client and team, I developed a set of experience principles. These were used to sense‐check design decisions, articulate core values and describe key attributes the app experience should uphold for both the users and the brand. The principles were used constantly to drive the aesthetic, feel and overall tonal direction of the app.
minimise the bad
Minimise The Bad
Our key priority for the early phases was to focus on primary user goals. Our first task-stripping the app to its core and focus on usability and conveniece of adding a location to your trip.
amplify the good
Amplify the Good
Beyond the obvious features, we saw opportunities to build a deep emotional connection with our users. Our vision was to create an honest, human app.
bring travellers together
Bring Travellers Together
We envisioned empowering world-wide  travelling culture, where travellers could co‐create safer and interesting routes and contribute to the community.
🎨Design
Information Architecture
Low-Fi Wireframes
Different knowledge levels
A very important aspect of this app is that we want this to be reliable for experts but also approachable for novices. Although heavily focused on in the Canvas Map, this is a design challenge that also drives much of the design decisions throughout the other app features.
Small Screen
Another challenge is the transition between horizontal desktop screen to limited vertical phone screen. Based on the UI principles of page overlay, I also add slide window to increase the possibility of interactivity.
Problems & Feedbacks
1
Main Pages Only
After the low-fi frames were sketched, I made a prototype with main pages only to test a couple of users. Without telling them the functions of each icon, I asked them to self-explore my prototype and provide any suggestions they want as they go through their own journey.
2
Affinity Diagram
After collecting insights from the participants, I made an affinity diagram to seek a pattern in the participants. This allows me to understand customers’ behaviors and frustrations during the “travel plan” process.
3
Usability Test
Then I made a usability study presentation to showcase the study’s quick recap, critiques, and recommendations. I was able to find logic issues related to perceived affordances, layout and search.
Structuring the Experience
Hifidelity Prototype of One User Scenario
After identifying the main 'plot‐points' in our scenarios, I defined the primary pathways our personas would explore through the app. Crafting several key user journeys was the best way to conceptualise and structure the proposed content and functionality.
💡Conclusion
Usability Test
The tasks included checking chat messages, exploring communities,  making a three-day travel plan, and comparing plans. throughout the tasks, I asked the users to talk through their though process and speak out when something is unclear or makes them irritated.
I invited 13 people to try out the prototype for useability test. I made a research plan where I outlined research goals, questions I wanted to know the answer from, methodology, information about the participants, and a script with tasks to complete. Mainly I wanted to be sure that the “Add, Research, Generate” process is smooth without any friction.
Study Results
usability test study result
Main Route
All of the users were able to lo through the “add, search, generate” process and think it is well organized, especially love the cards.
Comparison Function
5 of 13 people didn’t notice the comparison function at first. They were amazed after I told them and love this function once they know how to use it.
Suggestions
From Instructors
1. Very realistic prototype interactions, greate name, logo, and simulations.
2. Can explore more on the post and posted journeys since you include them as part of the design. It will show more about the accessibility and possibility of the app.
From Other Designers
1. Really like the “Find Companion” function. Never see it before.
2. Every design choice has a reason. It is extremely important to do UX research to define users. It is fine to keep universal now, but for upcoming developments, try to focus on specific areas(problems) to improve user experience.
From Potential Users
1. Want to see more of how to actually edit and track on phone during the journey. Need a transition between the technical part and the social part.
Potential Improvements
About the Hi-Fi Prototype
1. Show the possibility to go to any universal parts when making a plan (copy community, send message, change settings...
2. Adding one last step of comparing two plans
3. Made a toB scenario showing how companies can sell their package
Thanks for Reading
Back to Project List
See Next Work
Copyright © 2020-2024 Xinyu Guo. All Rights Reserved
overview iconphone icon research icondefine icondesign iconconclusion icon