INTERACTIVE DATA VISUALISATION (SCROLLING ONE-PAGER), MATCHCARE.

Problem

Our data reports inform people about the current job markets. It is complex data visualized through generic charts and ready-made dashboards, which results in less accessibility for the users on their mobile devices. The company wants to make their reports more appealing to their users. Based on LEAN problem analyses, I have hypothesized that data view should be more user-centered and designed simple enough to be understood by a maximum number of users.

Platform: Web Design & Mobile App Design.

Profile Photo

Role played

I was Designer and front-end Developer. I was responsible for translating a large amount of data into a story telling, combining graphics with informatica. As a developer, I have implemented my wireframes in HTML and CSS.

Skills performed: Motion, design thinking, sketches, user flows, site maps, prototypes & low & high-fidelity wireframes, responsive design in CSS.

Profile Photo

Solution

Combining words and images to tell the story quickly, concisely and in an entertaining fashion led to the desired result, which is visualizing data easily and organize the content in a way that it is most accessible. During the Development phase, I applied responsive design in CSS and I implemented the design into HTML/CSS interactive report. It is a one pager that made the story more appealing to the users on web and mobile screens.

Profile Photo

Research

While sketching the user flows up to the high-fidelity wireframes, I constantly revised and updated designs and documentation through user testing and customer feedback. Based on A/B testing I choose more simplicity and lesser content. The charts had to become self-explanatory without labels.

Profile Photo

Challenges

During the Post Launch phase when monitoring the Launch phase the data charts were not efficient. During collection of the information, the results were not always precisely. The charts about tasks that belong to industrial machinery mechanics were too ambiguous. Instead of looking at the results as an exact representation of reality, I looked at them as a frosted glass: I can see the contours, but it will never be very sharp. I decided to use text card instead of charts.

Profile Photo

Impact

The business goal was to make the company data dashboards more appealing and make them accessible for users on mobile devices. By closing the gap between the graphic design and informatics, the represented story in a user-centered way made the users understand complex data at a glance.

Profile Photo

Lessons learned

Because of this project I realized the importance of planning and deciding how to map the entire story using insight stories. It made me interact with the company in an early stage, so that I can plan and have decided the goals that I want to achieve with my story.

Profile Photo