Wander

Merging photography and exploration into a seamless mobile app experience

I designed an innovative app that blends two dissimilar existing apps in a way that modifies people's behavior. The goal was to take the controls and micro-interactions from each app that best complement each other to make something uniquely useful: 1 + 1 = 3! I also created a first time user experience (FTUE) for this app to ensure successful onboarding and long-term engagement.

SkillS

Empathy

Microinteractions

UX Design

Behavior Modification

Tools

Figma

FigJam

Duration

8 weeks

Course

Behavior: Core IXD Studio

Wander

Merging photography and exploration into a seamless mobile app experience

I designed an innovative app that blends two dissimilar existing apps in a way that modifies people's behavior. The goal was to take the controls and micro-interactions from each app that best complement each other to make something uniquely useful: 1 + 1 = 3! I also created a first time user experience (FTUE) for this app to ensure successful onboarding and long-term engagement.

SkillS

Empathy

Microinteractions

UX Design

Behavior Modification

Tools

Figma

FigJam

Duration

8 weeks

Course

Behavior: Core IXD Studio

Wander

Merging photography and exploration into a seamless mobile app experience

I designed an innovative app that blends two dissimilar existing apps in a way that modifies people's behavior. The goal was to take the controls and micro-interactions from each app that best complement each other to make something uniquely useful: 1 + 1 = 3! I also created a first time user experience (FTUE) for this app to ensure successful onboarding and long-term engagement.

SkillS

Empathy

Microinteractions

UX Design

Behavior Modification

Tools

Figma

FigJam

Duration

8 weeks

Course

Behavior: Core IXD Studio

Role

Role

I was the sole designer and researcher for this college class project.

I was the sole designer and researcher for this college class project.

Design Process

Design Process

FINAL PRODUCT VIDEO

FINAL PRODUCT VIDEO

CONTEXT

CONTEXT

Researching the two mashup parent apps

Researching the two mashup parent apps

I researched and analyzed the parent apps: VSCO and Waze. I searched up their core purposes, features, and user interactions. My goal was to take the best microinteractions and design patterns from each, ensuring they complement each other well in the new app.

I researched and analyzed the parent apps: VSCO and Waze. I searched up their core purposes, features, and user interactions. My goal was to take the best microinteractions and design patterns from each, ensuring they complement each other well in the new app.

Main purpose

Main purpose

Provide navigational assistance, real-time traffic updates, and route optimization to drivers

Provide navigational assistance, real-time traffic updates, and route optimization to drivers

Specializes in creative photo and video editing, doubling as a social platform for users to share their edited visuals

Specializes in creative photo and video editing, doubling as a social platform for users to share their edited visuals

Main target user

Main target user

Individuals who drive regularly, such as daily commuters, long-distance travelers, and anyone seeking efficient and real-time navigation information

Individuals who drive regularly, such as daily commuters, long-distance travelers, and anyone seeking efficient and real-time navigation information

People who love artistic photos and videos and want to express themselves creatively through editing and sharing.

People who love artistic photos and videos and want to express themselves creatively through editing and sharing.

Screenshots

Screenshots

Personality of interaction

Personality of interaction

Playful, friendly

Playful, friendly

Professional, minimal

Professional, minimal

But what are microinteractions?

But what are microinteractions?

I came across a new term in class and learnt how microinteractions are small, subtle changes that happen when the user interacts with a trigger. They convey something to the user, like showing the system is working, preventing mistakes, or adding a bit of the brand’s personality to make the interaction more clear and enjoyable.

I came across a new term in class and learnt how microinteractions are small, subtle changes that happen when the user interacts with a trigger. They convey something to the user, like showing the system is working, preventing mistakes, or adding a bit of the brand’s personality to make the interaction more clear and enjoyable.

Inherited microinteractions

Inherited microinteractions

Map

Map

Location search

Location search

Navigation

Navigation

Clicking on other users cars will become clicking on locations that have been marked as photographic by other users

