Build Your Own Tiles

Web Design

All

Interaction Design

Prototype

User Flow

EASE / CVG Airport

See it Live

During my time at Differential, I had the opportunity to work as the designer of EASE, a product to help streamline airport operations. During this cycle of feature work, the EASE product team worked together to create a feature that enabled users to customize their EASE dashboard tiles in order to see data that's relevant to them.

Web Design

All

Interaction Design

Prototype

User Flow

Empowering Users with Personalization

EASE is a product for all kinds of people working in airport operations. Different positions in the airport find different data sets more useful than others. "Whether you're managing sales data in a spreadsheet or receiving power-outage emails, EASE becomes your Data Warehouse, automatically pulling data into a single view of comprehensive tiles."

There were two screens of data tiles called “dashboard” and “pulse” which were seen in the primary navigation. The existing functionality was a set of 4 layouts that the user could choose from in the settings, each called: Default, flight operations, flights, and security.

We saw a need for the user to be able to personalize the tiles on each of these pages so that they could see data that was relevant to them and their role. The new feature needed to allow users to rearrange tiles, add tiles, and remove tiles for the dashboard screen and the pulse screen. Depending on the number of tiles, the size of the tiles adjust to fill the screen. This would replace the existing tile arrangement setting in the settings modal.

AS A USER...

I want to personalize the tiles that are shown on Pulse and Dashboard so that I can see data that is relevant to me and my work.

‍

Iteration on Modal Designs

As I was creating the early designs in Figma, there were issues with the initial interface that was sketched while shaping the feature. Since this was going to be in a modal, there was limited vertical space for the draggable tiles. There also needed to be a way for the user to preview their tile layout to see the arrangement and sizes of their tiles before they save their changes. I thought about opening the layout preview in a modal, but that seemed unnatural for a modal to open another modal. There was not enough space in the modal so I had to rethink the layout and interaction for this feature. This also only accounted for the users selected tiles and would require a new modal or screen for displaying and adding alternative tile options.

I explored other layout options in Figma and found that a 2 column layout with a tab for the layout preview felt like an intuitive alternative. Below are a few of my design iterations before arriving at the final design.

No items found.

The Final Design

The final design meets the needs of the user while being contained within the dashboard tab or pulse tab of the settings modal. The left column serves as the bucket of tile options to choose from and when selected they appear in the right column where they can be rearranged or removed. It also allows the user to switch views from editing the tiles to previewing their selected layout. I made sure to include instructions and indicators for the user so they could feel confident in their decisions.

I worked together with developers for the development of this feature. Although it ended up looking different from the initial shaped idea, the users' needs were kept at the top of mind through the design process. Our team unlocked value for users of EASE with this customizable tile capability.

No items found.

View All Projects