Digital product design system for education, consulting, and innovation for CYP Association

Our client CYP is committed to creating sustainable, effective continuing education and development solutions for their customers. To support their work, we designed and developed a user interface design system that adheres to the same standards of sustainability and efficiency. It allows them to evolve their products with ease and confidence.

CYP Design System

Data visualizations highlighting the economic significance of Zurich's industry clusters for Statistical Office Canton Zürich

Cluster Data

Dashboard about the COVID-19 pandemic in Switzerland for the Federal Statistical Office

Covid-19 Dashboard

Our design was eventually implemented by a third-party software engineering partner. To simplify the handover of the design specification and to ensure the quality of the implementation, we established a comprehensive design system. The system consists of a library of modular interface and visualization components as well as clear guidelines for interaction and behavior patterns. Catalog, our own tool for creating living style guides, gives the Augment design system a home.

Design system

The application measures data on four physical activities which contribute to the user’s overall health indicator. We designed dedicated views for each of these activities, allowing the user to drill-down into the data of each of these individually. The different views enable a self-directed analysis of statistical information and progression over time in addition to offering guided insights calculated by artificial intelligence. 

Deep dive into data

Assisting people to live a healthy lifestyle is something we value. We believe that data, when collected reliably and understood intuitively, can play a significant role in helping us understand our health choices. In our collaboration with Biovotion, we combined their technical expertise with our creativity to launch Augment, a mobile application that helps people make sense of their physical activity and aims to guide them to better health.

Knowing which activity to invest your time and effort is key to achieving your objectives and potential. We designed a simple representation of a user’s daily activity agenda. Intuitive and immediate, the design blossoms throughout the day providing goals and recommendations that are unique to each user’s personal needs.

Designed to reach goals

Augment helps people understand and act upon their medical data. Collected by Everion, a wearable device capable of measuring a wide range of health parameters, Augment provides a high-level overview of a user’s health status and presents personalized objectives in the form of daily goals.

Intuitive and actionable medical data

To generate sustainable outcomes for better personal health, we visualize a user’s movement, exercise, relaxation and sleep on different time scales: daily, weekly, and monthly. These three views foster an understanding of a user’s current health status as well as the long term impact of habits and behaviours.

Insights across dimensions and time scales

To promote positive behaviours, the Augment application enables users to identify and map decisions, as well as actions that are contributing to their health. This requires the study of many parameters in parallel. The timeline design allows detailed analysis without cognitive overload by combining all relevant information into one compact visualization.

Density without complexity

The design of the Augment application interface encourages the user to stay active and dynamic throughout the day. The fluid page transitions with subtle interactions mirror this goal by exciting the user with an energetic look and feel.

Visualization in motion

Measuring a wide range of parameters, the Augment application includes a comprehensive vital signs view, that provides the user with accurate insights. Each vital sign is represented as a card composed of real-time measurements, customizable time-series, and helpful statistics. By switching between the «live» and «24h» view, the focus shifts from a summary overview to a detailed, exploratory visualization.

Easy to scan, ready to explore

Augment for Biovotion, a case study by Interactive Things on designing a mobile application to inform, motivate, and empower individuals on their journey to better health.

Augment by Interactive Things

Our interface uses tailored messaging throughout the workout experience with the goal to provide the athletes with immediate feedback on their performance. In collaboration with Aurum, we defined the appropriate tone of voice to establish an honest and motivating writing style across the whole application.

Clear and motivating copy writing

To provide a consistent and cohesive experience for each target audience, we designed two separate interfaces: a «trainee» view for the athlete embedded into the workout machine and a «trainer» view to operate and monitor each phase of the workout session via a remote tablet.

Dual-screen workout experience

You compete against your own performance benchmark.

The inner ring shows your current performance, the outer ring shows your personal average.

<colored>Green</colored> means you perform better than your personal average.

<colored>Orange</colored> means that you have fallen below it.

The dot indicator shows the repetition cycle and provides an intuitive overview of the full exercise.

New personal bests are celebrated immediately.

In addition to our solutions for the workout machine and its various connected interfaces, we also designed and developed a fully responsive web application for athletes which provides access to a personal  performance dashboard, historical activities, account settings, and training schedules.

Comprehensive workout ecosystem

