Stockpulse – David Kippels

Client
Stockpulse GmbH

Role
UI Design, UX-Support, Illustration, Branding, DesignOps

Emotional Data Intelligence

Stockpulse provides superior decision support for their customers through a data intelligence system that collects, filters, matches, scores and augments unstructured data, transforming it into information. The task was to make sense of the given information architecture in both concept and design. Both architecture and the visual approach were set to maximize the usability, making the quite hard topics more accessible.

Understanding Stockpulse

The project was split up into several smaller projects. The Data Center, the Dashboard and in the end a rework of the existing Stockpulse Homepage. In order to connect the different aspects into a coherent whole we had to understand the intricacies of trading based on Emotional Data. The information architecture of the various Tools, APIs and Features had to be as simple as possible and flexible to be used globally. Wireframing and a lot of Feedback from the client helped to build a solid foundation before we started to think about the visual Frontend. The goal was to create a structure where the user could quickly grasp the at times abstract information and complicated Stockpulse provides.

Evolving the Logo

While working on the new Interface Framework, it quickly became clear that the existing Stockpulse Brand needed a rework. The Logo was crafted based on the existing Version, carefully combining the key components, like the windrose and graphs with new elements. The result is an eyecatching new Mark with a modern font to accompany it. Both Icon and Wordmark can be used independent from another, the Icon now works in very small sizes as well.

Fonts & Colours

Together with the logo a more vibrant colourpalette was created. The aquamarine blue catches the eye while providing a perfect guiding colour for the User Interface. Together with the accent colours and a generous white space the interface is clean and easy to navigate. The new Font combinations of a bold Grotesk headline and a geometric copy complements the straight-forward look and feel of the new design.

Illustrations

Illustrations where used as a way to give context and improve the user experience through visual support of the copy. The style is purposely flat and very clean with only the two primary brand colours and shades thereof. Almost wireframe-like, the images also visualize the tech background of Stockpulse. To ensure a high scalability, the different elements can be combined and extended indefinetely, due to the isometric nature with no specific perspective vanishing point.

Building a Framework

Due to the very agile nature of the project we decided to build up a pattern library in the designs that is mirrored in the frontend framework. Elements like colours, fonts, buttons and more can be adjusted globally, with the central point of truth always being the component library. This meant that we didn't work screen by screen but rather build a hollistic and flexible library of building blocks for all kinds of purposes. Adjustments in both design and frontend can be made rapidly and globally.

Webdesign

After building a strategy, getting to know the clients needs and creating solid wireframes we started to design the actual Dashboard, Data Center and Product Pages. The Design System ensures a flexible, but consistent look & feel throughout all breakpoints.