Supercell: Designing a smart office for the hybrid age

First, we asked the employees themselves what kinds of features they’d need to improve their work experience and simplify their daily routines. After receiving the feedback, we started brainstorming the new features with Supercells’ key persons, starting with the upper management. At this point, we considered even the wildest ideas. After the idea workshops were held with several teams, the most promising ideas were chosen and presented to the employees at an event, where everyone could vote on the ideas using their phones.

The chosen features were

• Totem screens and a mobile application with an interactive office map, including a room reservation, service and event admin system
• Custom meeting room booking
• IoT-based room climate control systems
• Green Screens showing sustainability numbers and other relevant information.

Next, we visualized the concept drawings and proceeded to implementation, closely coworking with the representatives of each area. The whole process was done almost 100% remotely, and was based on our agile service design methods, proceeding in iterative sprints. The Futurice team consisted of a project lead, service designers, UI/UX/AV designers, and software developers.

The Totem Screens

The main idea of the totem screens is to help new and upcoming employees, often visiting from other global offices, to navigate and quickly find the necessary premises, thus making everyday life smoother. As the totem screens are about eight feet high, the navigation height is adjustable to accommodate personification.

The Mobile Application

The purpose of the mobile application is to deliver the employees of the Helsinki office the full potential of the office on a mobile phone. From room reservations to event registration, and services, such as gym, nursery, restaurant, masseurs, osteopaths, and barbers, reporting and team discoverability, the features cover all the employees needs.

The Interactive Map

The interactive map is based on the architectural drawings, and UI/UX design for the totem screens and mobile application. The map is shown on both the screens and mobile application, including up-to-date information on room reservations and parking spaces and services. All the information is managed simply by logging into the admin system using a browser. In addition, the building is partly modular, with moveable walls, and any changes made are shown on the map after an admin has done the respective changes in the panel.

The Climate Control Panels

Concurrently, we designed and developed the user interface for the rooms’ climate control panels for easy adjustment of settings such as the room temperature, ventilation, and humidity.

The Green Screens

The Green Screens show the daily and weekly trends for the likes of current electricity usage (on lighting, air conditioning etc.), water consumption and waste generated by the lunch restaurant. To make the numbers more understandable, the screens show how many households each number would correspond to. In addition, information like game statistics and employee introductions is shown.

Technologies used

The totem and mobile app are progressive web applications created using TypeScript and JavaScript, easily accessible using any browser, removing the need for expensive native development. This solution suits an environment with relatively few users. The interactive map was designed with SVG vector graphics and is integrated with the service providers’ databases. The system front end consists of four separate TypeScript and JavaScript applications. NGINX open-source software takes care of the web serving and reverse proxying. WS CloudFront is used for caching static assets. Due to the small number of users, load balancing is not necessary. The backend is built in AWS Cloud and written in the Go programming language, using several databases, such as DynamoDB. AWS CodePipeline automates the release pipelines for fast and reliable application and infrastructure updates. We also look after the cloud maintenance and system development.

The digital features and seamless information flow make Supercell’s office and operations flexible, accessible, sustainable, and efficient. The environment perfectly fits the need to connect people and share relevant information between different locations. On the hardware side, whereas traditionally users once needed to learn how to use devices, at Supercell, the devices help users learn.

The admin system makes it easy to manage the information flow, with consideration for the space usage, events, and other important issues. In addition, the service providers can be in direct contact with their clients, keeping them up to date on appointments and their offering, saving everyone time and effort. With IoT climate control, setting the perfect conditions is easy and possible remotely and in advance. The AV control tablets allow users to set up all systems in one place, without the need for multiple devices. Meanwhile, the Green Screens keep the employees up to date and encourage them to consume electricity, water and food more responsibly.

The digital features are paving the way for people to enter an even more advanced hybrid working environment, improving employees’ experience and therefore their motivation, creativity and efficiency. In the end, that will also raise quality and customer satisfaction.