Gaia GPS : iOS

Gaia GPS : iOS

Gaia GPS : iOS

Gaia GPS : iOS

Gaia GPS :
iOS

Gaia GPS is the best navigation app for adventurers and professionals to plan, navigate, and explore the wilderness around them.

Gaia GPS is the best navigation app for adventurers and pros to plan, navigate, and explore the wilderness around them.

Gaia GPS is the best navigation app for adventurers and pros to plan, navigate, and explore the wilderness around them.

Gaia GPS is the best navigation app for adventurers and professionals to plan, navigate, and explore the wilderness around them.

Gaia GPS is the best navigation app for adventurers and pros to plan, navigate, and explore the wilderness around them.

Design Challenge

Design Challenge

Design Challenge

Design Challenge

Design Challenge

Design a new feature where users can create and share folders. The goal is to allow users to plan, share, and collaborate with others on upcoming and past adventures.

Design a new feature where users can create and share folders. The goal is to allow users to plan, share, and collaborate with others on upcoming and past adventures.

Design a new feature where users can create and share folders. The goal is to allow users to plan, share, and collaborate with others on upcoming and past adventures.

Design a new feature where users can create and share folders. The goal is to allow users to plan, share, and collaborate with others on upcoming and past adventures.

Design a new feature where users can create and share folders. The goal is to allow users to plan, share, and collaborate with others on upcoming and past adventures.

The Problem

The Problem

The Problem

The Problem

The Problem

Gaia's layout was bound to the infamous "hamburger dungeon." Unfortunately, this architecture does not support intuitive context-switching between map and folder content. 

Gaia's layout was bound to the infamous "hamburger dungeon." Unfortunately, this architecture does not support intuitive context-switching between map and folder content. 

Gaia's layout was bound to the infamous "hamburger dungeon." Unfortunately, this architecture does not support intuitive context-switching between map and folder content. 

Gaia's layout was bound to the infamous "hamburger dungeon." Unfortunately, this architecture does not support intuitive context-switching between map and folder content. 

Gaia's layout was bound to the infamous "hamburger dungeon." Unfortunately, this architecture does not support intuitive context-switching between map and folder content. 

product-original

Those poor folders (left) are stuffed three taps deep into the dungeon. We must save them!

Those poor folders (left) are stuffed three taps deep into the dungeon. We must save them!

Those poor folders (left) are stuffed three taps deep into the dungeon. We must save them!

Those poor folders (left) are stuffed three taps deep into the dungeon. We must save them!

Those poor folders (left) are stuffed three taps deep into the dungeon. We must save them!

Revised Challenge

Revised Challenge

Revised Challenge

Revised Challenge

Revised Challenge

After much discussion with the team, it was decided that we would convert the app architecture from a side drawer layout to a tabbed layout, and include the sharing functionality.

After much discussion with the team, it was decided that we would convert the app architecture from a side drawer layout to a tabbed layout, and include the sharing functionality.

After much discussion with the team, it was decided that we would convert the app architecture from a side drawer layout to a tabbed layout, and include the sharing functionality.

After much discussion with the team, it was decided that we would convert the app architecture from a side drawer layout to a tabbed layout, and include the sharing functionality.

After much discussion with the team, it was decided that we would convert the app architecture from a side drawer layout to a tabbed layout, and include the sharing functionality.

My Approach

My Approach

My Approach

My Approach

My Approach

• Work with the team to distill core functionality
• Convince shareholders to deprecate "useless" functionality
• Find a home for orphaned functionality 
• Define which pages need to be redesigned
• Wireframe out all said pages
• Check in daily with the team
• Work with CEO on rapid prototypes
• Share with beta testers to gather more feedback
• Step into the visual design of the app
• Export and redline all the things
• Review visual polish with the devs

• Work with the team to distill core functionality
• Convince shareholders to deprecate "useless" functionality
• Find a home for orphaned functionality 
• Define which pages need to be redesigned
• Wireframe out all said pages
• Check in daily with the team
• Work with CEO on rapid prototypes
• Share with beta testers to gather more feedback
• Step into the visual design of the app
• Export and redline all the things
• Review visual polish with the devs

• Work with the team to distill core functionality
• Convince shareholders to deprecate "useless" functionality
• Find a home for orphaned functionality 
• Define which pages need to be redesigned
• Wireframe out all said pages
• Check in daily with the team
• Work with CEO on rapid prototypes
• Share with beta testers to gather more feedback
• Step into the visual design of the app
• Export and redline all the things
• Review visual polish with the devs

