The Glue

Below The Fold

What's New, Glue?

The Glue Blog
Back

Big Time Design: Touch Screen Case Study

January 21st, 2016 10:00 am

04_tic_touchscreen.v2.R2

It’s not often we get to hear a requirement along the lines of, “Just make sure the guy’s body won’t be blocking the screen.”

But that comes with the territory when working on a 70-inch touch screen Google Maps integration for The Irvine Company. An innovative new master plan community in the heart of Silicon Valley, Santa Clara Square has hundreds of thousands of square feet of office, retail and residential space for lease. In order to lease office space, even before the towers are completed, TIC uses an online digital map and integrated touch screen experience for its most high-value clients. It is the focal point of a sleek tour suite that introduces potential tenants to the history and values of TIC while inviting them into the future of the Santa Clara Square experience.

Unlike other touch screen interfaces, this is a guided experience that a leasing director operates for an audience sitting 10-20 feet away and at different angles. On the one hand this allows us to design a more nuanced experience as we can count on the half-dozen users to invest time into learning the best way to manipulate the interface. On the other, we must be mindful that tappable elements should be localized in a small unintrusive area and items on the screen need to be readable at 20 feet.

The Glue took a long, hard look at the current touch screen experiences and found it could be improved, both from a usability perspective and from a design and polish standpoint.

First, we studied how agents used the interactive tour in the field, noting their body movements and natural range of motion. We took note of the small area that allowed the agents to manipulate the screen without blocking anything or awkwardly reaching too high or low. We then thoroughly researched the capabilities of the Google Maps API to make sure we took full advantage of every customization opportunity.

We then redesigned the navigation to reduce clutter and emphasize content areas. We introduced more hierarchy into the navigation so that less screen real estate was spent on navigation and the tappable areas were centralized into a smaller footprint. We also re-imagined all the transition animations to reinforce the navigational hierarchies, helping the leasing agents as well as clients subconsciously understand the information classification.

000

When it came to the visual design, we recommended commissioning a 3-D rendering that allowed users to fly through the future community, getting both a bird’s-eye and an up-close view of the buildings and amenities.

tic_touchscreen.floorplan

We developed a new interactive style using the SCS brand to redesign pins, point of interest markers, distance fields, sliders and other user interface elements into a cohesive, stylish and usable set of tools.

04

Finally, we worked with our development partners throughout the process to make sure the execution was pixel perfect, making any necessary adjustments along the way.

This touchscreen design was a truly collaborative effort between The Glue, our client and our development partner. We held regular reviews, tweaking designs and content to match the brand and the latest Google Map guidelines.

Most days we are thinking about design in palm-size, so it was a real treat to get a canvas this big. Next stop IMAX!

Tagged under: , , , , ,

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

©2016 The Glue™

Small Business Enterprise
The Glue Disadvantaged Business Enterprise