Case study · Branding · Visual & Interaction Design
InfoPost: Mobile App and Website
How can UI and visual style convey trust? InfoPost is a startup changing how people experience the news. It gives articles credibility scores and creates AI-generated infographics to make the news clearer and more transparent.
Timeframe
Feb 2019 – Jan 2020
My role
Lead UX Designer
Teammates
- Sarah Ehsan
- Raquel Addessi
Tools
- Figma
- Illustrator
- Photoshop
01
Intro
Background
InfoPost changes the way people experience the news. It gives credibility scores to articles and creates AI-generated infographics that add context, so readers can see how trustworthy a story is at a glance.
Problems
- People consume fake news believing it is real.
- People don’t trust the media in general anymore.
- People must reference multiple sources to affirm facts.
Solutions
- Use an unbiased source to pre-determine whether an article is trustworthy.
- Be transparent about how articles are rated.
- Generate small infographics for context from outside sources.
02
App design
User testing
We ran user testing periodically to keep the app up to date, and to make sure people understood how to use its features and could discover them.
Article cards
- Text competed with photos. Headlines and news-site logos didn’t stand out against the background photos, and long headlines covered too much of the image. We moved the text below the photo.
- The trust score was easy to miss. It was too small to read or even notice. We made it larger and moved the bookmark icon so the score was the only element on the photo.
- Exact numbers didn’t matter. A few percentage points meant little to users. What mattered was whether a rating was high compared to other articles, so we switched from numbers to phrases.
Expanded trust scores
- Hard to read, didn’t look clickable. The icons were inconsistent and hard to read on the blue background, and the score matched the non-clickable outer cards. We moved the score to the middle to make it more prominent, added an “i” for more information, and showed percentages as colored circles for quick reading.
- The “i” caused confusion. Some users thought it was a separate button and weren’t sure what the circled numbers meant. We brought back the dropdown arrow and added a percent sign next to the numbers.
03
Graphics
I experimented with different graphic styles for InfoPost. Here are some examples I created in Adobe Illustrator and Figma.