• Work with the team to distill core functionality
• Convince shareholders to deprecate "useless" functionality
• Find a home for orphaned functionality 
• Define which pages need to be redesigned
• Wireframe out all said pages
• Check in daily with the team
• Work with CEO on rapid prototypes
• Share with beta testers to gather more feedback
• Step into the visual design of the app
• Export and redline all the things
• Review visual polish with the devs

• Work with the team to distill core functionality
• Convince shareholders to deprecate "useless" functionality
• Find a home for orphaned functionality 
• Define which pages need to be redesigned
• Wireframe out all said pages
• Check in daily with the team
• Work with CEO on rapid prototypes
• Share with beta testers to gather more feedback
• Step into the visual design of the app
• Export and redline all the things
• Review visual polish with the devs

Discovery

Discovery

Discovery

Discovery

Discovery

Stripping away the visual clutter helps you focus on the core task

Stripping away the visual clutter helps you focus on the core task

Stripping away the visual clutter helps you focus on the core task

Stripping away the visual clutter helps you focus on the core task

Stripping away the clutter helps you focus on the core task

The goal here is to dig in with the team and distill the primary functions of the app. We then cross reference that against all the features, and deprecate those which do not fit. Finally, we find a home for the features that supports the primary functions and plays well with our user flows.

The goal here is to dig in with the team and distill the primary functions of the app. We then cross reference that against all the features, and deprecate those which do not fit. Finally, we find a home for the features that supports the primary functions and plays well with our user flows.

The goal here is to dig in with the team and distill the primary functions of the app. We then cross reference that against all the features, and deprecate those which do not fit. Finally, we find a home for the features that supports the primary functions and plays well with our user flows.

The goal here is to dig in with the team and distill the primary functions of the app. We then cross reference that against all the features, and deprecate those which do not fit. Finally, we find a home for the features that supports the primary functions and plays well with our user flows.

The goal here is to dig in with the team and distill the primary functions of the app. We then cross reference that against all the features, and deprecate those which do not fit. Finally, we find a home for the features that supports the primary functions and plays well with our user flows.

discover-tab-definitions

In order to prevent things getting placed into the wrong tab, I came up with tab definitions and listed their most basic functions.

In order to prevent things getting placed into the wrong tab, I came up with tab definitions and listed their most basic functions.

In order to prevent things getting placed into the wrong tab, I came up with tab definitions and listed their most basic functions.

In order to prevent things getting placed into the wrong tab, I came up with tab definitions and listed their most basic functions.

In order to prevent things getting placed into the wrong tab, I came up with tab definitions and listed their most basic functions.

photo-user-flow

With the tabs defined, I outlined the three major userflows of the app to make sure we had everything covered.

With the tabs defined, I outlined the three major userflows of the app to make sure we had everything covered.

With the tabs defined, I outlined the three major userflows of the app to make sure we had everything covered.

With the tabs defined, I outlined the three major userflows of the app to make sure we had everything covered.

With the tabs defined, I outlined the three major userflows of the app to make sure we had everything covered.

wireframe-tab-order

Figuring out the tab order was one of the more challenging bits.

Figuring out the tab order was one of the more challenging bits.

Figuring out the tab order was one of the more challenging bits.

Figuring out the tab order was one of the more challenging bits.

Figuring out the tab order was one of the more challenging bits.

pop-sample-2

In order to figure out the best tab order, I took the three best layouts and made  tappable prototypes with my phone and a markerboard. I was able to smash these together quickly and have the team members go through the above userflows to see which tab order ruled supreme. 

In order to figure out the best tab order, I took the three best layouts and made  tappable prototypes with my phone and a markerboard. I was able to smash these together quickly and have the team members go through the above userflows to see which tab order ruled supreme. 

In order to figure out the best tab order, I took the three best layouts and made  tappable prototypes with my phone and a markerboard. I was able to smash these together quickly and have the team members go through the above userflows to see which tab order ruled supreme. 

Researching the associated marketspace is the first step with all new projects I take on. I use this phase to take a close look at what succesful brands are achieveing, define any trends, and look for oppertunities to make a bold difference with my designs. 

In order to figure out the best tab order, I took the three best layouts and made  tappable prototypes with my phone and a markerboard. I was able to smash these together quickly and have the team members go through the above userflows to see which tab order ruled supreme. 