Clicking on other users cars will become clicking on locations that have been marked as photographic by other users

Photo editing tools

Photo editing tools

Community space to join and share photos

Community space to join and share photos

Discover photos clicked by other people (and the locations the photos were clicked in)

Discover photos clicked by other people (and the locations the photos were clicked in)

BACKGROUND

BACKGROUND

What am I solving for?

What am I solving for?

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

THE PROBLEM
THE PROBLEM

How might we help photography enthusiasts in their community deal with discovering and capturing beautiful moments?

How might we help photography enthusiasts in their community deal with discovering and capturing beautiful moments?

THE SOLUTION
THE SOLUTION

Explore. Navigate. Create — Wander

Explore. Navigate. Create — Wander

Wander is a handy tool for photography enthusiasts to easily discover scenic spots shared by fellow enthusiasts, navigate seamlessly, and capture beautiful moments creatively.

Wander is a handy tool for photography enthusiasts to easily discover scenic spots shared by fellow enthusiasts, navigate seamlessly, and capture beautiful moments creatively.

DESIGN

DESIGN

What will the app look like?

What will the app look like?

Before making the app, I used storyboards and moodboards to guide the content and visuals for the screens.

Before making the app, I used storyboards and moodboards to guide the content and visuals for the screens.

STORYBOARD
STORYBOARD

The storyboard helped guide what screens are most appropriate and need to be designed to convey the app's core functionality and use cases.

The storyboard helped guide what screens are most appropriate and need to be designed to convey the app's core functionality and use cases.

MOODBOARD
MOODBOARD

For idea on what the app should look like, I created a moodboard with elements from both the apps. The colors and playful visuals from Waze and the sophisticated and dark aesthetic of VSCO.

For idea on what the app should look like, I created a moodboard with elements from both the apps. The colors and playful visuals from Waze and the sophisticated and dark aesthetic of VSCO.

DESIGN SYSTEM
DESIGN SYSTEM

The moodboard guided the final design system where I decided to change some of the minor elements like the typography.

The moodboard guided the final design system where I decided to change some of the minor elements like the typography.

PROTOTYPING

PROTOTYPING

Ideation

Ideation

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

LO-FI PROTOTYPE
LO-FI PROTOTYPE

I created the first few screens to get an idea of what elements will be borrowed form both the parent apps.

I created the first few screens to get an idea of what elements will be borrowed form both the parent apps.

What is the desired outcome?

What is the desired outcome?

Since this project was from the behavior class. We applied the behavior theory to make sure the app motivated the intended behavior. This is a super-useful concept to remember for making sure the app is a hit!

Since this project was from the behavior class. We applied the behavior theory to make sure the app motivated the intended behavior. This is a super-useful concept to remember for making sure the app is a hit!

https://behaviormodel.org/

B (behavior occurs when) = MAP (motivation, ability, and prompt come together at the same time)

Wander improves both motivation and ability by makes photography more fun by bringing people together, helping them explore exciting places, and simplifying ways to be creative with photos.

https://behaviormodel.org/

B (behavior occurs when) = MAP (motivation, ability, and prompt come together at the same time)

Wander improves both motivation and ability by makes photography more fun by bringing people together, helping them explore exciting places, and simplifying ways to be creative with photos.

FOGG BEHAVIOR MODEL
FOGG BEHAVIOR MODEL

Wander improves both motivation + ability

Wander improves both motivation + ability

Makes photography more fun by bringing people together, helping them explore exciting places, and simplifying ways to be creative with photos.

Makes photography more fun by bringing people together, helping them explore exciting places, and simplifying ways to be creative with photos.

Final prototype

Final prototype

The part where my idea really comes to life! I designed the app screens, putting the moodboard to use and using the microinteractions research to make sure the app accomodates both the parent apps personality in some way. I also made an animated the video to advertise the app.

