Frontend development

Project Beat - the heartbeat of SAP's campus

Project Beat was long overdue for a rehaul on everything - the interface, the script, and the whole user experience. Along with a team of interns, I redesigned the interface and used my frontend development skills to create an improved information hub, while keeping old features and designing new ones.

The background

A longstanding intern project (handed down through generations of interns), Project Beat was already developed long before my arrival. However, with each new wave of interns came new ideas to be implemented. In this case, Project Beat was long overdue for an overhaul in its visual design and code structure.

Originally named “Smart Campus”, Project Beat was renamed to reflect its purpose to be the ‘heartbeat’ of the SAP campus. It started off as a mix between a proof of concept for an experimental framework, as well as a way to create a meaningful space for the SAP employees using the Internet of Things. Its goal was to inform the users of campus happenings via implicit user interaction.

The changes

Why did Project Beat have to change?

Lively Kernel
Project Beat was originally developed partly as a proof of concept for an experimental framework called Lively. Developed by CDG as a research experiment, it was meant to help build interactive web applications. However, it was not built to handle the frequent live updates that were integral to the project. The universe crashed often, wiping the code and requiring multiple copes to be made. Therefore, it was unanimously decided by the team that the project should be translated over to HTML, CSS, and JavaScript.

Visual appearance
The original Project Beat was quickly thrown together by a staff member, with little regard for appeal, concept, or interaction. Non-interactive circles with seemingly disconnected tidbits of information populated the screen.

Existing features included: a basic menu module, heat map, charge ports for electric vehicles, slack feeds, etc… However, my managers were also interested in including other modules which would further demonstrate the people-centric nature of the Innovation Centre. Later on, a birthday module was created and included and I further designed a traffic module which was implemented after my departure.

This is what Project Beat looked like before the overhaul.

The process

Initially, I did not have a firm grasp on the background information of the project, because I joined the team in the middle. However, I learned a lot in regards to understanding the user needs and goals of the interface.

My in-progress sketches of potential layouts, what interactions I felt should be included, and concepts I explored for the interface.

The (personal) ignorance

I experienced some problems during implementation:

Car charging ports
This was a prime example of my ignorance, as in how I deigned to understand its importance to the employees of SAP. I initially thought it was useless and reasoned that if someone was looking at the screen, he/she would have a) already parked or b) didn’t drive a car to work.

However, my manager set me straight before implementation and explained that my original design had too many layers to navigate through and not enough affordances to encourage the user to use it. Therefore, the original redesigned concept was scrapped, and the feature was turned into a 2-slide carousel for easy access to information.

Lunch menu
Before I joined the team, the menu module was a text carousel which would only show one line at a time, i.e. “Cafe 1 - Chef Henry’s Asian Cuisine”. I found this lack of information useless, and planned to redesign the feature to work as a button pulling up a modal which would list a more comprehensive version of today’s menu.

However, the API was currently programmed to only pull key features from each of the cafes, meaning that my original plan was not feasible. That, plus Project Beat was only meant to be a hub showing users small bits of information, not act as a computer for reading. Therefore, the modal was condensed to only include key points of information, such as yoghurt flavours and specialty cuisines of the day.

The new things

I experienced some problems during implementation:

Due to its ability to route and inject views into pages, AngularJS was used to create the modules. Instead of hardcoding it into one HTML page (original plan), each module was coded in individual files and then called by the main index file. This allowed for easy maintenance and clean development.

Location module
Prior to the redesign, different time zones would appear on the top right corner of the screen. But there would be a localized weather module elsewhere, without any indication of what location it was referring to (it was in fact only for Palo Alto). Because this was confusing and to inject visual imagery into the interface, these two concepts were joined together to create an overall location module, complete with custom graphics of landmarks.

Multiple modals were implemented, therefore welcoming users to click the screen to learn more. Instead of staring at a screen and waiting for the carousels to move, they were now able to watch them move as well as click the module for a more comprehensive blurb of information available all at once. However, since this was meant to be a hub, there was a limit to how comprehensive the information can be—just enough to educate the viewer, but not enough to see the whole thing.

The demo

Click here to see a demo of the interface in action.


Project Beat dragged on for much longer than I had hoped for, and became tedious after a while. But it was also realistic, because I don't always have the luxury to work on projects that I'm 130% excited about. Also, I struggled with it initially because I was thrust into it without much experience under my belt. But I was forced to learn a lot at the same time, and picked up things as a form of necessity and adaptation. This was the first time I designed a modular interface (although it was still a web application), and at the end of the day, I can't help but grudgingly call it my baby of the term.

I designed a traffic module before I left, but I was unable to implement it because I wasn't given the traffic API to integrate into it. However, I heard that my module was integrated and populated 2 weeks after I left. Other goals included perhaps making the tiles draggable and making the code more modular, but I wasn't able to implement those in time.