WayWise

I collaborated with three other students to create a project that focuses on wayfinding within the St. George campus. Our aim was to simplify and improve campus navigation for students. We all worked on this project through the Miro online platform. While all of us contributed evenly to this project, I was responsible for creating the Figma prototype and making changes to it.

The University of Toronto's St. George campus is spread over 180 acres, has over 120 buildings and educates 67,000 students. However, students find it challenging to navigate the campus due to the absence of University-affiliated wayfinding tools and incomplete third-party tools. We believe that a universal, student-centred solution for navigation on campus is necessary. Our project aims to address the issue by providing an accessible, efficient, and purposeful solution to the students' wayfinding challenges.

Link To Miro

Phase One: Decide What To Fix

Research

In order to find a solution, we first had to research and understand the problem. We spoke to students to learn about their experiences on campus. We collected data through surveys and semi-structured interviews. We conducted twelve interviews, asking questions specifically about wayfinding on campus. We only gathered data from UofT students who visited more than one building per week.

Data Analysis

We gathered 57 surveys but only 43 of our participants passed the screener questions. We found out that the most common amenity they had trouble finding was their classrooms, with 30 participants indicating that this was difficult to find.

Affinity Diagram

During our semi-structured interviews, we interviewed twelve participants, two or three each. We then added all of our participants' comments on Miro and grouped them to create the Affinity diagram.

Persona

We conducted research and created a persona named "Cam the Commuter" to represent our target user. We identified her important behaviors, goals, motivations, and objectives. This approach helped us to focus on the user's problem.

Empathy Map

We created empathy maps and gained a deeper understanding of her struggles finding the class - how she thinks, feels, says, and does.

As-is scenario

We developed a scenario for our persona and created her current situation. We divided her journey into four stages: preparation, planning, travel, and destination. After that, we voted on what we believed her most significant pain points would be. We concluded that her biggest challenges would be finding the correct classrooms, locating open entrances to the building, and navigating crowded areas.

Needs Statements

After conducting research, we identified Cam's pain points and created five need statements. These statements illustrate our persona's needs, desires, and goals.

Phase Two: Decide How To Fix It

Ideations

We started our ideation process by reflecting on the need statements. Each of us came up with a few ideas on Miro, and we accompanied them with sketches to make them more visual. Throughout our idea generation process, we kept our persona's pain points in mind and avoided focusing too much on specific features or functions. Once we had generated all our ideas, we grouped them into clusters based on their similarities.

Prioritization Grid

Each of us voted on which ones would be most impactful for the user and feasible for us to create.

We sorted them on a grid based on their impact and feasibility on Miro.

Final Ideas

After considering all the options, we decided to create an interior navigator, an entrance navigator, a 3D skeletal map, and the ability to save certain routes.

To-Be Scenario

We have developed a scenario that illustrates the journey of our target persona. This scenario represents our vision for the future, which is based on the ideas we have generated. To create this future journey, we have taken into account the actions, thoughts, and emotions of our persona.

Prototyping

We named our wayfinding application WayWise and I designed a logo to represent it.

Low-Fidelity Prototype

After ideation, we created a low-fidelity prototype storyboard that showed our persona's journey using our design. It had minimal details and focused on flow.

Design is iterative, so our first prototype isn't the final. We asked three users for feedback on our low-fidelity prototype, noting what worked, what to change, their questions, and new ideas.

Mid-Fidelity Prototyping

After receiving feedback from users, we implemented a few changes to our design for a medium-fidelity prototype. The prototype was interactive, clickable, and had a more detailed flow.

Changes I Applied

We added room numbers to the map, removed the confusing "back" button, and added details to the saved page. We also displayed open and closed entrances and added options to delete and modify saved routes.

Feedback

We conducted another round of usability testing on our design, but this time, we tested it on our medium-fidelity Figma prototype.
During the usability test, we found that the participants appreciated the visual aspect of the design and found it easy to understand the building and campus layouts.

Figma Prototype

Future Changes

We'll keep improving our prototype through iterative processes and implement feedback from usability evaluations. In the future, we'll improve the "save route" function and update the campus and building maps. We'll also explore integrating the project with ACORN class schedules.

During the whole process, we have realized that the design process is a step-by-step procedure that needs to be carried out with great attention to detail. The initial step of the process is conducting primary research, which helps to identify the pain points, needs, persona, and other important aspects. We were very careful and thoughtful in completing the research stage, and we learned through our experience that it is crucial to do so. Without carrying out proper research, the rest of our design process may have resulted in creating a design that nobody really uses.