Husky Mapp

Navigation system for UW students

Client

My Role

Team

Tools

Time

Students
HCDE 318
UX Designer
Dena Sabha
Carol Lei
Tony Tran
Colleen Park
Figma
Adobe XD
10 Weeks
Fall 2019

overview

Problem

Commuting around the UW campus has never been an easy task, there's constant construction, confusing turns, and chronic rainfall. Husky Mapp was created to make this experience more bearable by routing you to your classes easily and efficiently. Features like our built in incident report, our community settings, or even our calendar syncing work to make your Husky campus commutes more enjoyable.

Solution

Husky Map is a mobile application that streamlines the University of Washington students' commute on and through campus. Our design team found that we all experience pains traveling from class to class. My team collaborated to design an inclusive and highly UW-specific experiences to cater to students' needs. Our vision was to create something that could take the rigor of finals week traffic and UW’s notorious campus construction. Husky Mapp was created to make your husky campus commute fast, efficient, and enjoyable. Through features like our built in incident report, our community settings, or even our calendar syncing we hoped to cut the stress out of getting to and from class.
How might we make a University of Washington student's commute between classes more efficient? 

my process

01.
Research

Interviews
Field Observations
Personas
User Journey Map
Comparative Analysis

02.
Ideation

Design Requirements
Storyboards
Interface Sketches

03.
Design

Info Architecture
Paper Prototype
Experience Evaluation
Wireframes
HiFi Design

01. Research

As soon as we were put in teams, we were prompted to pick a user group and conduct research within the next three days. We wanted to focus on the student experience so we decided to focus our research on University of Washington students. We conducted interviews and a field observation then came together to create an affinity diagram to synthesize our research.

Research Findings

01.

02.

03.

Students conveyed their frustration about unexpected construction on campus forcing them to find an alternate route.
During the start of a new quarter, students relied on their class schedule and Google Maps to navigate their way through campus.
Students conveyed how building signs were hidden or too small to see, so it was hard to find certain buildings undefined.

04.

05.

06.

Finding classrooms in certain buildings was also a frustration students faced when navigating across campus.
Efficiency, time management and getting places on time was a common theme we noticed while conducting our research.
Some users indicated a need for social interaction while on campus


Personas

Through our research, we were able to develop personas that represented the demographics we found from our user groups. The personas we developed are data driven and reflect common themes, pain points and desires our users expressed while conducting our interviews. These personas play an important role in our project and we referred back to them frequently throughout our design process.

Persona

User Journey Map

Utilizing Samantha's persona, we created a User Journey Map to follow her emotions through a typical day school day. This map helped us emotionally connect with students who follow a busy schedule and identify points of high stress and frustrations to design around. Mapping out Samantha's Journey and detailing her actions and touch-points allowed us to better understand the pains and desires our users need and was a crucial step to finding a solution.
User Journey Map

02. Ideation

After analyzing and synthesizing our research, developing personas and mapping out a user's experience, it was time to start ideating our ideas and brainstorming possible features. At times we got over excited and generated as many ideas as possible, which is important, but we also had to go back to our research, persona and user journey maps to make sure that our ideas solve a mismatch or pain point that our users faced.

Design Requirements

Utilizing our Personas and User Journey Map, we were able to define our ideal design and ensure that it was user centered.​ We found that out users were in need of (1)A product that allows for efficient commutes (2) Obstruction and construction avoidance, and (3) Increased social interactions. We used our design requirements to try to produce as many ideas as possible. We each sketched out three different interfaces to see how individually we would solve a problem. These interface design sketches helped us develop our paper prototype and pick out key elements for our design.
Design Requirements

Storyboarding

Storyboarding allowed my team and I to put ourselves in our users shoes and try to develop a better understanding of the context and environment our users would interact with.
Storyboard

03. Design

After researching and ideating, it was time to start designing our system. This took a lot of planning and we kept on referring back to our Personas, Design Requirements and Storyboards to make sure we were on track and addresses the needs and desires that we had found in our research.

Information Architecture

Developing an entire system was not easy, but we had to have a base idea of what we wanted our application to do. We wanted to minimize our functions so having four main features such as "System Preferences", "Search", "Report" and "Explore", would allow the app to be functional but not overwhelming to users. Our Information Architecture changed as we continued in our design process. We added a "Friends" feature because we realized that students wanted to have a community option. We also ended up changing how the Calendar feature flowed based off our paper prototype. This information Architecture provided us with a base of important features we wanted to include.
Information Architecture of Husky Mapp

Evaluating the Experience


