Vizzy
Blending the credibility of journalism with the engaging, interactive
format of social media
Vizzy
Blending the credibility of journalism with the engaging, interactive
format of social media
Overview
The Brief (self-directed)
In today’s climate, it is often difficult to access reliable data (World Bank Group, 2021). With the rise of social media, many people are turning away from traditional news sources (e.g. direct news websites and apps), in favour of short-form content. Platforms such as TikTok and Instagram are catering to our shrinking attention spans (Newman, 2023), however we cannot be certain that the information being told is fact, or just an opinion. To address these issues, I set out to create an app that has the credibility of traditional journalism, but the engagement of social media.
The Solution
My final solution was ‘Vizzy’; A social-media-inspired app that transforms traditional long-form articles into bite-sized, interactive data visualisations. In order to combat ‘fake news’, all sources within the app are clearly certified, allowing users to quickly identify trustworthy content. By taking inspiration from familiar social-media formats, ‘Vizzy’ encourages data engagement - creating a more well informed society.
Overview
The Brief (self-directed)
It’s becoming harder to find trustworthy information online these days.
Many people are moving away from traditional news sources and turning to platforms like TikTok and Instagram for updates.
These platforms are great for quick, engaging content, but it’s not always clear if what’s being shared is accurate or just someone’s opinion.
I wanted to create an app that blends the reliability of traditional journalism with the engaging, accessible format of social media.
The Solution
I created Vizzy — a social-media-inspired app that turns long-form articles into short, interactive data visualisations.
To tackle misinformation, every source on the app is clearly verified, so users know what they can trust.
By using familiar social media formats, Vizzy makes it easier (and more enjoyable) for people to engage with reliable data.
The goal is simple: help users stay informed without the overwhelm.
(Built for mobile)
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.
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.
View in Miro
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.
Human-Centered 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
Human-Centered 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.
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.
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
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.
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
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.
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
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.
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.
User Tests
Wireframes
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.
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.
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.
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
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.
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.
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.
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.
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.
Get in touch
Copyright © 2025 Liv Johnson UX Design
Copyright © 2025 Liv Johnson UX Design
Get in touch
Copyright © 2025 Liv Johnson UX Design