Introduction
Pathing is my capstone project for the UX foundation course at RED Academy in Toronto. The goal of the project was to design an app to make Toronto a better place. Pathing aims to achieve this by providing navigation to the city’s interior spaces.User Research
The first step was to gather information. I conducted three interviews and an online survey yielding 18 responses, to get a better understanding of my potential users’ needs.Research Insights
A common difficulty my interviewees shared was navigating large, unfamiliar spaces — specifically, event spaces and convention centres. I was also not entirely surprised that the Toronto PATH was brought up more than once as an example of a space that would benefit from better navigation.
From my survey responses, I learned that 94% of respondents used Google Maps or similar applications for directions regularly, and that reception to signage around Toronto was middling across the board.
Target User
Pathing is designed as a general purpose application, with the intent of being useful to anyone who may need directions through an interior space.
Synthesis
Persona
Based on my research, I developed a persona to help inform my design process.
User Flow
A major part of usability seems to be familiarity, so the user flow is modelled similarly to Google Maps or Apple Maps.
Design Process
Based on the insights I learned from my research, the core features of the application were simple: searching, and getting directions. Everything else could come later as quality-of-life improvements.Initial Prototypes and Testing Feedback
This very early paper prototype was where I began exploring how Pathing might be realized — and I quickly found out that I would need much more interaction if I wanted any valuable user feedback. I moved on to a higher fidelity design, created in Sketch and prototyped in Marvel.
I conducted a number of informal user tests on my friends, as well as 3 more structured sessions. The goal of the tests were to determine the overall clarity of the design, as well as whether or not users were able to get directions to one of the listed places. From these tests, I learned that I needed to clarify the functions of the listed places with more identifiable iconography, and that there was still a level of interactivity that was expected, that I had not implemented.
Design
The final prototype, based on the feedback I received from my previous prototypes, was built using Facebook’s Origami Studio.User Onboarding
To guide new users through the app’s core features, I created a short onboarding process — it can, however, be skipped at any time.
Search and Directions
As these features are the core of the app, I elected to put them in a pull-up drawer where they would always be accessible. The map underneath is able to be panned and zoomed to the user’s need, while the user’s location is shown by the magenta indicator. The top section of the screen shows the current nearest address, as well as buttons for settings and 3D view (which is disabled until the user chooses a building). The pull-up tray on the bottom shows the user which buildings are nearby, and has a search function.
Tapping on the current building or a building on the list brings the user into the building view, where they can see the building’s different rooms and get directions, as well as access a 3D view which accesses the phone’s camera.
If the user is not near any building at all, the app will pop up a notice that there is nothing to show.
Social Media
Connecting Pathing to social media would allow the app to grab location data based on events the user had RSVP’d to, so that directions would display immediately when they arrived at the location. The decision to hide this feature in the settings was intentional — Pathing is meant to be low impact, and as such does not need to know anything about the user to function.
Closing Thoughts
It was pretty cool experience, going through the process of designing an app over these 10 weeks. I had had a vague idea of how it was done going in, but to really jump into it was eye opening. I definitely enjoyed creating this little project, and it was really cool to see the parallels in design thinking between UX and my previous experience in architecture school.Future Considerations
From feedback I received during my final presentation of the project, there are some changes I would make.
-
Colour: Although I think it looks good, magenta may not be the best choice for the main colour, based on users’ expectations of colour for visual confirmation. I would consider toning down the use of the colour, and maybe follow a more standard colour scheme throughout the app.
-
Empty state: The empty state telling a user that there is no information also does not guide the user to any further action; it would probably be better practice to give some sort of direction in that case.
-
Multi-level support: Given the limitations of GPS in determining height, I would need to come up with a solution to determine which floor the user is currently on.
Challenges in Implementation
While I think Pathing is something that would be useful in practice, there are a number of (admittedly large) hurdles to be overcome. Other wayfinding applications (in hospitals, malls, etc.) are specific to their building — it would be a huge undertaking to access detailed, up-to-date interior plans for buildings everywhere. While some buildings do have this information available publicly, older buildings would be difficult to find plans for, if any exist at all, not to mention security issues in buildings that house sensitive material. Another significant issue is that buildings have many floors — if the user’s location is determined and tracked by GPS, then the system only gets x,y coordinates, with none or inaccurate height information.