Situ: End-to-End Application

Designing an end-to-end app for navigation

View Prototype

Project Overview


The rise of GPS navigation services and applications has led to an increased dependency on turn-by-turn guidance, which has proven to negatively impact users’ spatial memory during self-guided navigation.

This increased dependency on GPS navigation, while making our lives easier, is automating a function that was once exclusively performed by natural instinct. With how commonplace GPS navigation has become, this can become an issue if traditional turn-by-turn guidance becomes the norm for navigation. This project will address this dependency on navigation services through the creation of an MVP that will help improve the spatial memory of GPS users while navigating.


  • To design an MVP for an app that improves spatial memory while navigating
  • To create an end-to-end iOS mobile application

Project Scope

End-to-end application design, branding


Figma, Miro, Illustrator, Photoshop, Zeplin, Pen & Paper


UX Designer (Research, Visual Design, Interaction Design, User Testing)


2 weeks (80 hours)

The Challenge

Users have become too dependent on their GPS for turn-by-turn navigation.

Research has shown that those who used GPS more were associated with a steeper decline in hippocampal-dependent spatial memory when compared to groups who relied less on navigation services. Additionally, those in the group that used GPS more did not feel that they had a poor sense of direction, suggesting that their increased dependency on GPS was not a result of poor spatial memory, but rather the cause of their decline in spatial memory.

How might we improve users' spatial memory while navigating?

The Solution

Situ is a navigation app that focuses on improving users' spatial memory and building their own cognitive maps.

By focusing on broader areas and visual waypoints, users are able to build their own cognitive maps by correlating landmarks and locations with personal memories that they've made in the past. By eliminating turn-by-turn navigation, users are encouraged to familiarize themselves with directions and improve their spatial memory through revisiting past experiences.

Design Process

5. Test

Usability Test

Affinity Map

Priority Revisions

4. Prototype

High-fidelity Mockup

Live Prototype

3. Ideate

Project Goals

Product Roadmap


UI Requirements

Task Flow

User Flow


Brand Identity

Responsive UI

2. Define

POV Statements

HMW Questions


1. Empathize

Research Plan

Market Research

Competitive Research

User Interviews

Empathy Map

User Persona

1. Empathize

  • People use GPS services when they are unable to navigate on their own
  • People who regularly use GPS cannot comfortably navigate without them
  • People have issues with navigating to unfamiliar destinations
  • People are willing to improve their navigation skills in place of a GPS

Research Goals

Research Plan

  • Identify goals, needs, frustrations, and motivations of GPS users
  • Collect user demographics of GPS users
  • Discover key trends in navigation services
  • Understand a user’s journey within GPS navigation apps
  • Determine strengths and weaknesses of navigation service app

I created a document compiling research goals, questions, assumptions, and methodologies before diving into research. This will help guide me in a focused direction towards understanding and empathizing with user needs, goals, motivations, and frustrations with current navigation apps.

This document would be provided to stakeholders and is intended to be revisited after research synthesis to validate or invalidate assumptions.


I began my research by analyzing existing data relevant to navigation services and GPS tracking apps. I analyzed current trends within the industry in addition to general user demographics and likely competitors in reference to the project's objectives.

Secondary Research

I conducted research by looking through overarching trends and statistics within the market for navigation services. This shapes a general image of what the target audience is and some of their broader goals while using navigation apps.

Market Research

Competitive Analysis

I conducted additional research on the current top three navigation apps, noting key strengths and weaknesses that set them apart to gather further insights on what succeeds within the industry.


I began searching for more personalized findings specific to the project by conducting research on a first-person basis.

I gathered five (5) interview participants who were willing to open up about their personal experiences using navigation apps. Participants were required to have used a navigation app within the past month and were at least 18+ years old.

User Interviews

I broke down key statements derived from the user interview transcripts and sorted them into identifiable patterns showing common themes and occurrences between participant interviews.

Using the top five (5) most common patterns, I drew insights to narrow down five (5) key user needs that I will focus on for the define and ideation phases of the project.