We helped Aurum create intuitive and engaging user interfaces, accompanying their newly developed computer-controlled, motorized workout machine. Our meticulously crafted visualization, evolves with time and reflects the amount of physical power applied to the helix machine. The visualization has to be intuitive and straightforward, in order to be readable under any condition, regardless of physical effort.

Highly optimized workout interface

On the dashboard, athletes can see their workout progress and peak powers. The main goal of the four designed visualization is to show a combination of progress overviews and specific performance data. Hence, patters of workout routines and strength development over time facts can be explored and evaluated for future exercises.

Explore your workout journey

What we call the «path of success» depicts the strongest performance across all exercises over time. The best result per exercise is visually highlighted and helps to identify patterns of how athletes perform. Ideally all bars increase over time to create a vertical path that visualizes the best performance in the latest workout.

Output by exercise

The peak power chart visualizes your max-strength per individual exercise and indicates if you already reached the optimal «bone growth» zone. Performing within the optimal zone helps to strengthen your bone structure and mitigate the risk of osteoporosis.

Peak power reference

The progress by exercise chart allows athletes to compare their performance between the first and the last workout, within a certain time frame. The focus is on the personal performance improvement per exercise. Ideally all bars show positive values and increase similarly over time.

Progress by exercise

The progress overall chart shows the overall performance from the first training to today. It helps to identify downturns or continuous progress over time. It summerises to overall output of all performed exercises of a regular Aurum training.

Progress overall

Aurum, a case study by Interactive Things on designing and developing data-driven interfaces and visualizations powering an isokinetic workout system.

Aurum by Interactive Things

The platform hosts a wide variety of metrics including laboratory-confirmed cases, hospitalizations, deaths, number of tests, vaccinations, virus variants, and many more. The custom-made chart library was intentionally designed to be understood by a broad audience independent of their data literacy.

Building a modular chart library

The interactive data visualizations were specifically designed to emphasize the key aspects of each metric. Time series highlight trends over the course of the pandemic, heatmaps reveal patterns across demographic groups, and choropleth maps show densities across geographic regions.

Turning data into insights

Covid-19 Dashboard for the Swiss Federal Office of Public Health, a case study by Interactive Things on designing an interactive dashboard about the current situation of the Covid-19 pandemic in Switzerland and Liechtenstein.

Covid-19 Dashboard by Interactive Things

Sharing knowledge through storytelling

A modular framework to create articles

Shaping the digital future of university collections

Explora for ETH Zürich Library, a case study by Interactive Things about building a publication for visual storytelling about scientific materials and topics.

Explora by Interactive Things

How We Visualized the 43 Indicators of OECD’s Going Digital Toolkit

You can learn more about the strategic thinking behind this chart system and how it was practically implemented in our making-of article by Luc Guillemot.

Read our article

The data underlying each of the 43 indicators included in the toolkit can be analyzed with detailed charts. But each data set offers unique opportunities and challenges for how to best visualize it. To provide the right chart with the right features for each indicator, we’ve built a modular chart system that’s consistent and scalable.

Custom-made chart system

Each country can be recognized and distinguished by its unique data portrait.

Data portraits of countries

The toolkit supports the “2019 Going Digital Synthesis Report” by making the quantitative and qualitative information visually explorable and comparable. The toolkit’s center piece, an interactive radial plot, provides an overview of the state of the digital transformation for all OECD countries and allows to put individual countries in perspective. Showing all countries as unified and equally important reflects OECD’s holistic and inclusive mindset.

Holistic and inclusive approach

The Going Digital Toolkit helps countries assess their state of digital development and formulate policy strategies and approaches in response. In collaboration with the OECD, we created an interactive data platform to visualize several indicators and link them to publications, policy guidances, and thematic ensembles.

An image with the name of the country selected: France

An image of all the indicators that looks like a wheel

An image of all the indicators that looks like a wheel, with tooltips

Data platform about digital transformation for the OECD

Going Digital Toolkit

Eight dimension of opportunities and risks of digital transformation such as jobs, trust, or innovation are included in the toolkit. A set of indicators within each dimension allows users to assess a country’s state of digital development. But digital transformation also cuts across many aspects of the economy and society. The themes are cross-dimensional entry points to the same indicators and focus on specific issues like skills, productivity, or gender. By providing non-linear and context-specific access to these indicators, the toolkit serves multiple use case with one interface.

