Your internal information hub, from SAP ICSV to you.
My work term at SAP’s Innovation Center enabled me to work on multiple projects. My most memorable ones included the redesign of an internal information hub, as well as assisting in branding the department and creating marketing collaterals for an open house.
The redesign of Project Beat was the first project I was assigned to at SAP. A longstanding intern project (handed down through generations of interns), the concept 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.
Why did Project Beat have to change? Three main points:
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.
I did not initially have a firm grasp on the background information of the project, due to me joining the team in the middle of the project. However, because I was the sole designer on the team, it was a learning process in itself to understand the user needs and goals of the interface.
I was given freedom to explore and brainstorm layouts, modules, and concepts for the redesign. I also took into consideration some potential interactions.
Lastly, I thought that because the project was called Project Beat, it would be clever to arrange my modules so the information interacted with the viewer almost similarly to the path of a heartbeat. The shapes and sizes of the modules were also originally sized to resemble the golden ratio.
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.
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.
Click here to view a demonstration of the interface on a computer screen..
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.
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.
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.