Product Purpose
Crowd Atlas is a social travel planning app designed to help travelers plan, document, and share their experiences.
The purpose of the product is to make travel planning experience as frictionless as possible by eliminating the redundant steps and processes so users can save time when creating itineraries.
Research Findings

5 out of 5 users I interviewed reported they disposed of their itineraries or store them in an archive folder after they are done traveling.

How Might We Statements
By conducting surveys and interviews, I gained insightful knowledge about how people go about in creating their itineraries. I started writing those insights as an affinity map to synthesize the data for problem framing.
By using the 'How Might We' statements, three questions popped out and that are broad enough to generate multiple ideas but very specific in resolving the issues at hand.
01
How might we recycle or make use of old itineraries?
02
How might we help reduce the back and forth transitions between multiple platforms during travel planning?
03
How might we help people share their travel experiences better?
Persona​​​​​​​
Once I began to understand the users’ needs and their pain points, I created a user persona as a living document that I continue to adjust as I progressed through the development.
Ideation
Three main ideas stood out to me as I see how they could form into one cohesive solution to solve the problem stated from the HMW questions.

01
Social media platform for traveling to encourage people to display/share their old itineraries.
02
Hybrid of map, search function, and notes to enable all-in-one platform for travel research and itinerary creation.
03
Ability to quickly mirror an entire itinerary or pick out a single location from people’s itinerary to save time.
User Stories
To further refine the core ideas, I did a quick round of user stories by putting myself in the shoes of the users and empathizing with them. Selected user stories are prioritized based on the user's primary goal, to reduce friction in travel planning methods and speed up the itinerary creation process. These user stories are the basis of the product features that I wanted to introduce.
Sitemap & User Flows
The sitemap helps paint the picture while the user flow breaks down the page progression to determine the steps needed from a high level perspective.

Crowd Atlas sitemap v2.0

Creating new itinerary user flow

Sketching Red Route Scenes
Prioritizing Features -> MVP
Sketching the red route scenes provide greater visibility of how the page progression might look on both desktop view and mobile view. It also helps me decide which features are most important to build first for the MVP (Minimum Viable Product).
Low Fidelity Prototype
I used a low fidelity prototype to conduct guerilla usability testing from 5 individuals. I discovered that people have different priorities when they're creating an itinerary but the first thing they always do is always to search for a destination followed by locations.

Guerilla Usability Testing

Moodboard & Style Guides
Mood Board
I picked images that represent Crowd Atlas brand attributes: inspiring, empowering, information sharing, and collaborative.

Color Palette
I chose a color combination picked out from the mood board which symbolizes the color of nature. These colors include viridian (green), (blue) sapphire, maximum (yellow) red, and tuscany (orange).

Accessibility
A quick color combination checkup using whocanuse.com determines whether the color palate that I chose accommodate the Web Content Accessibility Guidelines (WCAG) standards.

CONTRAST RATIO (
6.63:1)

WCAG GRADING (
AA)

Iconography
I used a combination of awesome icons and ionic icons (both are open-source assets for mobile app framework) with slight modifications.
High Fidelity Prototype
I created a high fidelity prototype with detailed animation to help the user feel more aware of every page transition and where they are during the process. Prior to adding the animation, I noticed some users would try to tap on the bottom footer navigation bar to exit a certain process which resulted in delays with completing a specific task. 
After implementing the proper animation and adjusting the easing method, the user's interaction appeared to be more intuitive during user testing as they were able to complete all the tasks given to them in a shorter period of time in comparison to the previous version.
View the prototype by clicking the button below

High Fidelity Mockup 1 - Home Page (Discover)

Usability Testing 1
I conducted usability test with 5 users initially to test the product.
I discovered that some of the users struggled in completing the itinerary creation process due to a lack of UI elements and the necessary buttons to close the loop. This is quite apparent as the users paused on the last page of a given task looking for a 'next button' or 'save button'. After adding this button on all the required pages, I noticed a big improvement as the users can now consistently complete the task and continue to the next set of task without exiting the itinerary page.
• Missing critical buttons to complete a task.
• Edit trip button inside itinerary is confusing.
• Users wanted to edit/add items inside organize page.
• Creating expense page was overly complicated for the users.
• Total ‘Trip Budget’ feature in ‘Discovery’ page received negative sentiments.
• ‘Check list’ feature is unnecessary, instead replacing it with ‘add a note’ is more universal.

Click here to see the problems

Usability Testing 2
The second round of usability test with 5 more users resulted in no critical issues but revealed a lot more suggestions from the users that could help improve the product. Some users wanted to do certain tasks from multiple local navigation access point which derailed them from the original intended path. However, in a real product, what the user did was actually something that should be feasible and implemented by the developer.
• When asked to add a location from the bucket list, the user tapped on the local navigation instead of the “+” icon within the itinerary page.
• 'Mirror Trip' button is not clearly visible for some users as they were clicking on the other buttons first before finding it later.
• Viewing the map inside the itinerary is not very obvious for some users.
Design Artboards
The high fidelity prototype was designed entirely in Adobe XD. I organized the artboards according to the Red Routes and each art board is placed in a left-right orientation to ensure ease of readability. 
Reflections
• I learnt that conducting early usability test is critical in finding out whether certain features are still desirable.
• Creating detailed prototypes is extremely time consuming. Although it has its benefits, the time I spent could’ve been put more on understanding the users’ preferences and expectations first to improve the user workflow.

Product Improvement
• If I could improve the product, I would like to incorporate trip deals such as flight, hotels, and activities as these are considered top priorities for many users during my interview.
• Simplifying the visual content on each page and fixing the balance as well as content hierarchy.
• I would like to get some metric results of how Crowd Atlas workflow can save people time in comparison to the standard word processing tools such as Google docs and phone note app.
Back to Top