Empathy Map


  1. Users use larger areas to contextualize a destination
  2. Users rely on visual reference points navigating to a destination
  3. Users feel more comfortable driving when they have directions beforehand
  4. Users desire immediate feedback while navigating through directions
  5. Users find location tracking to be unreliable when navigating


  1. Users need to be familiar with larger areas to understand where they’re heading
  2. Users need to have visual cues to guide them to their destination
  3. Users need to be familiar with directions before navigating
  4. Users need to have validation to ensure they’re on track to their destination
  5. Users need be self-aware of their location along a route

With all of the insights gathered from market research, competitive analysis, user interviews, and empathy mapping, I generated a user persona that reflects users’ goals, needs, frustrations, and motivations while using navigation services. This persona will represent the primary user group throughout the define and ideation phases. Meet Alex.

User Persona

Alex is 27 years old and works as an architect in Oakland, CA. In his free time, he likes to visit nearby bars and restaurants with his friends or on a date night, and uses GPS services to find directions while driving to his destinations. He is familiar with Oakland’s streets, but likes having his GPS apps on him because it makes him feel comfortable when navigating through busy streets.

Before moving onto the define phase, I reviewed goals and assumptions made in the research plan and checked if they were either validated by research or inconclusive due to insufficient information. This will further define a path for generating ideas to address user goals, needs, frustrations, and motivations.

  • People use GPS services when they are unable to navigate on their own
  • People who regularly use GPS cannot comfortably navigate without it
  • People have issues with navigating to unfamiliar destinations
  • People are willing to improve their navigation skills in place of a GPS

Research Goals (Revisited)

Bold = Goal met

Italic = Inconclusive, not enough data

  • Identify goals, needs, frustrations, and motivations of GPS users
  • Collect user demographics of GPS users
  • Discover key trends in navigation services
  • Understand a user’s journey within GPS navigation apps
  • Determine strengths and weaknesses of navigation service app

Assumptions (Revisited)

Bold = Validated by data

Italic = Inconclusive, not enough data

Before we continue...

2. Define

I began to brainstorm potential solutions by framing user needs from Alex's point of view, and created POV (point of view) statements and HMW (how might we) questions from the user insights gathered from the empathy mapping exercise.

POV Statements + HMW Questions

How might we...

  • help Alex be familiar with larger areas to understand where he’s heading?
  • help Alex have visual cues to guide him to his destination?
  • help Alex be familiar with directions before navigating?
  • give Alex validation to ensure he’s on track to his destination?
  • help Alex be self-aware of his location along a route?

Now that we've defined some pain points from the user, we can start addressing these problems through various methods of brainstorming. Once we've generated ideas, we can start strategizing by narrowing down potential solutions that will help inform design when building the product.


Using the HMW questions revealed in the previous exercise, I began brainstorming potential solutions to each question through a mindmapping exercise so as to break down each problem and generate multiple solutions taking all factors into consideration. The exercise was completed a total of ten (10) times, twice for each HMW question.


View Document ⟶

3. Ideate

With the solutions from the mindmapping exercise in mind, I can start selecting features and considerations that will address the problems defined in research. I created a Venn diagram comparing business goals and user goals with technical considerations to identify overarching project goals that will assist in knowing which features to move forward with by determining whether they meet common goals considered for the project.

Project Goals

I used my mindmapping exercise and additional competitive analysis to identify  features that address the project goals identified in the Venn diagram. These features were then prioritized by their potential impact on the product and the cost and effort required to implement them.

Product Roadmap

Information Architecture

With the primary user identified, potential features considered, and overall project goals established, I can now focus on the structuring, labeling, and organization of content for the product. This begins the early stages of interaction design.

I created a structure for the product to lay out essential parent screens, child screens, and features that will need to be designed and developed. Screens and features were identified based on their priority, effort, and confidence levels shown in the product roadmap.

App Map

UI Requirements

I put together a fluid document to detail specific elements and features that will need to implemented for both the designer and the developer to reference.