Exploring data by dimension or theme

To celebrate the launch of the toolkit during the “OECD Going Digital Summit”, we’ve created a playful physical giveaway. The purpose of this analog wheel is to introduce the policy dimensions with their respective indicators to the public mimicking the functionality and behavior of its digital counterpart.

Bridging the media gap

Image showing devices with different screen sizes

To make the toolkit universally accessible, we optimized the design for all device categories. From small smartphones to large presentation screens. Our work didn’t stop with visually restructuring the content: each interaction and behavior was honed to create an effortless and delightful experience.

Fully responsive design

The target audience of the toolkit are policy makers first and foremost. To tailor the design to them, we had to start with their true needs: We identified the most important challenges from their overarching User Journey and specified them as a set of User Stories. Understanding the concrete tasks and questions of our audience enabled our design team to find solutions that can be tested and validated.

We help you to explore circumstances, establish empathy, derive insight, and build up knowledge.

Driven by user research

We wanted the toolkit to stand out from other data platforms and be accessible to a wide audience. To achieve this, we’ve developed a comprehensive design system for colors, icons, typography, visualizations, and interface elements. The result is a bold visual appearance that fits neatly into the overarching Going Digital project while adhering to the standards of web content accessibility.

Bold yet accessible design system

Going Digital Toolkit for the OECD, a case study by Interactive Things on designing and developing a data platform about digital transformation for the OECD.

Going Digital Toolkit by Interactive Things

The main challenge we faced in this project was to communicate the statistically very complex data to a broad audience in an accessible way. Our solution is a set of simple data visualizations summarizing the findings of all the studies in the data base.

Communicating complex violence data to a broad audience

For scientists and journalists we built a tool which allows them to explore the over 3,000 studies within the Violence Info platform. The studies are organized first by violence type and then by its prevalence, consequences, risk factors, prevention and response strategies. The full set can be filtered by author, sex, age or income group and other parameters.

Providing an expert tool for scientists and journalists

Violence Info also covers country specific information on their action plans, laws and programs created to prevent violence. Further, it indicates their reported homicide rate and available studies on other types of violence.

Reporting a country’s actions to prevent violence

For each of the violence types we created a dedicated page to summarize the most important facts and figures. It is structured to first give a solid definition and explanation of a violence type’s prevalence. The experience then continues into the potential consequences and risk factors for an individual and our greater society. Each category is concluded with a list of possible prevention and response strategies based on the findings of multiple studies within the database.

Introducing the different types of violence

Violence Information for the World Health Organization, a case study by Interactive Things on building a global knowledge platform about violence prevention.

Violence Information by Interactive Things

The Federal Government values accessibility and inclusiveness of their web content above everything else. Adhering to the WCAG 2.0 guidelines was a strong requirement from the very beginning of the project and influenced the design process as well as the final experience of the report in a lasting way.

Wellbeing in Germany Accessibility Compliance

Accessibility compliance

For each of the twelve dimensions we purposefully selected and highlighted one single indicator. We wrapped them in playful and interactive visualizations which allow our users to see their personal data in comparison to the overall dataset. The flagship visualizations were designed to support a visual narrative and stand out with custom views specifically tailored for the report.

Wellbeing in Germany Flagship Visualization: Environment 1

Wellbeing in Germany Flagship Visualization: Environment 2

Wellbeing in Germany Flagship Visualization: Environment 3

Wellbeing in Germany Flagship Visualization: Income Comparison 1

Wellbeing in Germany Flagship Visualization: Income Comparison 2

Wellbeing in Germany Flagship Visualization: Income Comparison 3

Flagship visualizations

Wellbeing in Germany Indicator Summary Card

To serve the different needs of our diverse audience groups, the report is structured in two main areas. The interactive report follows a data-driven storytelling approach to explain gained insights in a narrative form. The indicator dashboard offers statistical background information with the options to access the underlying data and download the charts.

Wellbeing in Germany Components: Report + Dashboard

One report, different insights

Wellbeing in Germany Social Media Sharing Cards

Wellbeing in Germany for the Federal German Government, a case study by Interactive Things on building an interactive, data-driven government report on the quality of life.

Wellbeing in Germany by Interactive Things

