HB Reavis is a real estate company and one of the best office providers in Europe. The spaces they design are places where people love spending their time at and with an aim to bring even more services to occupants of these buildings, More brand by HB Reavis has decided to create an online tool that could be scaled among all its office buildings in Europe.
THE CHALLENGE
Digitize services currently provided offline to reduce administrative burden. Create a future-proof platform that is scalable in terms of services and geolocation.
Initially, they were running pilot projects of bike rental, event management or concierge services; however, all of them ran on a different platform. As the pilots proved to be successful with many data gathered, we have taken all of these and started working on a new online tool.
Firstly, it was important to map all the expected business and customer outcomes. In the first month, we have conducted 54 interviews, which helped us prepare 8 personas for all 4 modules (events, concierge, bike rental, food service). Once we knew what the expectations were, we were able to start preparing a list of all the necessary features and customer journeys that need to be created for the first module – Events. As there are usually lots of expectations for the features, it was important for us to agree with the client on the “MVP line” – a list of basic features with which the module could function and could be tested. This would ensure a quick validation of the concept, thanks to an intensive guerrilla testing just a few weeks in the process.
All data and features were set, now it was time to set up a cooperation. To ensure quick feedback loop and agile cooperation, we have worked in 2-week sprints. We were wireframing really quickly for two or three days. Then we tested with 5 users, then iterated more. The week after, visual design took over the screens, while we started to design another set of wireframes.
Before the design of the app started to take shape, it was important for us to understand the style of the brand itself, so that we could transform this feeling into the app, as well. We have organized a workshop with the client and together created a detailed Tone of voice of More brand.
While the first prototypes were being created, I have started to prepare elementary visual elements that would serve as a base for a new design system of the app. One of the client’s requirements was the use of the pattern and colors of the brand.
The colors of the brand and the pattern itself were very joyful and playful, however it seemed heavy and was not fully corresponding with the tone of voice that we had created. Therefore we have decided to keep the pattern in minimalistic shapes, lines and illustrations, so that the app would seem more elegant, while still staying happy.
As the first wireframes were emerging, it was time to start preparing other basic components of the design system, such as colors, buttons, text styles, forms and other elements. We were using Figma, with all the core elements as “master components”, thus building of the pages was happening quicker and any design updates were displayed instantly across the whole design.
The team was working the whole week in-person – his ensured that the information exchange was happening quicker. Once we had the basic visual elements prepared, the UX team was able to “borrow” these components and started to create new wireframes and layouts with these components.
The design system we were building was based on an Atomic Design Methodology – small elements like buttons (atoms) were then part of larger components (molecules), which were then part of an element such as cards (organisms) and so on. After only a few weeks of sprinting, the library already consisted of many “organisms”.
For each module of the platform, we had to focus on multiple types of users, thus altering interfaces to different needs. In concierge and bike rental modules, we also had to think of the interfaces for the office front desk. In the events module, we had to create an admin interface, that could also be used for hostesses that check the invitations at the venue.
All of the screens were designed to be used not just as an app on mobile phones, but also on desktop devices.
For the Food delivery module, we had to rethink the order system, so that the platform could guarantee a specific time of delivery, not just give a delivery estimate. This had to be reflected also in the design of the platform, since we were also designing the interface for restaurants.
All the designs were tested not just by the customers, but also by the restaurant workers that would eventually use the platform.
The application is now wide-spread across multiple offices provided by HB Reavis, with new functionalities being offered, such as outdoor air quality mapping or carpark booking assistance.
