Wayfinding on large format touchscreens
2017Brief
After several years in the market, it was time to upgrade our Digital Directory product. The current app provided maps, directory listings, and wayfinding across shopping centers predominately located in North America. We needed a fresh, modern directory that could scale multiple markets and work for a large range of users.
Solution
While the previous version of the directory split the interface between the map and content, we decided to put the map first and make it a focal point of the experience. The map would take up the entire screen as a "first-class citizen" with search and wayfinding as a critical part of the experience.
UI / UX Design, User Testing, Prototyping, On-site Testing, Stakeholder Co-Design Sessions
Sketch, HTML/CSS/JS
Display screen with graphical user interface (USD871423S1)
Project Images
Wireframes were created to capture concepts we iterated through early on. The low-fi designs were added into a coded prototype that leveraged real data to display a 3D map pulled in from our CMS. This prototype was used to conduct user testing that further validated our concepts.
Visual tests were conducted to experiment with different stylistic directions and UI elements.
More visual tests and UI experiments.
Throughout the project, we leveraged the double diamond design process to test multiple solutions. We established a feedback loop where we would bring user testers on-site and walk through various scenarios and test cases.
The screens were designed to place focus on the search bar while providing a number of supplementary options to the user, like browsing categories. The search interface provides quick access to categories and features a custom keyboard made for large touch screens.
The category browse experience offered a structured way to explore locations within a venue. Each category tile pulled in custom imagery to match the customer's brand.
The profile screen contains key details for a particular location while displaying a preview of wayfinding directions on the screen.
Straight-forward directions provide users the instructions they need at every step.