Locking in the structure allowed the dev team to start working while I moved forward with the complex interations.

Locking in the structure allowed the dev team to start working while I moved forward with the complex interations.

Locking in the structure allowed the dev team to start working while I moved forward with the complex interations.

Locking in the structure allowed the dev team to start working while I moved forward with the complex interations.

Locking in the structure allowed the dev team to start working while I moved forward with the complex interations.

Wireframes

Wireframes

Wireframes

Wireframes

Wireframes

Strip everything down to its core functionality to get that 10,000ft view.

Strip everything down to its core functionality to get that 10,000ft view.

Strip everything down to its core functionality to get that 10,000ft view.

Strip everything down to its core functionality to get that 10,000ft view.

Strip everything down to its core functionality to get that 10,000ft view.

wireframe-login-flow

Some of the more complex interactions needed their own wire flows to make sure we weren't missing anything.

Some of the more complex interactions needed their own wire flows to make sure we weren't missing anything.

Some of the more complex interactions needed their own wire flows to make sure we weren't missing anything.

Some of the more complex interactions needed their own wire flows to make sure we weren't missing anything.

Flow charting complex interactions.

wireframe-overview

With the main flow and structure decided upon, it was time to get into the weeds with wires.

With the main flow and structure decided upon, it was time to get into the weeds with wires.

With the main flow and structure decided upon, it was time to get into the weeds with wires.

With the main flow and structure decided upon, it was time to get into the weeds with wires.

Wireframing all the things.

Here are a few closeups of the wireframe pages showing the level of detail needed in this rearchitecture.

Here are a few closeups of the wireframe pages showing the level of detail needed in this rearchitecture.

Here are a few closeups of the wireframe pages showing the level of detail needed in this rearchitecture.

Here are a few closeups of the wireframe pages showing the level of detail needed in this rearchitecture.

Closeups of the wireframe pages showing the level of detail needed in this rearchitecture.

Visual Design

Visual Design

Visual Design

Visual Design

Visual Design

Time to reference the brand guide and bring some life to these old bones.

Time to reference the brand guide and bring some life to these old bones.

Time to reference the brand guide and bring some life to these old bones.

Time to reference the brand guide and bring some life to these old bones.

Time to reference the brand guide and bring some life to these old bones.

color-ui-conifer
color-ui-snow

Deciding the canvas color is my first step in building out any new app. We had two choices here, green or white.

Deciding the canvas color is my first step in building out any new app. We had two choices here, green or white.

Deciding the canvas color is my first step in building out any new app. We had two choices here, green or white.

Deciding the canvas color is my first step in building out any new app. We had two choices here, green or white.

Deciding the canvas color.

color-theory-sketch

Looking back at my brand guide, I came up with this visual representation of how color should be applied to the app.

Looking back at my brand guide, I came up with this visual representation of how color should be applied to the app.

Looking back at my brand guide, I came up with this visual representation of how color should be applied to the app.

Looking back at my brand guide, I came up with this visual representation of how color should be applied to the app.

Visual representation of how color should be applied to the app.

color-system-alt

I decided that going with white (snow) was our best option. The app is fairly technical with a lot of data being thrown at you. I wanted to get out of the way of that data and make sure the user wasn't distracted by the canvas.

I decided that going with white (snow) was our best option. The app is fairly technical with a lot of data being thrown at you. I wanted to get out of the way of that data and make sure the user wasn't distracted by the canvas.

I decided that going with white (snow) was our best option. The app is fairly technical with a lot of data being thrown at you. I wanted to get out of the way of that data and make sure the user wasn't distracted by the canvas.

I decided that going with white (snow) was our best option. The app is fairly technical with a lot of data being thrown at you. I wanted to get out of the way of that data and make sure the user wasn't distracted by the canvas.

I decided that going with white (snow) was our best option. The app is fairly technical with a lot of data being thrown at you. I wanted to get out of the way of that data and make sure the user wasn't distracted by the canvas.

tab-design-conversion

With the core color theory decided, it was time to start translating key wireframes to mocks.

With the core color theory decided, it was time to start translating key wireframes to mocks.

With the core color theory decided, it was time to start translating key wireframes to mocks.

Translating key wireframes to mocks.

Translating key wireframes to mocks.

tab-design-saved-evolution

One of the more difficult design challenges was differentiating map content from photography. 

One of the more difficult design challenges was differentiating map content from photography. 

One of the more difficult design challenges was differentiating map content from photography. 

