Shannon Leigh Associates (Agency) – Print, Environmental, Client Presentations and Collaboration, Coordination with Fabrication, 3D Modeling, Site Surveys, Wayfinding and Identification Assessments, Digital Directory UI/UX
“This directory is not just for patients. It’s for doctors, nurses, administrators, and vendors. It simply has to be accurate and complete. This isn’t a shopping mall. This is a serious place.”
-ZSFG Facilities Manager
A Resource for Many Applications
The campus at Zuckerberg San Francisco General Hospital spans over a century of historic and state-of-the-art architecture. While brilliant and diverse, this campus is also very difficult to navigate, especially for over 40% of the patients who are experiencing problems with mental health.
This was the challenge presented to me during the kickoff meeting. What I didn’t know at the time was the labyrinth of red tape and inter-departmental conflict that this job carried with it. Seventeen different agencies and departments all had a say in how the digital directory for the new ZSFG campus would be designed and deployed, making this one of the most challenging efforts in my career.
Add to that the end goal being a 3D mapping resource that would populate the individual kiosks on the campus, the website wayfinding efforts, and the mobile devices the end users would use to get around. All told, this was a monumental challenge.
Building in the Computer
The first step was to use the architectural plans for both of the major buildings, the newly completed Building 25 and the legacy Building 5 that has served SF since the 1970’s, to build maps that would serve as the backbone of the User Interface.
Designing the Interface
Most of the UI work is an exercise in trial and error. Once you establish your wireframe for how the pages are going to connect, and how the maps are going to be inserted, you are left with a list of links and an open space to fill.
Since this interface would start with the digital directories, and then later migrate to websites and mobile applications, we started with the classic 16:9 aspect ratio for a 42″ touchscreen.
Each floor in both buildings were assigned with matching colors to aid in the universality of the wayfinding. When trying to provide clear and concise information, every graphic element needs to be used.
Employing the same haptic controls for pinch/pull zooming and rotational navigation, the model provided an interface that even the most basic user could figure out quickly.
Programming the Interface
First and foremost this is an informational resource intended to aid people in reaching their destination with the least amount of friction. When programming this tool we needed to know how the traveler gets to all of the locations were planning to include.
Above is the first page of the routing diagrams I developed. This covers the routes an able bodied person would take through the campus to the major destinations, public transit, and parking locations. The pages that followed this included the interiors of the buildings with destinations plotted giving the back-end coding team the rw information they required to set up the turn by turn directions.
Planning in the Lived Environment
To better visualize the actual display and the cabinet housing it, I developed a mockup at actual size using custom printed coro-plast sheets and a pair of tripods.
We then took the construct to the location and positioned it in the actual locations to give the interested parties an idea of how it would interact with the building’s interior space.
The most impressive part of this exercise was not the expected information we gleaned. No the reaction from people in the buildings as we positioned them. We received nothing but positive reinforcement from the staff and even patients who commented on how they could really use a tool like this to find their way.
An Abrupt Change
A few months shy of completion the COVID 19 pandemic hit. This new reality realigned priorities and radically shifted the movement of patients and personnel on the ZSFG campus.
Needless to say, the enthusiasm surrounding a touchscreen deminished putting this project in chaos. We worked with anti-bacterial coatings and screens, with relocating the kiosks to the outside of the buildings, even introducing QR codes to allow for easier access to the web and mobile app versions that would eventually be deployed.
Ultimately the project lost funding and was discontinued, so no final version was realized. Sometimes in business and in design, the most challenging part of the project is getting to the finish line.