Tasks were created based on the user persona’s goals, needs, frustrations, and motivations identified during research. These tasks address user needs and how they would be fulfilled. Each task was then elaborated on to dictate what essential pages, features, and actions would need to be created in order for each task to be completed.

This document will be referred to and updated throughout the ideation phase as sketches and wireframes are developed.

User Tasks

  • Alex wants to familiarize himself with directions before driving to a bar.
  • Alex wants to save a location for future reference.
  • Alex wants to navigate to a bar.

Pages to Design

  • Home
  • Navigate
  • Search
  • Destination
  • Virtual Walkthrough
  • Navigation
  • My Locations
  • Add a Location 
  • Map
  • Memories

I generated three paths using features from the product roadmap to show how Alex's would accomplish three different tasks based on the sitemap. These paths help us visualize Alex's journey while using the product, and detail specific actions and pages that will need to be designed and further developed.

Task Flow

Expanding upon the previous task flows, I made a flowchart to visualize different scenarios in which the user would complete the tasks given. Each scenario takes into account different entry points within the user's journey -- whether they are new to using the app, whether they are familiar with it, or whether they are revisiting the app. This diagram determines the different user interactions, decisions, and entry or exit points that may arise while using the product.

With the groundwork for the product laid out and visualized, I can now move forward with creating a user interface.

User Flow

View Document ⟶

4. Prototype

After determining what elements, features, and pages were required for the product, I was able to create preliminary designs for key pages that will be used for prototyping and usability testing.


To begin wireframing for the website, I made hand drawn sketches including features and elements listed in the UI requirements for the product. Three homepage layouts were created based on market research, competitive analysis, and user goals and needs derived from empathy mapping.

Hand Drawn Sketches (Low-Fidelity)

Taking key elements and layout placements from these sketches, I created a  digital wireframe using Figma to further visualize overall hierarchy, legibility, and usability. I expanded upon this and formed responsive designs from the low-fidelity wireframes to ensure accessibility across all platforms.

Responsive Wireframes (Mid-Fidelity)

Using the mid-fidelity wireframes, I mapped out interactions in Figma to provide a functioning desktop mockup of the product for users to interact with during usability testing. Each page was linked in a manner that would allow the user to complete all task flows assigned from the UI requirements document, based on Alex's journey in the user flow diagram.

Working Prototype

View Prototype ⟶

5. Test

Participants were recruited to complete the three tasks from the UI requirements document by using the working prototype, and were requested to verbally describe their thought processes and decision-making while performing said tasks. These tests help with further understanding user behavior and preferences while using the product, and, most importantly, ensure that the product actually functions and works as expected.

Usability Testing

Evaluative Research


Think Aloud Testing

Participant Criteria

  • Total of 5-10 participants
  • Ages 18-60
  • Has used a navigation service in the past month


Usability testing is complete if all participants are able to complete their assigned tasks with a 90% or higher error-free rate, meaning that a total of 10 or more slips or mistakes would deem the product unusable in its current state.

During user testing, 100% of participants were able to complete the test. On average, participants made 1.4 slips and 0.8 mistakes per test, resulting in a 97.8% error-free rate, thus completing the test.


Since all participants were able to complete the test within the desired error-free rate, I was able to break down transcripts of each participant test into bite-size statements, and grouped them by common themes and occurrences among each  session throughout usability testing. These insights will be used to generate recommendations to be implemented in future prototypes.

Affinity Map

Memorizing turns
Navigate for directions
Practice quiz
Did not use map
Recalling memories
Misled by wayfinder


  1. Users remembered which direction to turn but not street names while navigating
  2. Users expected to find directions by going straight to navigation
  3. Users were unprepared to practice their memory of the route
  4. Users did not access the map screen to view locations
  5. Users ignored the wayfinder because they were unsure how to use it
  6. Users found personal memories to be helpful while navigating to a destination


  1. Add a cue for users to see which street to look for next while in navigation
  2. Combine “Navigation” and “View Directions” into one button that leads to directions and then lets the user begin navigation
  3. Change wording from “Practice” to “Quiz” and allow user to access quiz without having to complete each step
  4. Add “View on Map” button for each category (Locations, Landmarks, Areas, Memories) on “My Locations” screen
  5. Elaborate on the wayfinder’s function and provide examples of how it works through onboarding
  6. Add a cue for users to see upcoming memories and landmarks on their route