One of the more difficult design challenges was differentiating map content from photography. 

Differentiating map content from photography. 

tab-design-icon-style

Another design challenge was figuring out how to visually distinguish folders that have been shared vs regular folders. After consultation with our userbase, we found that we did not need to draw extra attention to this and a simple change to the icon illustration (upper left) would suffice.

Another design challenge was figuring out how to visually distinguish folders that have been shared vs regular folders. After consultation with our userbase, we found that we did not need to draw extra attention to this and a simple change to the icon illustration (upper left) would suffice.

Another design challenge was figuring out how to visually distinguish folders that have been shared vs regular folders. After consultation with our userbase, we found that we did not need to draw extra attention to this and a simple change to the icon illustration (upper left) would suffice.

Another design challenge was figuring out how to visually distinguish folders that have been shared vs regular folders. After consultation with our userbase, we found that we did not need to draw extra attention to this and a simple change to the icon illustration (upper left) would suffice.

Another design challenge was figuring out how to visually distinguish folders that have been shared vs regular folders. After consultation with our userbase, we found that we did not need to draw extra attention to this and a simple change to the icon illustration (upper left) would suffice.

color-icons

Utilizing the defined color palette, I went forward and designed a cohesive icon set in the iOS outline style.

Utilizing the defined color palette, I went forward and designed a cohesive icon set in the iOS outline style.

Utilizing the defined color palette, I went forward and designed a cohesive icon set in the iOS outline style.

Utilizing the defined color palette, I designed a cohesive icon set in the iOS outline style.

Cohesive icon set in the iOS outline style.

With the visual foundation laid, it's time to dig in deeper with each tab.

With the visual foundation laid, it's time to dig in deeper with each tab.

With the visual foundation laid, it's time to dig in deeper with each tab.

With the visual foundation laid, it's time to dig in deeper with each tab.

With the visual foundation laid, it's time to dig in deeper with each tab.

tab-design-map-alt

Here is the map tab with the app's core purpose (left) and one of its main features: editing map layers (right).

Here is the map tab with the app's core purpose (left) and one of its main features: editing map layers (right).

Here is the map tab with the app's core purpose (left) and one of its main features: editing map layers (right).

The map tab with the app's core purpose (left) and one of its main features: editing map layers (right).

Map tab with the app's core purpose (left) and one of its main features: editing map layers (right).

tab-design-trip

A reimagined trip tab shows you the data you want to see in a clear and prioritized manner.

A reimagined trip tab shows you the data you want to see in a clear and prioritized manner.

A reimagined trip tab shows you the data you want to see in a clear and prioritized manner.

A reimagined trip tab shows you the data you want to see in a clear and prioritized manner.

Trip tab shows you the data you want to see in a clear and prioritized manner.

tab-design-discover

Discovering hikes was also built from the ground up, but that story is for another day.

Discovering hikes was also built from the ground up, but that story is for another day.

Discovering hikes was also built from the ground up, but that story is for another day.

Discovering hikes was also built from the ground up, but that story is for another day.

Discovering and filtering hikes.

tab-design-saved

Here's the saved tab in all its visual glory, including confirmation dialog designs. 

Here's the saved tab in all its visual glory, including confirmation dialog designs. 

Here's the saved tab in all its visual glory, including confirmation dialog designs. 

Here's the saved tab in all its visual glory, including confirmation dialog designs. 

Saved tab, including confirmation dialog designs. 

Deliverables

Deliverables

Deliverables

Deliverables

Deliverables

There's a whole lot more to an app's design than just its headers and fonts.

There's a whole lot more to an app's design than just its headers and fonts.

There's a whole lot more to an app's design than just its headers and fonts.

There's a whole lot more to an app's design than just its headers and fonts.

There's a whole lot more to an app's design than just its headers and fonts.

deliverables-fonts-small

One of the biggest problems with designing an entire app is that the font sizes, line weights, and colors can get away from you. Going back and building a style guide not only helps the developer's sanity, but also helps you design future pages in a consistent manner.

One of the biggest problems with designing an entire app is that the font sizes, line weights, and colors can get away from you. Going back and building a style guide not only helps the developer's sanity, but also helps you design future pages in a consistent manner.

One of the biggest problems with designing an entire app is that the font sizes, line weights, and colors can get away from you. Going back and building a style guide not only helps the developer's sanity, but also helps you design future pages in a consistent manner.