The part where my idea really comes to life! I designed the app screens, putting the moodboard to use and using the microinteractions research to make sure the app accomodates both the parent apps personality in some way. I also made an animated the video to advertise the app.

Click to see video

FTUE

FTUE

What is a first time user experience (FTUE)?

What is a first time user experience (FTUE)?

As the name suggests it is the first time the user interacts with the product and it is necessary to create a good impression and also hook the user to make sure they come back.

As the name suggests it is the first time the user interacts with the product and it is necessary to create a good impression and also hook the user to make sure they come back.

And who is this experience for?

And who is this experience for?

To understand who the first time users for Wander potentially could be, I focused on one persona. Her name is Lila. She is a photography enthusiast who loves exploring and capturing beautiful moments.

To understand who the first time users for Wander potentially could be, I focused on one persona. Her name is Lila. She is a photography enthusiast who loves exploring and capturing beautiful moments.

Here are the general traits of the target first time users:

Here are the general traits of the target first time users:

DEMOGRAPHIC
DEMOGRAPHIC

Young adults (18-26)

Young adults (18-26)

INTERESTS
INTERESTS

#Photography📸

#Travel✈️

#Explore🗺️

#Photography📸

#Travel✈️

#Explore🗺️

GOALS
GOALS

🔍 new photography spots.

Connect 🔗 with fellow photographers.

Improve 📷 skills.

🔍 new photography spots.

Connect 🔗 with fellow photographers.

Improve 📷 skills.

CHALLENGES
CHALLENGES

🔍 inspiration and 🧭 easily.

Balance hobby with studies 📚📚📚.

🔍 inspiration and 🧭 easily.

Balance hobby with studies 📚📚📚.

And where is this FTUE likely to occur?

And where is this FTUE likely to occur?

I thought of three ways the photography enthusiasts might use Wander:

I thought of three ways the photography enthusiasts might use Wander:

Has extra time

Has extra time

Goes out every weekend

Goes out every weekend

Uses instagram for inspiration

Uses instagram for inspiration

But what will trigger the user to download the app?

But what will trigger the user to download the app?

The app’s appeal to users like Lila would be triggered through social media and word-of-mouth, with influencers sharing their discoveries from Wander, and friends recommending it for its unique features.

The app’s appeal to users like Lila would be triggered through social media and word-of-mouth, with influencers sharing their discoveries from Wander, and friends recommending it for its unique features.

Social Media
Social Media

Influencers that Lila follows post content from the app

Influencers that Lila follows post content from the app

Word of Mouth
Word of Mouth

Close friends/ family shares seeing interesting places on the app

Close friends/ family shares seeing interesting places on the app

PROTOTYPING & ANIMATING

PROTOTYPING & ANIMATING

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

To challenge myself to design for people I don’t relate to I choose my target audience as: photography enthusiasts. The context being when photography enthusiasts are exploring or taking unexpected trips, they often struggle to find both stunning locations and easy navigation. They often have to switch between different apps for navigation, location discovery, and photo sharing. 

Introduction to Wander

Introduction to Wander

When the user opens the app, they are prompted to become a Wanderer by sharing their mobile number.

Most people tend to skip sharing contact information when they haven't tried the app yet. Next step is to get their location so that the photographic spots around them can be shared.

When the user opens the app, they are prompted to become a Wanderer by sharing their mobile number.

Most people tend to skip sharing contact information when they haven't tried the app yet. Next step is to get their location so that the photographic spots around them can be shared.

Investment: Location permission

Investment: Location permission

Navigate Mode

Navigate Mode

When the user first opens the app, they get a tutorial. It starts by introducing the features of Navigate Mode- where they can explore photography spots.

When the user first opens the app, they get a tutorial. It starts by introducing the features of Navigate Mode- where they can explore photography spots.

Nudging users to sign up to be a Wanderer

Nudging users to sign up to be a Wanderer

The member-only feature requires them to become a Wanderer. The user signs up with their mobile number.

The app uses multiple variable rewards in the form of in-app awards and recognitions.