Kanton Zürich

Stadt Winterthur

Stadt Zürich

Federal Chancellery FCh

Federal Electricity Commission ElCom

Federal Office for Agriculture FOAG

Federal Office for the Environment FOEN

Federal Office of Public Health FOPH

Federal Statistical Office FSO

German Chancellery

The German Federal Government works with us to make the insights gained from their citizen dialogue about the current state and future trends of wellbeing in Germany explorable for everyone.

German Federal Government

The Swiss Federal Government works with us to make open government data more accessible, understandable, and usable for everyone with a series of data applications, platforms, and publications.

Swiss Federal Government

The canton and city of Zürich work with us to serve their citizens with approachable, comprehensible, and practical information through a series of data applications, platforms, and publications.

Zürich

Together with our clients, we create engaging and meaningful interactions with their audience. We design and develop websites, applications, platforms, and publications with a digital-first, data-driven mindset. Our work comes to life on the web, on mobile devices, and in interactive installations.

We build tools and experiences for people.

Vital signs. Medical grade. Anywhere. All the time. Biovotion's solutions connect patients and providers throughout the continuum of care. From primary to hospital and home care. Dedicated, disease specific solutions for better health outcomes.

Personal application to inform, motivate and empower people on their journey to better health for Biovotion

Augment

Aurum offers an innovative workout method using the newest technologies to provide a highly customized experience. Through a data-driven application, it aims to deploy maximal effect with minimal effort. We contributed to this workout experience by designing all digital touchpoints: the training screen, coach application, and athlete dashboard.

Data-driven interfaces and visualizations powering an isokinetic workout system.

Aurum

The Ava bracelet and application allows women to effortlessly track nine different physiological parameters. To transform the collected data into insights, we designed a new statistics and analysis page for the mobile application which includes compelling yet simple-to-read data visualizations.

Health data visualization for tracking cycle, fertility, and pregnancy

On four Sundays a year, the Swiss vote on federal, cantonal, and communal topics. The ballot dashboard we created for the Tamedia media group provides up-to-date information before, during, and after the vote. The administration interface allows the news editors to enter trends, projections, and the final results from various sources and push them to their audience in real-time.

Dashboard about the results of the Swiss popular votes for Tamedia

Ballot Dashboard

The Federal Statistical Office has the mandate of communicating statistical results to a wide audience in an easily understandable way. To help them present data effectively and consistently, we've developed a comprehensive design system for data visualization applicable across media channels like print, online, and television. The new system was published as a living documentation of design principles, design specifications, chart templates, and more.

Design system for creating effective and consistent charts for data analysis and data reporting for Federal Statistical Office

Data Visualization Guidelines

The Cancer Monitoring Dashboard is the authoritative source of information about the incidence and mortality of cancer in Switzerland. The website provides the general public with detailed insights about important parameters in epidemiology to understand and observe the occurrence and development of oncological diseases with a focus on readability, usability, and accessibility.

Dashboard about the incidence and mortality of cancer for the Federal Statistical Office

Cancer Monitoring Dashboard

The Child Penalty Atlas maps how the arrival of a child affects the careers of men and women across the globe. This exploratory data visualization developed for the Hub for Equal Representation in the Economy (H.E.R.) at the London School of Economics highlights the research insights in an intuitive and memorable manner. Users can search, browse, and compare the observed child penalty in employment and gender gap in employment across continents and countries worldwide.

Tracking the impact of parenthood on the careers of men and women around the world for H.E.R.

Child Penalty Atlas

Clusters are industry groups that play a significant role in Zurich's economy due to the high density of companies, research and educational institutions and professional organizations. By networking the players along the value chain, the Office of Economic and Labour Affairs of the Canton of Zurich aims to increase the innovative strength of the respective clusters as well as of the various clusters among themselves.

The Swisscom Cockpit gives their users detailed insights and full control over their costs when they use mobile data and make calls. We designed and implemented a responsive frontend that´s easy to use and accessible across all mobile devices.

Personal data management and analysis application for Swisscom

Cockpit

The exploratory network application we created for the Zurich University of Applied Science interconnects the competences available in the various institutes of the university. Competences are clustered into topics and subtopics allowing you to zoom from a bird's eye view down to the very details with ease.

