Digital Wayfinding UX Process
“I’ve been trying to find it (event) for the last 30 minutes!”
PROJECT SUMMARY
Our team was tasked with reducing the friction our customers experienced getting into digital signage. Our approach was to create high-quality turn-key, white-label products that are easy to access and implement.
Digital wayfinding was the most significant need for our customers in the hospitality industry and often their first introduction to digital signage. Convention centers, in particular, have the challenge of multiple simultaneous events in spaces that span numerous football fields. Their customers are often in these vast spaces for the first time, rushing to find their talk or demonstration before it starts, so naturally, frustration mounts quickly. On busy days, convention centers often find their information desks overwhelmed using out-of-date paper maps. With that in mind, our digital wayfinding product will have to solve several problems.
Creative Director: Kelly Byrom
Research assistant: Natalie Dendin
Designer: Michael Worthington
GOALS
Help users quickly find and navigate to their event or space.
Allow users to take the directions with them.
Integrate with existing customer information infrastructure.
Allow customers to brand the product quickly.
Provide a promotional area for an additional revenue stream.
Design with a user-centered approach.
CHALLENGES
Appeal to a large number of customers with different needs and perspectives.
Unknown branding requirements.
Unknown signage locations/positions/distance.
Limited scope and timeline.
Benefits of UX and user-centered approaches unknown at this time.
RESEARCH
Research is a crucial step that is often disregarded in favor of more direct contributions. Good research helps to identify insights, test assumptions and ultimately often speeds up the process and leads to better design.
One of the first methods of research that we use is primary research. For the digital wayfinding app this included stakeholder interviews, field observations, on-site surveys/interviews, empathy maps, and distance legibility tests.
Stakeholder interviews
Internal Experts (Sales, Account Managers, Designers, Developers)
Colorado Convention Center Staff: CTO (InfoTech Executive), General Manager, Information Booth Customer Rep.
Field observations
Even though the scope was limited, we had the opportunity to perform local field observations for a few hours over two days at the Colorado Convention Center. Another designer and I stationed ourselves nearby the existing digital signage. We did this to observe how current users were using the sign, what reactions they had while using it, and also to record any noteworthy details we saw. We also try to note the possible age range, gender, and any professional information that we could attain. This would later add relevant details to our personas.
We identified a few issues while observing. Some users would navigate around multiple parts of the menu before finding their target event. Some users would find their target location on the sign, leave, and return 5-10 minutes later to use the product again. When asked, one user told us that she got lost on the way to her event, and returned to get the directions a second time. It was likely that users were leaving the digital signage and then returning because they had to memorize several steps to find their ballroom. We also noticed the vast majority of users never used the shortcut buttons at the bottom. When we asked a user if they used the shortcuts, the user said they didn’t realize the boxes at the bottom of the screen were buttons.
Surveys
On the second day, we asked participants to fill out surveys about their time at the convention center. We developed a short five-question survey that asked questions like “What were the first things that you’ve looked for during your first hours in the Convention Center?” or “From 1 to 5, how do you rate the complexity of the Colorado Convention Center?” After the participant filled out the survey, we would perform a quick followup interview if we had any clarifying questions or wanted them to expand on an answer.
Empathy Mapping
Later, we also held a modified empathy map session to gather the information that was not easily observable. We asked a small group of users to talk about different aspects of the experience at the convention center. We wanted to know 1. What did they hear while there? 2. What did they see? 3. What did they say and do? And finally, 4. what did they think and feel?
Legibility tests
In addition to the regular research sessions, we knew that distance viewing might be an issue. We tested internal participants to understand the correlation between various reading distances, font size, and contrast. This allowed us to set a lower limit on the x-height and color contrast of the type before developing the design system.
SECONDARY RESEARCH
After our direct research was done, we still had some unanswered questions and just a few hours on the internet gave us some helpful insights. Even with the results from the legibility tests, we wanted to understand how others have approached distance reading. Among other things, we found an interesting report on Highway Sign Visibility. The article gave us insight into what font types, sizes, and spacing we should consider. It talked about the benefits of mixed-case vs. upper-case. Stroke width, and serif vs. sans-serif.
We were able to figure out the most common screen sizes we needed to design for. With a non-responsive UI, there was little flexibility to work with. And we answered an internal debate about the efficacy of QR Codes. Short answer, no one uses them. With some brief googling, we found official ADA requirements and provided examples of existing solutions. We also did some internet sleuthing on the competition. We looked for features that were consistent across our competitors and potential gaps in their feature set. Often seen features sets user expectations.
The last bit of research we did was to host a Design Studio. A Design Studio is a structured brainstorming session with a variety of stakeholders. Structured much like a parallel design session. Individual contribution, presentation, synthesis, and finally, group creation. After a quick info dump, we tasked 14 customers, users, and employees with individually visualizing the final product. Combined into groups, we then asked them to present and discuss each solution. After 15 minutes, the groups were asked to then draw a new solution based on the learnings they just had. I love design studios because while often groups present pretty basic ideas, you also get some wild ideas that would have never crossed your brain. They also have the side effect of increasing customer engagement. In this project, we had a few customers who really loved seeing everyone’s ideas and felt they were able to contribute.
Analysis and Insights
Our research indicated a few ways we could improve on the existing design and ways we could outdo the competition, all while delivering a flexible and easy to use the product.
Insights gained
Users often first looked at the map to find where they were and to find where they need to go. Fewer users spent time browsing the lists. A potential solution was to put more focus on the map in the design. I suspect that this is true because people are becoming more familiar with a Google Maps style interface than a yahoo list hierarchy.
The most common problem we found was the user who was running late to their event but didn’t know where to find it.
Fewer users recognized the outline buttons as buttons.
With such heavy color usage, it wasn’t effortless for customers to implement their brand.
Light text on a dark background increases scannability, while dark text on a light background increases readability. But pure white on pure black should be avoided as it causes a visual vibration and decreases legibility.
Few people use QR-Codes. While it’s a high-potential technology, it has proven to be too inconvenient to reach a critical mass. Texting was a more universal solution. Although an alternative idea was to allow users to take a picture of the directions using their smartphones.
As a relatively young product space, digital signage does not have a set design language. Interestingly, we found that users would often use the logo as a “home” button. A design pattern commonly found on the web, but not native mobile apps.
Personas
We used personas as a communication tool to get everyone on the same page about who our users were, what was important to them, and what we wanted to optimize for. The personas also allowed us to put ourselves in their shoes during moments of difficult decisions. I often found myself asking, what would Jean think of this feature? Our personas (rather proto-personas) were a mix of data collected onsite, and information about the user gleaned from interviews with subject-matter experts and customers.
Problems and Solutions
At this point in the process, I like to bring some focus back to the problem(s) we are trying to solve. So I made a list of issues and our initial ideas on what the solutions could be and discussed it with the rest of the team. This allowed us to get on the same page on what solutions were most important to the users, the customer, and the business. In my experience, it’s often difficult to weigh importance and level-of-effort. But it’s critical to take this other dimension into account; otherwise, it’s easy to miss deadlines or disregard user delight. I created a Feature Prioritization Matrix (LOE/Importance quadrant) to help discuss which features we want to focus on. We ran the list of functionality through the matrix with a team of internal SME’s and sorted them into categories. Running that list of features through the Feature Prioritization Matrix (LOE/Importance quadrant) with a team of internal subject matter experts. This helps us identify features that we may want to avoid, which can be tacked on, which should be longer-term investments, and which would be great for an MVP (or more appropriately an MMP-Minimal Marketable Product).
Wireframing & Testing
With the features listed and sorted, wireframing becomes a breeze. Using basic shapes and a monochromatic color pallet, I visually ideated on different ways to layout the functionality. Wireframing is a useful tool to quickly ideate and keep your focus on the layout, hierarchy, and user flow. I don’t have to worry about perfect pixels or other details that are not important at this stage. It’s also a great communication tool for the same reasons. It allows a meeting about functionality or layout to be about just that, functionality or layout.
After I was able to land on some layouts that I liked, I added in some minimal text and imagery to perform some quick gorilla testing. When I don’t have the luxury (read budget/timeline) to do proper user testing with actual users and incentives, I still like to find a way to get my assumptions tested. With the convention center app, I printed my more detailed wireframes out on paper and put them in the order of the user flow. Then I walked around the office (~500 people) and asked fellow employees (especially those who approximately fit our personas) to perform a short 3-minute user test. Often in the middle of the hallway, or right out of the elevator, I stopped and asked a participant to perform a few tasks. I would tell them they are a geologist from Iowa, and they are running late to their talk on Microflow and Nanoflow in Porous Media. Or that they are at the convention center for the Annual Colorado RV Adventure & Travel Show, and their friend is waiting for them at the Jayco booth. Holding the pieces of paper in front of them, I’d ask them to point on the wireframe how they would navigate to the information they need. This quick method always results in some assumptions being broken or new insights gleaned.
Design
Commonly thought of as design. The UI is really just the finishing touches. The presentation of a functional product.
Making it flexible/configurable was an important and challenging aspect of this project. The UI had to accommodate multiple colors and fonts in order for a brand to be represented clearly.
Limited the customer’s color pallet to white and 2 additional colors. This allowed enough flexibility to convey the branding, but allowed the configuration to be simplified.
Multiple versions were required for different customer needs. Small properties, with less information, may only need three categories in the navigation, while larger convention centers might need up to 8 spaces for categories.
I tested the design using different existing brands, using their logos, color pallets, and fonts to understand extremes and design around them.
This design also has to take into account legal and marketing needs. Due to legal requirements, a placeholder map had to be created that would be able to be adjusted, not too distracting, non-specific and convincingly realistic.
Over the course of a few critique meetings, I worked with my Creative Director and the stakeholders on multiple rounds of adjustments, but ultimately there were no major changes, and not much deviance from the original wireframes. Possibly some proof that spending more time on research speeds up the process.
Testing
No direct user testing (unfortunately)
Working with internal “users”. Essentially those who somewhat matched our personas and were not familiar with the project.
Placed on sign near lobby.
Reviewing designs with Creative Director, Subject Matter experts, internal stakeholders, customers.
Breakdown
File setup and Breakdown for developer
Understanding how the software works and how developers develop.
Giving enough information, but not too much.
Conclusion
Turned out really well considering the limitations
Became a hit on the internal app store, and spawn many branches/custom builds based on it.
Whitelabeling a product is not only time consuming, but very restrictive.
Overall I enjoyed the process.
Passed along the learnings to the rest of the design team. And held classes on the process for the rest of the company.
Would like to work in a more agile (less waterfall) method. Need to work on marketing that method.
Problems with waterfall method.
Often finding problems too late to be able to do anything about it
Lots of effort without being certain of the application’s efficacy
Working with developers; open communication.