With the design recommendations gathered from usability testing, I can now update the prototype to a more current state.

Recommendations from usability testing were plotted on a matrix based on their impact on the product’s functionality and the effort required for implementation. This well help when working within a limited timeframe, and guide development on a more concentrated path to maximize efficiency.

Prioritization Matrix

Priority Revisions

Revisions to Wireframes (Mid-Fidelity)

Using the recommendations from the prioritization matrix, I made recvisions to the mid-fidelity wireframes to improve usability and functionality before finalizing a design. The recommendations that were chosen were best suited for the product given their ranking on the matrix in relation to the timeframe and scope of the project.

Going back to the business goals identified during the ideation phase, we can now begin crafting a brand identity for the app, Situ. Six (6) brand attributes were selected to best describe what Situ has to offer:

  • Friendly
  • Playful
  • Simple
  • Professional
  • Comforting
  • Dynamic

Using these attributes, I gathered images using Pinterest to seek inspiration for color, imagery, typefaces, and logo designs to establish an overall look and feel for the app.



View Document ⟶

I began designing a logo by sketching multiple iterations of different concepts with the attributes "playful, simple, professional" in mind. After a few rounds of sketches, I settled on a final design to vectorize and use for project screens based on its potential for scalability and visibility.

Brand Logo

With the brand identity established, I can apply the style guide to the previous mid-fidelity wireframes to create responsive high-fidelity wireframes.

Final Wireframes (High-Fidelity)

With the high-fidelity wireframes created, I can finalize the prototype and ensure that all prioritized revisions have been picked up so as to maximize usability and efficiency.

Revised Prototype

View Prototype ⟶

Before wrapping up, I created a document containing all UI elements that wereused in the final wireframes and prototypes to reference for consistency across the product as the overall product develops.

This document is to be revisited and updated regularly as changes are made throughout development.

UI Kit

View Document ⟶





Automating human instinct

This was my first end-to-end mobile application that I've designed, and it has been a rewarding experience working from the ground up on an issue that I feel may reflect the nature of apps (and even technology as a whole) in the modern world -- where people are becoming dependent on a product that can automate a function that was once exclusively performed by natural instinct. That being said, it was a challenge to design a feature that can address this issue without compromising convenience or usability.

Reinventing the wheel

Similarly, it was a challenge to create a product that served similar purposes to a conventional navigation app, but was different enough from competitors to stand on its own. Had I ended up using turn-by-turn navigation as a feature, the app would have essentially been a rework of existing applications, or could have even more simply been a rework of an existing app.

It was an interesting challenge trying to identify possible solutions that would help the user when navigating without necessarily holding their hands the entire way through their trip. In essence, it was designing a navigation feature that had to be simple enough to allow some room for the user to learn and grow from their own actions, while also maintaining usability principles.


Due to the nature of the ongoing pandemic, recruitment for usability testing was limited to my personal network of friends and family. This can skew research and testing by limiting results to a broader audience with potential bias. Additionally, navigation features could not be fully implemented for prototyping and required simulating an experience due to the inability to accurately represent satellite tracking within a prototype. This may result in additional assumptions to be made while moving forward with usability testing.

The process demonstrated is ongoing. The product will continue to go through iterations while revisiting various stages presented in this case study throughout development and release, in no particular order. All necessary changes or updates will be made accordingly as the product continues to be maintained throughout the process.

With the most recent revisions, the product is ready to be handed off to the developer. All documentation and necessary files will be sent accordingly using Zeplin to ensure that the developers will have all the necessary information to continue with building the product.


Next Steps

⟵ Previous
Lucky 13

Next ⟶