↑
Nori Page
Brand Identity · Product Design

Wanderlust

An app designed to inform and provide updates based on your location.

Role
Sr. Web Designer
Timeline
36 weeks
Scope
Brand identity, logo, research, IA, UI
Tools
Sketch
Login
Location permission
Explore
Park detail

Overview

Overview

This is an app that would be connected to a designed toolkit, Wanderlust. It is an app designed to inform and provide updates based on your location. The app allows you to browse locations or activities near you or search for something more specific. Set filters to see what you want to see most and drown out the unwanted information. Based on your favorite locations, the app will send out notifications that are relevant to the user.

In my research, I tried to focus on improving the overall experience of the users journey as they find their own adventure through the app.

Problem

An issue that has bothered a lot of people is the inefficiency of keeping various features under one interface.

The advancement of technology has produced many societal benefits. Nevertheless, it often serves as a double-edged sword and promotes negative consequences. This became more evident with the Covid19 pandemic back in 2019. The pandemic upended many people's work lives and leisure time, participation in outdoor recreation increased. Approximately 20% may be new to outdoor recreation during the pandemic. Meanwhile, more than 13% of Americans ceased participation in outdoor recreation during the same time period.

Goals

The goal was to find a way to interlace google maps and instagram to create an all-in-one app.

  • Keep the users safe from unpredictable events.
  • Help individuals be reintroduced to the outdoors.
  • Inform users about hidden gems such as camping spots based on the users location.
  • Provide current updates about COVID19 cases, weather and national disasters based on their location.
  • Create a fun and adventurous user experience that keeps the user inside the app instead taking them to external resources.
  • Fuse features of Instagram and Google Maps together to create an all-in-one app.

Research

Initial Research

In my research, I explored the different types of camping that existed and what it entailed. My search wasn't limited to one season since people aren't afraid to adventure in any climate.

During this stage, I started to put together who my target audience was. Ideally, I wanted to target adults between 21-40 years old, who fell into low-medium income. The characteristics that would describe them includes, outdoorsy, extremists, adventurous, nature lover, and new comers of camping.

I brainstormed ten descriptive words that would be used to describe the app.

Discovery notes
Discovery notes

Sketches and site map

Sketches · Site Map

I started the design process by sketching out my initial ideas. This is the way I iterate through many design options quickly.

My users include people who desire adventures, but don't know where to go. Individuals who are spontaneous and love being out in nature. The pain points of some of these users mainly revolve around unpredictable situations such as weather, covid19 cases and natural disasters such as wild fires.

During my process, I kept this information in mind and made multiple versions based on keeping the users safe.

Sitemap
Sitemap

Wireframes

Wireframes · Low-Fidelity

I created wireframes for testing purposes. It was useful to design the layout of the UI components to see if they stayed within the three click range. I made both low and high-fidelity wireframes. All wireframes had many versions with different adjustments. All my low-fidelity wireframes were sketched out on paper, while my high-fidelities were fleshed out in Sketch.

[Start of this paragraph was cut off in the screenshot] …them looked over by a colleague of mine. In addition, I had it looked over by one of my target audiences to further examine what needed to be changed. This was the first round of feedback I received during my development stage. I took this feedback and went back to my drawing board and revamped my design and came up with the final version below.

Paper wireframes
Paper wireframes

Final screens

Wireframes · High-Fidelity

Once I tested out all usability mistakes, I designed the final screens in Sketch. I followed the guidelines of android, but kept in mind of the differences between android and iOS. My final design reflects my learnings about my users by providing an engaging and effective solution to rediscovering the outdoors after the pandemic. It promotes the safety of the user by providing notifications on potentially dangerous or events that may hinder their journey in the outdoors.

Login
Login
Location permission
Location permission
Explore
Explore
Park detail
Park detail

Mockup

Building the brand

I designed a brandmark that consists of a combination of a monogram and wordmark. The brand colors represent the four seasons, while the monogram is a combination of the letter ‘W’ and a tent.

Wanderlust logo system: primary lockup, clear space and minimum size
Logo system
Wanderlust logo usage on light, pine and dark neutral backgrounds
Logo usage
Wanderlust color palette with six colors and recommended balance
Color palette
Wanderlust photography direction
Photography
Wanderlust voice and messaging principles
Voice and messaging

Reflection

This project represents an early foundation for the work I now do as a Senior Website Designer. I designed the app to bring useful features from several platforms into one cohesive, user-centered experience. Developing it from the initial concept through research, interface design, and prototyping strengthened my understanding of the complete UX/UI process. Today, I apply those same principles while designing responsive websites, creating scalable design systems, documenting reusable components, and collaborating with cross-functional teams from discovery through launch. Looking back, this project not only confirmed my interest in UX/UI design but also helped establish the approach I continue to use: balancing user needs, visual clarity, technical requirements, and business goals to create intuitive digital experiences.

Next project Nerve Product Design · App View case study →
Nerve device mockup