The member-only feature requires them to become a Wanderer. The user signs up with their mobile number.

The app uses multiple variable rewards in the form of in-app awards and recognitions.

Investment: Contact information

Investment: Contact information

Variable reward: Gained access to member-only content

Variable reward: Gained access to member-only content

End of tutorial

End of tutorial

To avoid overwhelming the user with tutorials. The tutorial ends with telling them where to access the tutorial later.

To avoid overwhelming the user with tutorials. The tutorial ends with telling them where to access the tutorial later.

Studio Mode

Studio Mode

The user explores studio mode on their own, earning more variable rewards and invests more by allowing push notifications.

The user explores studio mode on their own, earning more variable rewards and invests more by allowing push notifications.

Investment: Notification permission

Investment: Notification permission

Variable reward: In-app award/ recognition

Variable reward: In-app award/ recognition

How do we nudge the user to use the app again?

How do we nudge the user to use the app again?

By adding external triggers I remind the user of the app, making them open the app again.

By adding external triggers I remind the user of the app, making them open the app again.

Variable Rewords: Notifications

Variable Rewords: Notifications

Activity in followed/joined spaces

Activity in followed/joined spaces

Likes on uploaded photos

Likes on uploaded photos

Follow requests

Follow requests

1 week later. Lila plans for another trip over the weekend and remembers Wander. She notices that the app has also pushed a notification:

1 week later. Lila plans for another trip over the weekend and remembers Wander. She notices that the app has also pushed a notification:

Examples of possible notification triggers.

Examples of possible notification triggers.

How do we measure success of the first time experience?

How do we measure success of the first time experience?

Who doesn’t like knowing how successful they are in their goals? To see that the FTUE is successful I would need to measure the following:

Who doesn’t like knowing how successful they are in their goals? To see that the FTUE is successful I would need to measure the following:

# app downloads

# app downloads

# navigations completed

# navigations completed

# spaces joined/ followed

# spaces joined/ followed

# photos uploaded / liked

# photos uploaded / liked

FINAL THOUGHTS

FINAL THOUGHTS

This case study shows how design, behavior theory, and micro-interactions can combine to create a product that resonates with its target audience and encourages ongoing use. By creating a product that is more than just the sum of its parts, I learned how to deliver a thoughtful and effective user experience.

This case study shows how design, behavior theory, and micro-interactions can combine to create a product that resonates with its target audience and encourages ongoing use. By creating a product that is more than just the sum of its parts, I learned how to deliver a thoughtful and effective user experience.

Importance of knowing the underlying context of use

Importance of knowing the underlying context of use

This project taught me the importance of understanding the user’s context and crafting experiences that not only engage but also resonate with their passions. From the other presentations in my behavior class, I learned how different behavioral models can be applied to various contexts to influence user behavior effectively.

This project taught me the importance of understanding the user’s context and crafting experiences that not only engage but also resonate with their passions. From the other presentations in my behavior class, I learned how different behavioral models can be applied to various contexts to influence user behavior effectively.

Creating a good first time experience

Creating a good first time experience

Learned what information should be considered when creating FTUE; it is good to understand from where the user is coming to the app from and what they are looking for to help them stay/ use the app again.

Learned what information should be considered when creating FTUE; it is good to understand from where the user is coming to the app from and what they are looking for to help them stay/ use the app again.

Different behavioral models

Different behavioral models

From the other classmates’ presentations, I learned the different behavioral models applied to different contexts.

From the other classmates’ presentations, I learned the different behavioral models applied to different contexts.

"How you do small things is how you do big things"

~ My mumma

© 2024 Tanisha Rana | Designed, drawn, and slightly overthought by me.

"How you do small things is how you do big things"

~ My mumma

© 2024 Tanisha Rana | Designed, drawn, and slightly overthought by me.

"How you do small things is how you do big things"

~ My mumma

© 2024 Tanisha Rana | Designed, drawn, and slightly overthought by me.