WANDER

Bring together all the pieces of your trip and turn that into a simple day by day narrative.

View Prototype
Overview

Wander is a travel journal which allows the user to create a travel profile, log their past trips, connect with other travellers and wish-list their future travel destinations.

I designed the product from end to end and completed the core experience of the app.

Role and responsibilites
Product Designer: Research and Synthesis, Competitor Analysis, Personas, User Flows, Wire framing, Prototyping, Usability Testing, Visual Design, UI Design
Tools
Adobe XD, Figma, Miro, Invision
Duration
1.5 months for Design

1. DISCOVER

The Problem

Traveler's want a way to record their travel journey because they want to share the experience with friends and family.

User Interviews

The interviews were focused on two types of audiences. Adults who like to travel and document their trips. Bloggers/Influencers who want a way to share their journey with their audience. A series of open-ended interviews were conducted, asking users about the why’s and how’s of their travel journaling habits. These were recorded on audio, which really helped when it came to mapping out some of the trends. I created an affinity map on Miro, and was able to identify some main issues and a persona that encapsulated these key insights.

Insights

“I wish there was a way to tag the name of the place on my photo because I don’t keep track of details/names”

Remembering details

Post-Trip

“I love to look back at photos, print them out and make albums”

Notifications

“I try to use less tech and disconnect as much as possible”

2. DEFINE

Persona 1

Persona 2

HMW Statements

3. DEVELOP

User Flow

With the project and Lisa’s goals in mind, I created a user flow diagram, identifying the key screens she would need in order to keep a track of her journey. By mapping these pathways out, I was able to define required screens and develop a logical flow.

Solution

Next I created quick layouts for each screen in the flow. Without worrying about detail, I focused on the elements that make up each page. Once I had my sketches drawn I went into quick guerrilla testing using Marvel Pop to test the sketches. This feedback was very helpful as it showed me pretty quickly that there were quite a few screens I was missing.

Low Fidelity Prototype

After getting some great feedback on my sketches and adding in the missing screens, I jumped into wireframes.

4. DELIVER

UI Design

I now wanted to think about how we would convey the brand visually. Wander’s branding reflects the attributes: Exciting, Joy, Fun, Simple, Modern and I worked on setting the visual direction of the branding to convey it’s unique identity.

Logo
Colors
Typpography

The Final Product

View Prototype

Get inspired from other user diaries

On the home page, the user can see the diaries posted by their friends and family. They can like, comment and add the diary to their wishlist

Automatically fills in all the information

Once the user selects location and photos, it automaticalls inputs all other data. The user has an option to edit or delete anything before publishing the diary.

User Profile

Once the user publishes the diary, it saves into their own profile so they can take a look or share it with friends and family. They can also save other people’s diary to their wishlist and can increase the statstics as they publish more diaries

TAKEAWAYS AND NEXT STEPS

Takeaways
01. User Research
I realized after conducting a few initial interviews that asking directed but open questions is important to validating my hypothesis. Without this, interviews end up with vague answers on irrelevant topics which do not answer my assumptions.
02. Design system matters
I started working on sketches without a design system, and didn’t expect there were so many screens, and very quickly noticed some inconsistency. The design system was a guide to keep all elements consistent. It's a small library for now but I can see the importance of adding more to it on a larger scale.
Next Steps
• Design the onboarding experience and add more features
• Make the app more accessible, e.g: add dark mode, add more languages