Legal & General: responsive web infographic

Several ideas were forwarded to the client and one concept was to showcase about how the client's investment had made Cardiff city grow throughout these years.

My main role of this project was being the ux & visual design lead. From researching how data visualisation and interactive infographics would behave using finger-tapping devices to ideating a new brand of illustration style for the client; the project was to be completed within a tight deadline of a month.

I worked with content creators, the developers team and an animator to make this all happen and the client was ecstatic with the mobile view in the end.

Video demonstration of the infographic across different screens

User goal

One main concern from the client was to have a better way of presenting the information on a mobile view. They also wanted responsiveness across all screens as well as ensuring the project passes web accessibility. The showcase must also be iframe compatible so it can be used within the client's web annual report.

Research & Ideation

When it comes to viewing responsive web-based data visualisation or infographics, the visual designs for smaller screens are lacking. Platforms such as Flourish have small font sizes that are questionable when it comes to satisfying web accessibility in smaller screen sizes. 

Another thing to resolve was the client's brand illustration style. Since they were going through a transition of using less illustrations throughout their website, the client still wanted to use pleasing illustrations for their infographics. Opinions were sought and ideation drafts were made.

Problem solving

I've decided the best way to showcase the content is to have it as a web-browser information hub widget. 

For mobile view, the user interaction behaves similar to a carousel with overlay modals while ensuring all font sizes passes web accessibility.

A rough sketch layout of the content was drafted and I focused on the widget's user behaviour first before creating samples of the illustration buildings.

One of the main layout ideation for the infographic in sketch form

A combination of illustration in process with showcasing the ux interaction behaviour for users

Designs

Once the interaction designs were approved, my next focus was on creating the illustration assets.

Demonstration of the illustration progress by another designer (only two buildings were illustrated by me within this image)

Once the illustrations were approved, I then handed them over to the developers team for deployment; and for the animation team to animate certain elements in the design so it'll catch the reader's attention.

Mobile touchscreen hif-fi visual designs, deployment was also in construction at this point

Final visuals all by me, a QR code is present for you to scan and should still work at present (2024)

Reflections

When we first pitched the idea of this project, the brand style was different to the current end product. Looking back, nothing concrete was decided until the last month, so the actual creation of this project was approximately 3 & 1/2 weeks.

The decision on the ux/interaction side was approved quickly. The illustration samples created by myself at the time was also heavily favoured, yet as my main role was to ensure the ux behaviours are consistent across all screens, so I had to hand over the illustration work to another fellow designer.

The other designer had a more simplistic approach to the design, making the client question the style. The client's feedback was that they wanted it to visually look more similar to my initial drafted sketch. In the end I took over the illustration creation once the UX part was signed off, it took me at least a week to finish the illustration work that I had envisioned and it was closer to the client's expectations. 

Due to the amount of time needed for creation, feedback and amends, the developers team had a short amount of time to be able to deploy this. I had tried to help the developers team on testing and ensuring the product was as close to the prototype as much as possible.

The end result was a happy client that had loved our design and that it was delivered on time.

See another project…

The Cover (Markel): Data visualisation widgets

Showcasing online data visualisation interactive graphics for different screen sizes.