Summary

Final Designs

Research

Design & development

Rive animations

Conclusion

App UI| data-vis | motion

Vizzy

Blending the credibility of journalism with the
engaging, interactive format of social media

Blending the credibility of
journalism with the engaging,
interactive format of social media

Problem

Trustworthy news is harder to find, and often less engaging.
People are turning to TikTok and Instagram for quick updates—but accuracy isn’t guaranteed.

Trustworthy news is harder to find, and often less engaging.
People are turning to TikTok and Instagram for quick updates—but accuracy isn’t guaranteed.

Insight

Users crave credible info, but long reads feel overwhelming.
Social formats are familiar and engaging—but often unreliable.

Users crave credible info, but long reads
feel overwhelming.
Social formats are familiar and engaging—but
often unreliable.

Solution

I built Vizzy — an app that turns long-form articles into short, interactive data visualisations.
Every source is verified.
It feels like social media, but built for staying informed, with trustworthy sources

I built Vizzy — an app that turns long-form articles into short, interactive data visualisations.
Every source is verified.
It feels like social media, but built for staying informed, with trustworthy sources

Outcomes

Transformed long-form articles into short, interactive visual journeys, making complex topics easier to digest.

Built trust through source verification and clear labelling, helping users feel confident in the information they engage with.

Built trust through source verification and clear labelling, helping users feel confident in the information they engage with.

Transformed long-form articles into short, interactive visual journeys, making complex topics easier to digest.

Delivered a mobile-first prototype that blends familiar social formats with reliable, interactive, data-led storytelling.

Delivered a mobile-first prototype that blends familiar social formats with reliable, interactive, data-led storytelling.

Research

Survey

A survey was conducted to gain insights of 'Vizzy's' potential audience.
Some key findings were:

Interactive visualisations received more praise.
Bubble charts are generally deemed as confusing.
The use of colour is well liked.
Short videos and animations were the most favoured formats for learning new content.
Terminology should be simple enough for a range of users to understand.

A survey was conducted to gain insights of 'Vizzy's' potential audience.
Some key findings were:

Interactive visualisations received more praise.
Bubble charts are generally deemed
as confusing.
The use of colour is well liked.
Short videos and animations were the most favoured formats for learning new content.
Terminology should be simple enough for a range of users to understand.

View in Miro

Human-Centred Research

Survey insights informed the creation of an empathy map, personas, and a value proposition canvas—methods used to uncover user pain points, motivations, and needs. Three distinct user types were identified based on data confidence levels, allowing me to shape a product that caters to varying levels of expertise. This research directly influenced feature prioritisation and helped align the app’s value with real user expectations.

View in Miro

Competitor Analysis

I analysed both social media platforms and news competitors, noting their strengths, weaknesses, and how they delivered content—whether through text, short-form video, or a mix of formats.

View in Miro

SCAMPER & ODI Development

Building on insights from a competitor, I used the SCAMPER method to explore new directions for the product and address pain points identified earlier in my research. The ideas generated helped shape my Outcome Driven Innovation and informed specific app features designed to boost motivation, improve the overall experience, and bridge the data-divide.

View in Miro

Design & Development

UI Research

Based on features that I wanted to include in 'Vizzy', I marked up competitor apps and used these to inspire the wire-framing process. I studied the layout and visual hierarchy, and was able to identify what worked well for these apps - and what didn't.

View in Miro

Low-fidelity Wireframes and Testing

I created the first set of low-fi wireframes based on the UI research. I conducted user tests on the wireframes and made note of the key points that were brought up during the test. These notes helped to highlight points of friction, which were later changed and developed. After aligning better with user expectations, the low-fi wireframes were developed into high-fidelity.

View user tests

View wireframes

View user tests

View wireframes

High-fidelity Wireframes

Static high-fidelity wireframes were first developed in Figma, where I focused on refining the layout, hierarchy, and visual identity. These frames were then imported into Framer, where I created interactive components. I also designed micro-animations throughout the app UI, to make small, delightful moments to encourage user engagement.

View in Figma

Rive Animations

Building Data Visualisations

Using Rive, I animated and built interactive data-visualisations to encourage the user to interact with the news story. I tested the animations on my phone and increased the size of hitboxes and buttons to improve usability. I explored the use of blend states, nested art boards and joysticks, while using the state machine to build smooth,
responsive interactions.

Conclusion

Vizzy was an opportunity to rethink how people engage with news and information in a more accessible, visual way. The project let me explore how design can simplify complex ideas—turning articles into short, interactive data stories. I used the build to push myself creatively and technically, experimenting with motion, interaction, and format. While there are still things I’d refine, the outcome captures the core goal: making reliable information easier (and more enjoyable) to understand.