Network visualization of research activity and competences for ZHAW

Competence Browser

The Competitiveness Datahub assists the six Western Balkan economies Albania, Bosnia and Herzegovina, Kosovo, Montenegro, North Macedonia, and Serbia in assessing and benchmarking their economic reforms and policies essential for competitiveness, enabling them to formulate better policies in response.

Data platform on Western Balkan economic competitiveness for OECD

Competitiveness Datahub

The Covid-19 Dashboard is the authoritative source of information about the epidemiological situation in Switzerland. The platform provides a diverse audience with understandable insights about the pandemic in the form of interactive tables, charts, and maps with a focus on readability, usability, and accessibility.

Assigning the best fitting temporary workers to open job positions is a complex process for brokers of employment agencies. Dooly makes these tasks intuitive and efficient. We designed and developed a user interface design system to build a flexible and elegant information management platform.

Information management platform for temporary personnel placement for maverix

Dooly

The E-Cityplan panels located across the city of Zürich are here to help residents and visitors explore the area around them. A dynamic and interactive map is at the heart of this service in addition to a timetable for public transportation, event, local information, and emergency advice.

Information and navigation system helping people getting around the city of Zürich

E-Cityplan

The pilot housing project called Ecoplace in Zürich offers its residents sustainable living in a convenient environment. Using intelligent technology, the daily consumption of water, electricity and heat is tracked for every apartment. The reporting tool we designed and developed visualizes this data to give residents immediate feedback and motivates them to adjust their behavior – always with the goal to reduce consumption to a minimum.

Smart home dashboard to facilitate sustainable and mindful energy consumption for AXA

Ecoplace

This platform visualizes the current state of education for over 100 countries and enables you to look beyond the averages, see the disparities and identify which demographic groups are the most disadvantaged.

Data platform on deprivation and marginalisation in access to education for UNESCO

Education Inequalities

The Global Education Observatory is a gateway to education-related data. It builds on existing data from a range of sources, and gathers new information ensuring an exchange of information to improve the monitoring of SDG4 progress and relevant and emerging policy commitments.

Data platform to track and monitor SDG4 progress and commitments on quality education for all for UNESCO

Global Education Observatory

The online report «Education Progress» summarizes the key facts and trends in education around the world. It complements the information that is provided in the printed version of the Global Education Monitoring Report, the tool of the international community for the follow-up and review of progress towards a joint commitment.

Data-driven report telling the story behind education data from around the world for UNESCO

Education Progress

Every four years, Switzerland conducts elections to choose new representatives for both the National Council and the Council of States. The election dashboard we created for the Tamedia provides up-to-date information before, during, and after the elections. The administration interface allows the news editors to enter trends, projections, and the final results from various sources and push them to their audience in real-time.

Dashboard about the results of the Swiss federal elections for Tamedia

Election Dashboard

ElCom is responsible for monitoring prices and tariffs in the electricity sector in Switzerland. To support their mission, we've designed and developed a public information dashboard where policy-makers and consumers can analyse and compare electricity prices across cantons, municipalities, and network operators.

Detailed electricity price analysis of cantons, municipalities, and network operators for ElCom

Electricity Prices

The ETH Library has an impressive and extensive archive of rare books and provides an infrastructure for the medium and long-term storage of digital data. To make these resources and services more accessible to the public we designed and developed Explora. This mobile-first website holds a series of carefully curated articles which are published by the ETH Library staff on a quarterly basis.

Publication for visual storytelling about scientific materials and topics for the ETH Library

Explora

Flynt's wealth management platform provides users with a holistic view of their wealth ecosystem. We helped to design and develop an initial version of the application, always with the goal to put the client in the center and to communicate even complex concepts in a simple an understandable way.

Digital wealth management platform connecting the dots of complex wealth structures

Flynt

Together with the Swiss newspaper Neue Zürcher Zeitung, we tell the story of people affected by the happenings in Fukushima in March 2011. We designed and implemented a media-rich reading experience that attempts to paint an accurate picture of the humanitarian situation two years after the triple catastrophe.

Sector	Academia
Product	Design System
Impact	Education & Research
Release	October 2020

CYP Design System

Digital product design system for education, consulting, and innovation for CYP Association

More Projects

Covid-19 Dashboard

Cluster Data