ATLANTA HISTORY CENTER WAYFINDING SYSTEM
How can we build a digital wayfinding system for a primarily print institution?
ROLE
Lead designer
TEAM
Created with Atlanta History Center and Primal Screen agency
TYPE OF DESIGN
Print, Environmental, UX/UI
DELIVERABLES
Web-based mobile app
Interactive on the website
Physical map
On campus stanchions & a-frame signage
LED screens
BACKGROUND
In 2020, the Atlanta History Center embarked on an exciting project to create a permanent wayfinding system, designed to make navigating their expansive 33-acre campus a breeze for visitors. Before this initiative, guests were given a stylized map, but its accuracy sometimes made it challenging for them to explore the grounds on their own.
Overview
Atlanta History Center has been dedicated to enhancing its presence in the vibrant Atlanta arts and culture scene.
As they've sought to reach a broader audience, they've recognized the importance of modernizing their wayfinding systems to stay competitive with other Atlanta arts and culture institutions in the digital age.
KEY INSIGHTS
How can we enhance our current assets to make them more easily understandable for guests?
What are potential new avenues to help guests navigate the 33-acre campus on their own?
HELPFUL INFO
At the outset of this project, the Atlanta History Center boasted a guest demographic of 60% aged 55 and above. Its expansive 33-acre campus provides an ideal setting for retired individuals to enjoy leisurely walks along the trails and discover engaging exhibitions.
The rest of our guests primarily consist of students and individuals aged 18-35, who predominantly participate in community-based programming. Therefore, it's essential to digitize our wayfinding systems to ensure guests can effortlessly explore the campus independently.
Due to the impact of Covid, there was a shortage of staff, resulting in limited assistance available for navigation even when the gardens remained open.
Possible solutions
CURRENT PHYSICAL MAP
- Refine the current illustrated campus map to better align with the requirements of stakeholders, particularly internal departments responsible for organizing special events such as weddings.
- Develop a digital map facilitating on-site events and outlining the route from the parking deck to the desired destination.
WEB-BASED ASSETS
- Construct an interactive digital map for the website, highlighting the diverse gardens and historic houses.
- Develop a mobile app enabling guests to access the campus map via a dynamic QR code on their phones, while also providing information about the museum's buildings and features.
PHYSICAL CAMPUS UPDATES
- Enhance the campus map to provide guests with a more precise directional orientation, helping them understand their location in relation to other destinations on foot, particularly for physical stanchions.
Campus Map
THE CHALLENGE
The initial map, which was sourced externally and provided to me at the start of the campus map redesign project, did not conform to our brand guidelines and was outdated in terms of both appearance and functionality.
SOLUTION
I refined the map to adhere more closely to the AHC brand guidelines, updating the typography to the primary font family and aligning the color scheme accordingly. While the overall layout of the map remained unchanged, I streamlined it by removing unnecessary iconography and adjusting label placements. As a result, the latest version of the map has been well-received. In response to internal feedback, certain paths were redesigned to enhance accuracy for guests navigating on-site.
UI Elements
Mobile App Experience
THE CHALLENGE
Before the pandemic, guests relied on printed maps to navigate the campus independently, without the assistance of staff. When the campus reopened to guests in 2020, there was a need for a mobile adaptation of the map to ensure the continued practice of preventive measures and facilitate safe navigation.
SOLUTION
I collaborated with the Phase3 team to enhance the user interface of their initial proposed mobile app solution. The original application focused solely on functionality and lacked alignment with the Atlanta History Center brand. I supplied developers with look and feel guidelines to refine the frontend and ensure the mobile app was more in line with our brand identity.
Screen Revisions
Given that a majority of museum and garden visitors are aged 55 and above, the app's objectives prioritize accessibility.
- The functionality is straightforward, encompassing three main categories: an internal building map, a gardens map, and a directory offering general museum information and detailed descriptions of each location.
- The user interface is designed for accessibility, employing core brand colors and typography while ensuring sufficient contrast to comply with ADA guidelines.
- Enables seamless access to information across the app—Users can navigate to any link within the map screens or directory to access identical information. This approach ensures effective accessibility for various user types.
In-house revised screens
Revisions from the developer for my review occurred over approximately six weeks. After providing feedback on functionality, accessibility, and consistency of AHC branding across the maps and directory, I would test the app each week. Ensuring consistency in web and design elements, including padding, color, and type, was crucial to create a clear and intuitive experience overall.
Certain features, such as sidebars on destination pages, outlined routes on the main gardens map, a pop-up displaying steps walked, and 3D buildings, were eliminated during the development process.
FUNCTIONALITY
The user begins on a zoomed-out Gardens Map. All labels are consistently visible since the user clicks directly on the destination, eliminating the need for hover effects.
If the user taps on the main building, the screen will zoom to show the internal building locations.
Users can access any destination by tapping directly on the map or clicking into the directory.
After tapping, the user will zoom in to the destination and a description pop-up will appear.
Once in the directory or on the map, navigation icons appear to let the user return to "Home" (Gardens map screen).
On-site Campus Stanchions
THE CHALLENGE
Following feedback post-installation, it became evident that the current static map was not sufficiently aiding guests in navigating the campus independently. The placement of each individual stanchion was not carefully considered, leading to guests being unable to orient themselves physically in relation to the main campus building.
SOLUTION
I designed a set of new maps featuring icons consistent with the color and typography of the current stanchion placements across the campus. Each map is zoomed in to the respective location and rotated to match the orientation of guests accurately. For instance, if a guest is facing east, the map is rotated 45 degrees, and an icon labeled "YOU ARE HERE" indicates the stanchion's location.
Parking Garage LED Screens
Another digital component of the interactive wayfinding system is a television screen installed on the campus deck. Its primary function is to display a calendar, informing guests of any major events scheduled for the day. Additionally, the Private Events department utilizes this screen to provide directions to guests attending non-public special events, such as weddings or corporate meetings.
THE CHALLENGE
The parking deck screen serves as an additional means to guide guests in locating specific destinations across campus independently, without the need for assistance from staff. However, following both internal and external feedback, it became evident that solely highlighting the locations of destinations on the map in correspondence with the calendar was insufficient to assist guests effectively.
SOLUTION
I collaborated with the internal Private Events staff to compile a list of the primary travel routes across the campus for an initial rollout aimed at improving guest assistance. Subsequently, I worked alongside the external development team to design the interactive screen for mapping these routes. The calendar operates on a timer, and as each event is highlighted, a line is drawn on the map indicating the route from the parking deck to the destination. This line disappears once the calendar progresses to the next scheduled event.
Web Interactive Map
THE CHALLENGE
On the website, AHC would like to feature an interactive campus map to be prominently displayed on the Buildings and Grounds page. This map should closely resemble the on-site mobile campus map while adhering to the new website relaunch guidelines.
SOLUTION
I utilized a combination of a WordPress plugin and Illustrator to construct and import an interactive campus map, incorporating user-friendly functionalities. This presented a challenge as I had not previously used the plugin, emphasizing the importance of adhering to correct naming conventions for each layer to ensure seamless vector importation.
Numerous rounds of user testing were conducted to refine the map, and upon its completion, I collaborated with a developer to address any minor errors impacted by sitewide code. For consistency, I referenced the wayfinding system for base colors and the web visual systems for adjustments to background colors (e.g., changing green to light grey and variants of core colors) and replaced all typefaces with a web font closely resembling the core AHC fonts.