News redesigned
for Gen Z

Client

Tag

Service

UX/UI design

Industry

Media/News

A brief

The project involves designing NewsQuest, a news app for young adults that combines trustworthy aggregated news with in-depth,
well-structured long-form content. The focus is on reliability,
fact-checking, and interactive AI-powered features to create a transparent, engaging, and pluralistic reading experience through thoughtful UI/UX and interface design.

From brief to real solution with a structured UX journey

Starting from the brief, the first step was identifying contradictions and uncovering the real needs balancing the end user's perspective with the business and client's goals.

Through a structured process of divergence and convergence, each phase was carefully planned: problem framing, proto-personas, and proto-user journeys laid the foundation, while "How Might We...?" questions guided ideation toward concrete solutions, mapped and prioritized in a user-business matrix.

The goal: transform real problems into targeted, meaningful solutions.

Shaping Structure
& Style

Designing the user flow and wireframes meant mapping every interaction, organizing information architecture, and defining navigation patterns
all driven by one clear goal: simplicity.

From structure, the work shifted to visual exploration. A moodboard research phase purely visual and deliberately open, moved from broad inspiration to a defined visual direction, establishing the first foundations of the UI style: color palette, typography, and initial component design.

Designing
the system

The design system became a fundamental part of the workflow, acting as a shared language between design and development. Rather than being just a collection of components, it established clear rules, interaction patterns, and visual principles that guided every new screen.

By defining reusable elements and consistent behaviors early on, the system streamlined the design process, reduced decision fatigue, and ensured coherence across the entire product. It allowed new features and layouts to be built faster, with confidence and consistency, while maintaining a high standard of usability.

Tone of Voice

The tone of voice reflects the visual direction defined in the style tile: empathetic, friendly, and slightly playful. The language is clear
and encouraging, designed to guide users without overwhelming them.

Microcopy was crafted to feel supportive and human reducing friction, building trust, and turning interactions into small moments of reassurance and positivity.

From wireframes to final experience

Once the visual and system foundations were established, I applied the design language to all remaining wireframed screens, ensuring consistency across layouts and components.

Particular attention was given to transitions between screens and micro-interactions. Animations were designed to be subtle yet meaningful enhancing clarity, reinforcing feedback, and making the overall experience feel fluid and responsive.

This phase transformed static structures into a cohesive, dynamic product experience.

Try the prototype

Curious to see how it feels in action?

Explore the interactive prototype on Figma and experience the app firsthand. Navigate through the flows, test the interactions, and discover how the design system and micro-animations come together to create a seamless and intuitive journey.

Talent Garden 

Let’s talk

Contact:
matteobarchiesi.design@gmail.com

Privacy Policy