One of the biggest problems with designing an entire app is that the font sizes, line weights, and colors can get away from you. Going back and building a style guide not only helps the developer's sanity, but also helps you design future pages in a consistent manner.

One of the biggest problems with designing an entire app is that the font sizes, line weights, and colors can get away from you. Going back and building a style guide not only helps the developer's sanity, but also helps you design future pages in a consistent manner.

deliverables-redlines

Along with the style guide, I also redline every core page with padding, fonts, colors, and line weights.

Along with the style guide, I also redline every core page with padding, fonts, colors, and line weights.

Along with the style guide, I also redline every core page with padding, fonts, colors, and line weights.

Along with the style guide, I also redline every core page with padding, fonts, colors, and line weights.

Redline every core page.

invision-discovery_3

One of the most enjoyable parts of this process is building out a tappable prototype with InVision. This enables me to flesh out how page interactions happen, and gives the team and me a chance to make sure our interaction theories are working as intended.

One of the most enjoyable parts of this process is building out a tappable prototype with InVision. This enables me to flesh out how page interactions happen, and gives the team and me a chance to make sure our interaction theories are working as intended.

One of the most enjoyable parts of this process is building out a tappable prototype with InVision. This enables me to flesh out how page interactions happen, and gives the team and me a chance to make sure our interaction theories are working as intended.

One of the most enjoyable parts of this process is building out a tappable prototype with InVision. This enables me to flesh out how page interactions happen, and gives the team and me a chance to make sure our interaction theories are working as intended.

One of the most enjoyable parts of this process is building out a tappable prototype with InVision. This enables me to flesh out how page interactions happen, and gives the team and me a chance to make sure our interaction theories are working as intended.

Conclusions and reflections

Conclusions and reflections

Conclusions and reflections

Conclusions and reflections

Conclusions and reflections

What's old is new again. The app had originally started out with a tabbed design (far left). But chasing fads like hamburgers only lasted so long before we needed to come back to a proven interaction model that scales. 

What's old is new again. The app had originally started out with a tabbed design (far left). But chasing fads like hamburgers only lasted so long before we needed to come back to a proven interaction model that scales. 

What's old is new again. The app had originally started out with a tabbed design (far left). But chasing fads like hamburgers only lasted so long before we needed to come back to a proven interaction model that scales. 

What's old is new again. The app had originally started out with a tabbed design (far left). But chasing fads like hamburgers only lasted so long before we needed to come back to a proven interaction model that scales. 

What's old is new again. The app had originally started out with a tabbed design (far left). But chasing fads like hamburgers only lasted so long before we needed to come back to a proven interaction model that scales. 

conclusion-old-vs-new
conclusion-rating

Redesigning an entire app can take an extreme toll on your userbase. Thankfully for us, we weathered that change with an improved appstore rating. As of the last time I checked, it's at 4.8 stars. :)

Redesigning an entire app can take an extreme toll on your userbase. Thankfully for us, we weathered that change with an improved appstore rating. As of the last time I checked, it's at 4.8 stars. :)

Redesigning an entire app can take an extreme toll on your userbase. Thankfully for us, we weathered that change with an improved appstore rating. As of the last time I checked, it's at 4.8 stars. :)

Redesigning an entire app can take an extreme toll on your userbase. Thankfully for us, we weathered that change with an improved appstore rating. As of the last time I checked, it's at 4.8 stars. :)

Redesigning an entire app can take an extreme toll on your userbase. Thankfully for us, we weathered that change with an improved appstore rating. As of the last time I checked, it's at 4.8 stars. :)

The best feeling of all...

The best feeling of all...

The best feeling of all...

The best feeling of all...

The best feeling of all...

conclusion-quotes

For me, this makes it all worthwhile. That, and I get to use the app I helped make!

For me, this makes it all worthwhile. That, and I get to use the app I helped make!

For me, this makes it all worthwhile. That, and I get to use the app I helped make!

For me, this makes it all worthwhile. That, and I get to use the app I helped make!

For me, this makes it all worthwhile. That, and I get to use the app I helped make!

If you've enjoyed this case study, why not read about how I designed the Gaia GPS logo and brand identity. 

If you've enjoyed this case study, why not read about how I designed the Gaia GPS logo and brand identity.

If you've enjoyed this case study, why not read about how I designed the Gaia GPS logo and brand identity.

If you've enjoyed this case study, why not read about how I designed the Gaia GPS logo and brand identity.

If you've enjoyed this case study, why not read about how I designed the Gaia GPS logo and brand identity.