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.
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
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.
The Solution
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.
Usability Test
Affinity Map
Priority Revisions
High-fidelity Mockup
Live Prototype
Project Goals
Product Roadmap
Sitemap
UI Requirements
Task Flow
User Flow
Wireframes
Brand Identity
Responsive UI
POV Statements
HMW Questions
Brainstorming
Research Plan
Market Research
Competitive Research
User Interviews
Empathy Map
User Persona
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.
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.
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.
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.
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.
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.
Bold = Goal met
Italic = Inconclusive, not enough data
Bold = Validated by data
Italic = Inconclusive, not enough data
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Evaluative Research
Think Aloud Testing
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.
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.
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:
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.
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.
Comforting, Simple, Bold
Playful, Comforting, Dynamic
Bold, Erratic, Dynamic
Building off of the logo design, I created a visual document further define brand image by specifying fonts, colors, logo usage, and imagery based on brand attributors and inspiration gathered from mood boards. This guide will assist in designing the user interface for the app.
With the brand identity established, I can apply the style guide to the previous mid-fidelity wireframes to create responsive high-fidelity wireframes.
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.
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.
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.
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.