1. Issue: Drop-Down Menu Icon Clarity
When users were looking at the dropdown menu functions and options – a personal icon and a community icon – they were confused about what the icons meant or where which would lead them to the Calendar feature. Developing clear icons and creating an intuitive dropdown menu was a priority for our design.

2. Calendar Function & Purpose
Our participants retroactively reacted to the calendar function with confusion. They knew they had completed the task, but they were confused about the purpose of the calendar on the map navigation application. Including a calendar function would inherently imply that our users can add and delete events from their calendar. Our application would need to completely emulate the functions of a calendar like Google Calendar.  Moving forward and taking our findings into account, we will implement our calendars solely to be viewed. To make this experience even more clear, our application will explain the functions and purposes of syncing their maps to this application.

3. Tutorial Design
Some of our participants read through each and every pop-up from our tutorial. One of the participants wanted to control the time function of our tutorial – to dismiss the instructions at their own time. We found that the tutorial is meant to help users, and it essentially serves as a tool to help the users, so it should cater to that fully.  To fix this problem, we want to create a page where users can choose whether they want to explore the animation tutorial.

Paper Prototypes

It was time to put our application to the test, using paper. In order to conduct a usability test, we had to create paper prototypes to test three features of our system. We conducted our first round of usability tests in class with other groups and took feedback from those usability tests to change our paper prototypes for our second round of usability tests. We wanted our users to perform the following functions:

1. Create an account and then sync your Calendar
2. Report a Construction Incident
3. Find a Coffee Shop without using “Search”
Image of Paper Prototypes used for testing

Taking a step back

After evaluating our paper prototype, our team had difficulty deciding how to implement the calendar feature and making it intuitive while also deciding to include a community feature. We did not want to have too much going on within our app, so we decided to compromise and add both features, but make them secondary features. After going back to the beginning, referencing our personas and design Information Architecture, we needed to address the need of efficiency and navigating around campus. The calendar feature would give users the option to manage their schedule through the app, and the community feature would give uses the options to find their friends, but they were not the main functionalities of the app. This was a good middle ground as it did not take away from the general purpose of the app, but added some extra features that a user may want to use.

Wireframes

After making our changes, we finally were ready to develop wireframes for the full system of the app, going beyond the scenarios we did in our paper prototype. The wireframes show the functionality of our system and provide a visual representation of the Information Architecture. View all annotated wireframes.
Husky Mapp Annotated Wireframes

High Fidelity Design

Husky Mapp is an interactive map application that works to streamline the navigation and information finding for UW students. In essence, Husky Mapp is a highly UW specific navigating tool. This application has a crowdsourcing function for incidents on campus, an explore UW feature, and calendar syncing and 3D map view capabilities.

Features:

1. Report an Incident
The UW campus is constantly changing, even for a seasoned expert unexpected incidents – construction, property damage, high traffic – can hard to navigate. The Report an Incident function allows users to plan ahead to avoid these roadblocks.

2. 3D Map View
In our research, our interviewees stated that they often found themselves disoriented within the campus. This feature accommodates for confusion as it displays the surrounding campus more clearly for users than the 2D map view would.

3. Explore UW
UW is a big campus. Finding water refill stations, coffee shops, bike racks, restrooms may be difficult. This slide up panel allows users to browse through amenities they may need in their day-to-day.
High Fidelity Design of Husky Map

Reflection & Next Steps

My team and I believe that this navigating app will be beneficial to University of Washington students. Students. Students will find their experience looking for on-campus amenities, discovering their community, accessing their daily schedules significantly streamlined as this application encapsulates multiple functions. However, to reach this stage, we need to iterate through the user-centered and goal-directed design process again. With more time, our team would focus on the following deliverables: ​

1. Shadowing:
To truly understand the pain points of UW students’ travels on campus, we would need to shadow a handful of students with varying abilities and knowledge of campus.

2. Parallel Prototyping
We engaged in private divergent design spirits in which we brought our independent ideas to our group. This helped refocus our design efforts and move forward with the project.

3. Usability Tests
With high-fidelity mock-ups, we conducted multiple rounds of think-aloud testing to understand the usability of this app. We looked to make the app more intuitive and to help streamline navigation.

What I've Learned

This was the first time I applied the user centered design process, and I have learned and grown as a student and designer. I learned how to be a valuable team member and work in a diverse team, allowing one another to draw strengths from our differences. Honesty and trust are vital to group teamwork and voicing one’s opinions and ideas in a safe environment creates a healthy and productive relationship. Working one step at a time, we were able to develop a near functioning application with good communication and a lot of snacks. I am excited to continue growing as a designer and leader.
Designed by Dena 2021