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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This is actually after the fact, but belongs here as it seems out of place at the end. I ended up creating an illustrative standard to be used for zero states, confirmations and errors. Adding in this extra level of delight helps give the app more personality, but stay out of the way of the users needs.
This is actually after the fact, but belongs here as it seems out of place at the end. I ended up creating an illustrative standard to be used for zero states, confirmations and errors. Adding in this extra level of delight helps give the app more personality, but stay out of the way of the users needs.
This is actually after the fact, but belongs here as it seems out of place at the end. I ended up creating an illustrative standard to be used for zero states, confirmations and errors. Adding in this extra level of delight helps give the app more personality, but stay out of the way of the users needs.
This is actually after the fact, but belongs here as it seems out of place at the end. I ended up creating an illustrative standard to be used for zero states, confirmations and errors. Adding in this extra level of delight helps give the app more personality, but stay out of the way of the users needs.
This is actually after the fact, but belongs here as it seems out of place at the end. I ended up creating an illustrative standard to be used for zero states, confirmations and errors. Adding in this extra level of delight helps give the app more personality, but stay out of the way of the users needs.
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.
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).
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.
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.
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.
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.
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.
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.
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...
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.
Select Projects