Happy City: Capstone Project
Role: UX Researcher, UX/UI Designer and Product Manager
How might we reduce stress in urban dwellers when moving around the city?
Introduction:
Research indicates that people in dense cities suffer from increased stress and mental health problems. WHY?
According to urbanists like Charles Montgomery, the built environment is directly linked to happiness and well-being. People living in big cities are under constant stimulation, which is a significant source of stress, especially for those suffering from sensory disorders and mobility impairments.
As someone with a background in urban design, this is a topic that I am passionate about. Although the city can be a source of significant stress, it can also be a powerful device for happiness if provided with the proper tools to navigate it.
The Solution:
The development of a bespoke route planning application (app) that aims to improve people’s happiness and well-being by improving the way they navigate and experience the city based on their unique needs.
The Challenge:
The biggest challenge of this project is to create a design that is highly inclusive and customizable. If successful, the payoff will be an app that helps users travel around the city in a manner that suits their needs. Ultimately, improving people’s day-to-day lives and promoting social equality.
Deliverables:
Heuristic Competitor Analysis, Screener Survey, Interviews, Affinity Map, Empathy Diagrams, Personas, User Stories, Site Map, User Flows, Low-Fidelity Prototypes, Guerilla Usability Testing, Wireframes, Wireflows, Moodboard, Style Guide, High-Fidelity Prototype and Usability Testing.
Process
01. Research
The goal is to create a highly customizable route planning application that enables people to navigate the city according to their needs. As a first step to achieving this, I conducted a heuristic competitor analysis where I chose to evaluate three leaders in the space of route planning; Roadtrippers, Komoot and Alltrails. This exercise allowed me to compare my project idea to competitors, and learn from their successes and shortcomings, without having to conduct user research.
I then created a screener survey and research plan to help find potential interviewees who would be suitable candidates for this project. I conducted five interviews (Fig. 1) with people from across the World who all experience different sources of stress from living in big cities. Through these interviews I gained insight on how people’s movement patterns and day-to-day lives are affected differently based on their surroundings.
Fig. 1 Interviews
02. Understanding the User
To help find relationships between common issues and quantify data obtained from the various interviews, an affinity map (Fig. 2) using sticky notes was created. During this process, it became evident that the users interviewed all suffer from similar stressors when moving around the city; noise cadence, personal safety and overcrowded streets.
Based on user research and interviews, empathy diagrams (Fig. 3) were produced to gain a deeper insight and immerse myself into the user’s environment. Here disconnect between what people think and feel versus what they say and do was discovered. For example, one user SAID she avoids people when she goes on walks BUT she FEELS unsafe when there is no one around. This process allowed me to uncover pain points and opportunities for improving the user’s experience.
Lastly, personas (Fig. 4) were created to help me understand who I am designing for. The creation of personas allowed me to align strategies and goals to specific user groups, as well as empathize with and internalize the mindset of people who would eventually use the app being designed.
Click on images for a closer look:
Fig. 2 Affinity Map
Fig. 3 Empathy Diagrams
Fig. 4 Personas
03. The Problem Space
Problem areas that pose challenges to the people I am designing for were identified by defining themes and insights. The formulation of “how might we” questions turned these challenges into opportunities for design. They suggest that a variety of solutions are possible and helped me frame the problem in a way that allowed me to think in innovative ways.
“How might we”
…relieve the stress that people feel when moving around the city?
…help people efficiently find safe spaces within a city?
…improve people’s happiness and well-being by enhancing the way they navigate, experience and interact with their environment?
…encourage people to walk and cycle around the city instead of moving by car?
The problem was further defined through user stories (Fig. 5) which enabled me to think of solutions and identify critical tasks that users need to accomplish in order to have specific outcomes. It also allowed me to prioritize certain features for the minimum viable product (MVP).
Click on image for a closer look:
Fig. 5 User Stories
04. The Solution
A visual site map (Fig. 6) allowed me to visualize the hierarchy of the application being designed by giving an initial visual representation of the site’s organization and how different sections are linked together. Further, it allowed me to form a better understanding of what the app’s goals and purpose are, as well as eliminate unnecessary pages and duplicate content.
I then generated user flows (Fig. 7) for two of my application’s red routes. Drawing the flow of how a user will interact with the application helped to understand the step-by-step process that a user needs to go through in order to achieve a task. It also helped me to better understand the product’s design.
Click on images for a closer look:
Fig. 6 Site Map
Flow 1: Plan Route
User Story: “As a female, I want to plan the safest route possible while traveling by foot, so that I can avoid walking down roads that are poorly lit, desolate and feel dangerous, especially at night.”
Flow 2: Discover New Routes
User Story: “As a parent and someone who is new to the neighborhood, I want to be able to find family friendly parks and routes.”
Fig. 7 User Flows
05. Low-Fidelity Prototype & Wireframes
In order to generate preliminary ideas, an interactive low fidelity prototype (Fig. 8) for the application’s primary red routes was created. The prototype includes a thorough sign-up process which allows for a more customized and user friendly experience.
Guerilla usability testing was then conducted with five strangers which allowed me to get initial feedback on the designs. It was a quick and cost effective way to learn what users like about the design and what aspects are less intuitive. During this initial testing, I realized how important it is to use clear terminology and reduce clutter by consolidating actions in order to free up valuable screen space, improve hierarchy and most importantly reduce confusion for the user.
Fig. 8 Low Fidelity Prototype
Wireframes (Fig. 9) were developed to define the structure of individual pages and determine how those pages connect. The wireframes are what created the foundation of the design. They determined how elements will be placed on each page and allowed hierarchies and general layouts to be further defined. Through the use of limited visual elements like colours and images, I was able to focus solely on core design decisions and essential elements before diving into the details.
Fig. 9 Wireframes
Wireflows illustrate how a user would move from page to page.
06. Design
A mood board (Fig. 10) was created to establish the aesthetics of the app and define the emotions I wanted to inspire. The goal is to create an app that makes people feel happy by creating a design that is colorful, yet approachable. I accomplished this through a soft and cohesive color palette and the use of fonts that have rounded edges. Since one of my target groups are people with low vision or sensorial issues I made sure the font/background contrast was to accessibility standards.
A style guide (Fig. 11) was generated based on the mood board to help with visual consistency throughout the application interface. It also helped to further consolidate and guide my design decisions, as well as increase my efficiency when building the high-fidelity mock-ups.
Fig. 10 Mood Board
Fig. 11 Style Guide
06. High-Fidelity Prototype
As a starting point, high-fidelity mockups (Fig. 12) of key screens were created, evaluated and revised based on iOS Guidelines.
Fig. 12 High Fidelity Screens
A prototype (Fig 14) was then built and tested on persons that would use this app.
User Scenario:
Someone who is new to the neighborhood and worries about their safety when walking around the city.
Tasks:
Sign up
Plan a safe route home
Discover new routes in the area that suits the user’s needs
Fig. 13 High Fidelity Prototype
Want to interact with the prototype yourself? Click here.
07. Usability Testing
The prototype went through two rounds of moderated usability testing and revisions were made based on the feedback received during the tests.
User Feedback: