The Challenge

When employees are grabbing a quick cup of coffee, we have their attention for a span of approximately 10 seconds. We asked ourselves how we can best leverage this time span.

The Director of our department decided to purchase a digital display to to fit nicely behind our coffee machine at work. The project was very open ended and did not come with any set of requirements or goals.

 


The Vision

We developed digital signage that allows employees to engage by posting content such as an event or a Happy Birthday greeting to a co-worker. This content is displayed along with news headlines pulled from Twitter, videos, other curated content from the admin dashboard.

The purpose of this app is to:

  • Create a display that provides relevant and useful information for users.

  • Provide engagement and awareness toward KP related topics.

  • Develop a scalable product that can be easily implemented in other locations (even if it’s not in front of a coffee machine).

  • Develop a product that showcases and stretches our abilities.


My Role

Being a part of a small team of designers and engineers, I get to wear many hats.

 

strategy/solution

The director of the department came to us with a monitor and full autonomy. We quickly dove into uncovering pain points and brainstorming. 

prototyping

We brought the wireframes and mockups to life with animation through After Effects. It gave us a more realistic view of our product.

user testing

To ensure we were developing something useful, we made sure we conducted user testing throughout the entire process.

 

Meet the rest of the team:

2 Engineers


Lessons Learned

This wasn't the first digital display I've worked on. I've made plenty of mistakes and wanted to make sure I applied everything I learned to this new project.

 

Lessons learned from a previous project:

  • If you do not consider maintenance at the beginning of the project, it will come back to haunt you.

  • Content will become old and uninteresting very quickly.

  • Other departments/teams will ask if you can build one for their department. (This is where the goal of scalability came from.)

Discovery

 

users

The users of the coffee machine are primarily going to be users of the coffee machine. Our primary users are those that sit on the same floor as us, the 5th floor.

 

Inspiration/moodboard

We looked a few other companies and the type of content they were displaying on their digital display.


Action

 

On the Left: Some initial testing to see which animation worked best. We used masking tape to indicate where a user would typically stand. 

In the Middle: Testing some higher fidelity prototypes. Making final adjustments. Our soft launch of the display. 

 

content

There are 4 different levels of information going from the most broad (1) to the most specific (4). 

1: Global - general information or news pertaining to healthcare, technology, etc.

2: KP - general information pertaining to Kaiser as a whole

3: Department - information pertaining to specific departments within Kaiser.

4: Individual - information pertaining to individual employees.

 

layout

We knew we wanted to utilize a card system and so we went many iterations of animation to ensure the optimal experience. I also made sure I talked to engineering frequently to discuss feasibility. 

 

card layout

Now that we figured out how the card were going to move, we moved on to figuring out the layout of them. 

 

visual design

The monitor displays a series of cards that pulls content from Twitter, YouTube and custom made content. We went through several iterations of the visual design of the card while making sure we adhere to the department's style and aesthetic. 

 

user testing

We leveraged online tools and hallways testing to collect feedback and data.

 

VISUAL DESIGN

Having come up with several different variations, we did some user testing to narrow it down to 3 possible choices. From those 3 choices we then conducted some hallways testing to narrow it down the the final design.

 

content

We want people to be excited about our product. In order to validate whether we were going in the right direction or not, we announced features that hasn't even gone into production. For example, we announced that we would feature the weather but it turns out no one cares about the weather. (Maybe because this is Southern California, where the weather never changes.)

We went back to the drawing board. That's when we discovered a pain point. Kaiser has an awesome shuttle system but the schedule is on this piece of paper that everyone always loses. With this in mind, we created a countdown for the next shuttle.

 

VISUAL DESIGN - final design

We created 5 different variations, one for each card category which includes: Social Media, Events, Videos, Shoutouts, and Quips.

 

the delightful factor

Not only do we pull live feeds from sources such as Twitter and YouTube, we created our own content. Our display is located behind a coffee machine so it's only appropriate that we showcase the types of drinks it makes through fun animated GIFs.

We realize most people already know what sparkling water or tea water is, but people still get a real kick out of it. Instead of the display and machine being two separate entities that happen to be in close proximity, this helps us create a relationship between the two things.


Nitty Gritty

If we want this display to function predictably and exactly the way we wanted it to, we needed to establish plenty of rules for it.

a few rules

Each card category has a few different rules and levels of access.

 

scheduling algorithm

How does the display know which card to pull? We knew we wanted the experience remain as diverse as possible so we developed an algorithm accordingly.


Next Steps

We're still hard at work perfecting, iterating, and exploring new ideas for this project. Our next big step is to create an admin panel that serves as a tool to allow users to upload and manage content.

 
 

wireframes - ADMIN PANEL

In order to create a scalable product that's also easily accessed by users, we need to develop an admin panel. Below are a few of the early iterations. 

 

mockups - admin panel

This page allows users to add/edit their own events.