Discovery and Research
Competitive Analysis And The Gaps
There was little to no competition for what we were trying to build. There are apps that help users navigate a location they've never gone to before. Besides their ability to add some personalization, none of them have features that we envisioned for Wander.
Personas
We wanted to design for extremes so that Wander catered to users with a wide range of preferences, needs, and travel styles. We created these personas to guide our app design and think about the features that we wanted.
Freya the spontaneous traveler is the user that would most likely use our product as someone that’s naturally spontaneous. We also wanted to consider how Wander could serve users who aren't as spontaneous and free-spirited as Freya.
Wireframing
Brainstorming The App Design
User Story Map
Together, we brainstormed key features for Wander. I wanted to design a travel diary for users like Freya who value recording things and sharing on social media. I also recognized that users would benefit from some level of customization, particularly with choosing location types to personalize user's experience.
3 Main Features
Finding mysterious places to visit
Personalization: setting location preferences
Storing memories
Activity 1 (Travel Mode)
We created a Travel Mode features intended to provide more anxious users that have overplanning tendencies with a little more structure in the beginning, allowing them to feel like they have a little more control over where they were going.
In Travel Mode, the user specifies their desired end destination, and while they are en route, the app sends them notifications about nearby mysterious spots they might be interested in exploring.
Activity 2 (Wander Mode)
Wander Mode catered to users that want to be spontaneous. We planned for these two modes to be the main features of Wander.
Iterations and More Feedback
4 Major Improvements to the Design of Wander
After various iterations and testings of our designs.
First Major Improvement
I began to doubt Travel Mode's alignment with the app's overarching objectives. We recognized the conflicting nature of having both Wander Mode (which promotes spontaneity and discovery) and Travel Mode (which caters to more planning-oriented users). We were also trying to solve for an issue that wasn't really there.
Removal of Travel Mode
Travel Mode meant to help more anxious travelers feel comfortable.
Users have less of a need for reassurance and more of a need for inspiration.
Having both Travel and Wander Modes was contradicting to the app’s purpose.
Interviewing
After interviewing, 30+ people, they shared that they have used a navigation app to go somewhere new, despite the fact that most of them were not spontaneous travelers. This feedback helped us realize that people have less of a need for reassurance and more of a need for inspiration, which is what our app’s main aim was.
We discarded Travel Mode and pivoted towards providing inspiration through Wander Mode.
Second Major Improvement
Refining Wander Mode
Wander Mode was originally designed to make anonymous suggestions throughout the day.
Arbitrary notifications might disrupt daily activities and annoy users.
Give users more autonomy over when they want to explore: press Wander button and begins journey.
Third Major Improvement
I didn’t like the direction we were going in because the appeal of Wander was that it provides a unique service for travelers. The original Home Screen felt too "Uber-like." I insed designed a more comprehensive home screen page that displayed all the main features of the app. Filter preferences at the top, Travel Journal, and the Wander button at the bottom.
Different Home Page Design
User research with our initial wireframes revealed that Wander felt reminiscent of existing navigation applications such as Google Maps and Waze.
I removed the navigation in the home screen entirely because all key features of the app fit on the home page. I also wanted to draw attention towards the primary feature of the app, the Wander button. The nav bar reppears when the user explores other areas of the platform.
Fourth Major Improvement
We thought gamifying Wander would make it more fun for users, as it wasn't just a navigation app. However, user interviewees expressed various concerns so we removed the use of augmented reality.
Removal of AR During Wander Mode
Augmented reality feature can drain battery life
AR made it feel like there were two realities
Staring at phone would be too distracting (similar to PokemonGo)
Designing A New Map
We decided to change the map and drew inspiration from Candy Crush. Instead of displaying the entire surrounding area, we wanted to conceal it, to make it quest-like.
The map still serves the same purpose as navigational apps like Google Maps by providing the route to the end location, ensuring users have the necessary guidance to reach their destination.
We included ETA and distance indicators because user testing informed us that those were essential to any navigation feature.
Visual Design
Design System
Screen design
For our background screen, Luc and I created a linear gradient that transitions from a lighter purple at the top and darker purple at the bottom. The intention behind this gradient was to convey a sense of depth and allude to the idea that there is more to discover below, similar to the vastness of the ocean. This aligns with the exploration aspect of Wander, as it symbolizes the hidden and unknown elements waiting to be explored.
Additionally, for the home screen, we incorporated blurry waves as a design element. This choice was inspired by the concept of oceans, further emphasizing the idea of exploration. It adds a dynamic and immersive touch that visually connects to the theme of Wander and enhances the overall user experience.
Finally, we heavily incorporated a blurred background effect for modal popups to evoke feelings of mystery, curiosity, and exploration.
Color Palette
Purple represents exploration and mystery, aligning with the exploratory nature of Wander. It has long been linked to the realm of mystery and intrigue and evokes a sense of depth and allure. This color helped to create a captivating visual identity for the app.
Typography
We used Major Third as a scalar for all of our fonts starting with Paragraph as the base case. To reduce eye-strain, Wander uses #212427 or “Old Print” to reduce the level of contrast between the white backgrounds and our darkest colors. Finally, we used Display sparingly! It is meant for large impact labels.
Components
Icons
