Data Analytics UX Design

End-to-end design for an indoor analytics platform, from user interfaces and dashboards to hardware concepts.

RoleFront End Designer
EmployerWalkbase
Tools and Methods
SketchDesign System DesignUser JourneysUser InterviewsZeplinHTML and CSSHighcharts JSTableauFusion360PhotoshopAfter Effects
Data Analytics UX Design

Background & Challenge

Walkbase is a retail analytics and in-store marketing platform that measures physical shopper behavior and connects offline store visits with digital data.

I designed the complete visual identity for Walkbase’s new user interface. I also designed a wide range of interactions and user flows throughout the interface.

Due to confidentiality, on the real walkbase UI can only show the image shown above, which gives an idea what kind of an app it is. All business-related information has been removed also from this example. (Walkbase is a paid web service that is available only to paying B2B customers, so I don’t have entry into it.)

Forming a Design Process for User Interface Renewal

As the company’s sole designer, I was responsible for the entire design process. For the user interface redesign, I created a two part design workflow. One part focused on technical planning and information architecture and was developed collaboratively with the team, while I led the visual design process. I created the interface concepts, components, and overall visual direction, refining the direction for also them together with the leaders. As both streams progressed, the visual concepts were iterated to match the technical and information architecture decisions.

During the early concept phase, I created eight moodboards to present different visual directions for the new interface to the company’s decision-makers. Five of them are shown below.

I also designed the complete visual system for the new interface, including typography, colors, shapes, and other core design elements. The original materials are confidential, thus the examples shown here have been modified. The type scale has been recreated using different fonts, sizes, and naming, and the color palette has been altered, with only Walkbase’s blue brand color remaining unchanged.

Kuva 1

Moodboards were used to find the visual direction company leadership wanted for the interface renewal.

Kuva 2

The visual conceptualization began with creating typography and color schemes.

User Experience

As part of the design process, I also conducted user research to better understand the needs of different user groups and to support the interface concepts. Below is an example of the service journeys I created for product team workshops.

The service journeys were based on a combination of research methods, including netnography, internal company knowledge, and a small number of user interviews.

Kuva 1

In the conceptualization phase I did some user research also, and created user journeys for several user types on the basis of the research. The user journeys were used when discussing for example larger information architecture.

Final Designs

Most of the materials I created for this project are confidential and cannot be shared. To demonstrate the kind of work I did, I created a set of mockups in Sketch showing a dashboard for hospital bed capacity during the COVID-19 pandemic.

This dashboard is not related to the company’s actual products. It was created solely as an example of the type of design work I was responsible for.

Kuva 1

THIS DASHBOARD IS NOT ABOUT A WALKBASE PRODUCT. Because of confidentiality reasons I cannot share designs, so I created similar UI components for an imaginary hospital capacity app. These are very similar components as the ones I designed at Walkbase; the content is however different, and the styling is different.

Industrial Design

I contributed to the design of the casing for a device used as part of Walkbase’s system. Since multiple devices are installed on the ceilings of each site, the goal was to create a design that was discreet, visually smooth, and easy to install and use.

I helped define the requirements for the casing together with installation and maintenance engineers. Based on installation and usage scenarios, I designed features such as status indicator lights and contributed to the casing’s shape and cable connector placement. I then created 3D CAD concept models that served as a reference for the mechanical engineer during the final casing design.

Because the final product is confidential, I can only show early concept material.

Kuva 1

The casing was modelled in Fusion360.