This project was a collaboration between Deeplocal and Google to create an internal tool. The goal was to create a “Smart Home-Like” interface allowing users to control lighting, audio, visuals, and more.
Project Overview
Challenge
Develop an internal tool that allows users to adjust lighting, audio, visuals, and more.
This internal tool needs to work for 3 different types of users. Beginner, Intermediate, and Advanced users.
Solution
Create 3 different tablet interfaces for beginner, intermediate, and advanced users. I decided to break this up into L1, L2, and L3 interfaces. L1 being beginner and L3 being advanced.
L1, a beginner interface with capabilities limited to a predetermined selection.
L2, an intermediate interface that blends L1 capabilities with audio controls.
L3, an advanced interface that allows a user to combine the capabilities of L1 and L3 with master controls over multiple rooms/halls.
Role
Lead UX/UI Designer
Time
6 Months
Task
Create an internal tool for Google to be used by beginner, intermediate, and advanced users.
Tools
Figma, Internal Google Research
Understanding their users
Let’s set the stage. This tool was designed to be used in St John’s Terminal, A building recently acquired by Google to be transformed into a 5 floor workspace. Their users are internal employees and guests who can have a multitude of technical experience levels. Google categorized these users into 3 groups.
L1 - These users have minimal technical knowledge and simply needed to change the displays/music in a meeting room.
L2 - These users have more technical knowledge and will have control over multiple parameters in each meeting room. This user will control audio mixing, visual displays, and lighting.
L3 - These users will have master controls over multiple rooms, displays, and audio mixing.
Side note ( The preliminary UX research was handled by Google internally.)
L1 Interface
This is the interface designed for the most basic of users. Using material design fundamentals, I integrated the requirements needed for small meeting rooms.
Landing Page
Design note - The “Request Assistance” button was moved to the bottom of the tablet due to limitations within the tablets used internally.
“Countdown” modal
“Countdown” modal active
L2 Interface
The L2 Interface includes all the functionality of L1, but now has segmented controllers with each tab having unique controls. These screens below illustrate how each tab works.
L2 Landing Page
“Lighting + Shades” Tab
This page introduces control over lighting and mechanical shades.
“Audio + Video” Tab
This page allows users to control the wall display, music, and overall audio.
Here users select from a predetermined list of visuals/music playlists. They also have the ability to adjust audio input/output.
L3 Interface
Here we’re met with the advanced interface. This is where things get a bit more complicated. Each interface is tied to the specific room in the building, that being said there are too many rooms for me to add here without creating an extremely extensive case study. Below I’ll show a few variations before moving into the room selector.
Design note - The stakeholders at Google didn’t want each module group to appear left to right. That being said I opted for a vertical orientation.
This screen introduces the ability for users to control the colors of the google sign via hexcodes.
Room Selector
Part of the L3 interface, the room selector is the master controller that allows users to control multiple rooms via a single tablet.
The room selector is where users can master control multiple rooms combining the capabilities of all interface levels. Users can search and filter for each room.
Design Note - “Community Garden” doesn’t have a room code since it’s an exhibit.
Final Thoughts
With quite a few design/developer limitations I’m happy with how this project turned out. I was able to meet the base requirements of stakeholders and stay aligned with their design philosophy.
Accessibility
As I reflect on this project, I would have loved to utilize more tool tips. Sometimes internal projects ignore accessibility because they aren’t meant for the public. There are spaces where I could have pushed harder for that.
Visual Hierarchy
Some stakeholders were very adverse to a horizontal layout on certain pages (L3 specifically). I would have loved to push that structure forward since the white space feels a bit off.