Wayfinding Project- Interactive library floor plan

My experience designing, coding and shipping an interactive University of Toronto Scarborough Library's Floor plan, currently on the official University of Toronto website exposed to 60,000 students.




‍
My Role

Front-End Developer, Product Designer (UI/UX)

Team

Project Managers: Lola Rudin, Adriana Sgro,

+ 5 more individuals

Tools

Design: SmartDraw, Illustrator, Photoshop

Code: HTML, CSS, JavaScript

‍

Duration

Fall/Winter 2018-2019 Work-Study

Background
Solution and ImpactResearchPopupsTechnical SolutionDesignTakeaways
Background
Solution and ImpactResearchMappingPop-up BrainstormingTechnology StackRedesignTakeaways
Background
Solution and ImpactResearchIdeationTechnical SolutionDesignTakeaways

Background


The University’s Scarborough Library underwent significant accessibility changes and developments in Fall 2018, evolving into a network of multiple facilities.

The Wayfinding Project was designed to provide a system to create a positive library navigation experience by helping people choose the right place to work at and reach their destinations quickly. I worked for the UTSC Library Makerspace to help incorporate those changes by digitalizing the floor plan. This project was the combination of Design, Code and Math (Coordinate Geometry).

‍


My desk at the Makerspace, but I mostly worked remote

Over 14,000 students attend University of Toronto Scarborough every year and the campus is visited by multiple guests, staff and students from other UofT campuses who study/work in the library and require a navigation resource.
‍
‍‍
Information Commons UTSC Library

Previous Experience on the UTSC Library Website

Library Maps prior to October 2018

‍

Goal: To redesign, digitalize the library floor plan and code it while incorporating accessibility to embed it in the University of Toronto Scarborough Library website.‍
‍
‍

Solution: Digitalized map with information pop-ups to let the library users access information like the room visuals, people capacity, workstations, equipments and electric outlets in a room or space.

Prototype:

Library Map + Pop-ups = Interactive Mapping

‍‍

‍

Kickoff

For this project, I took a goal-directed design approach. I found qualitative research methods to be the most useful which consisted of user and stakeholder interviews and persona construction. Since I was the only designer and developer on the project, I also had to take in any technical constraints in consideration. I started exploring some questions to get a better understanding of the problem space.

‍

  • "Whom am I designing for? Who are the primary users?"
    ‍
  • "What kind of goals they want to accomplish by using this webpage?"
    ‍
  • "What are the important aspects of accessibility that should be present on the webpage?"

‍

Exploring the Problem Space

I spoke with the staff to get a better understanding of their requirements, and some of my peers at the university to get of why and when they use the library floor plan.

‍

Library reading space where I conducted user interviews

‍

‍

‍

Staff and Student Responses

"We are looking to have a cleaner map with necessary symbols."     — Staff Member #1

‍

"Library architecture has changed, new changes need to be implemented. Accessibility is very important and special attention will be paid to it throughout the course of this project. Double check the color scheme, make sure the page can also be accessed using only Tabs"    — Staff Member #4

‍

"I usually use it before exams to find a study space where I can work with my friends, do group discussions or when I am tired of sitting at the same place and want to know what other options I have. It'll be useful to know if there is a charging point in the room to charge my laptop."        — Student #3

‍

‍

Key Findings

‍

User Persona: Meet Diana

‍

‍
‍Diana Adams

Age: 21  |  Occupation: Student at University of Toronto

Diana is a 3rd year student at the University of Toronto, St. George campus who is taking a course at the University of Toronto Scarborough campus. She has an exam in 2 days and has been looking for spots in the library where can work with her friends, engage in group discussions to prepare for this exam. She is looking for a navigation resource that tells her about the different features in the room.

‍

‍

‍

‍‍

Development Phases

We divided the project into 4 phases

‍

‍

Mapping

‍

1st Draft

I received a version of Paper Maps for two floors which I converted into digital design using Smart Draw to align the dimensions, entrances and exits.

Draft created in SmartDraw. Later translated to Illustrator so it's easy to make changes in the future as the UTSC Library uses only the Adobe Software currently for design.

‍

Visual Guidelines for the Final Version

I chose Sandy Brown Color for the Call To Action Buttons

‍

Five Iterations later - First and Second Floor

First and Second Floor Library Maps

‍

‍

Technology Stack and Coding

The code can be accessed on GitHub.

‍

‍

Final Version

The final version of interactive maps involving popups is currently on the University of Toronto Scarborough Website for first floor and second floor.



Key Takeaways
I enjoyed working on this project. It was a combination of Math, Code and Design.
‍
‍Coordinate Geometry becomes useful while combining visuals with code
Creating popups on top of images required me to mark coordinates in Illustrator which I later inserted in the code to get the right mapping of pop-ups on top of the map. Any changes in visuals would impact the pop-up location as the coordinates would change. Any changes in the map will require updating the coordinates to get the perfect mapping.

Working on projects with larger number of people requires patience and flexibility
Unlike other projects where I would work in a team of 4-5 people, this project required me to work with 10-12 people. With each meeting pre-decided requirements would change based on who was attending the meeting. I had to be patient, flexible and quick to scrape of my previous work and incorporate the new changes quickly to reach the desired result. More the iterations, better the quality of work.