2023, 10 weeks
Project Brief
This project aimed to develop OriginStory, a browser extension designed to empower news consumers with a deeper understanding of news narratives.
The Problem
The modern news landscape is complex and often fragmented. Consumers struggle to track the evolution of news stories, identify bias, and discern the credibility of information.
The Goal
The goal was to create a user-friendly tool that allows news consumers to explore the relationships between different news sources covering the same story.
Team
This project was done individually.
Tools
Figma Illustrator
The Process
The primary goal of this project was to explore interface patterns and integrate them into a fictional service. Therefore, no extensive user research or real-world testing was conducted.
User Research
Brainstorming
Based on the service description provided by our teacher, I brainstormed potential user needs and benefits. After this session I discussed the result with my teacher and two of my classmates. During this session I also brainstormed around different needs and certain functions the service could have. It also resulted with three simple persona descriptions.
Target Group
In today's fast-paced digital world, keeping up with the evolution of news stories can be challenging. OriginStory is designed for anyone who consumes news online, making it easier to explore different perspectives and connections between sources.
While the primary audience is everyday news readers, the tool is equally valuable for journalists, researchers, and fact-checkers who seek a deeper understanding of how narratives develop over time. By ensuring an intuitive and accessible experience, OriginStory caters to users with varying levels of familiarity with news analysis tools—whether you're casually browsing headlines or conducting in-depth research.
Ultimately, OriginStory is built for anyone who wants to think critically about the news they consume, providing a seamless way to navigate and analyze information in an increasingly complex media landscape.
Brainstorming around users along with their needs and features that they would want.
Design
Sketches
I began by sketching a low-fidelity design of the service, which helped me identify key interface patterns. As these patterns emerged, I translated my sketches into wireframes in Figma to better understand the layout and refine the design.
While working on the main page, I also explored different variations of the filter box, experimenting with ways to improve usability. These sketches later evolved into wireframes, as shown below.
A dashboard interface pattern started to emerge.
Different variations on some sort of 'filter section'.
Wireframes
While developing the wireframes, I identified two key interface patterns in my design and focused on expanding them:
- Dashboard ViewThis pattern provides a central hub where users can access key information and features. In OriginStory, this takes the form of a map of interconnected news sources, giving users an overview of how different stories relate to each other.
- Canvas Plus PaletteThis pattern structures the interface with a central workspace (the canvas) and surrounding tools (the palette) for interacting with content. In OriginStory, the map view serves as the canvas, while the filter panel acts as the palette, allowing users to refine their view and focus on specific aspects of the news landscape.
A dashboard and canvas plus palette inspired interface pattern started to emerge.
Interactive prototype
The main page of OriginStory presents users with a clear and structured map view, offering a condensed yet comprehensive overview of key information. This interactive visualization allows users to efficiently navigate interconnected news stories.
Main page / Dashboard
Clicking on a node reveals detailed information about that specific story. Users can also engage with the content by commenting on nodes or upvoting/downvoting others' comments.
The filter button allows users to refine their search, helping them focus on specific aspects or perspectives within a news story.
Enhancing the User Experience
While developing the interactive prototype, I integrated two additional interface patterns to improve usability:
- Animated Transitions
Subtle animations enhance the user experience by providing visual feedback during interactions. In OriginStory, I implemented animations for hover states, selection states, and zooming within the map view, making navigation feel more intuitive and fluid.
- Spinners and Loading Indicators
To ensure users receive clear feedback when the system is processing data, I incorporated spinner animations that appear when applying filters to the map view.
Aestethics
OriginStory’s design draws inspiration from traditional newspapers, incorporating an off-white background reminiscent of aged paper and off-black text to create a minimalistic and highly readable interface. This color palette enhances usability while reinforcing a sense of familiarity and credibility.
These design choices ensure that users can quickly grasp the service, while also conveying a sense of professionalism and efficiency. The aesthetic is intentionally crafted to make the service feel like a seamless extension of the browser’s core functionality, integrating naturally into the user’s workflow.
Logo Design
The "OS" logo features bold, interconnected letterforms, symbolizing the relationship between different news sources. The intentional separation within the letters represents how some sources may drift away from the original narrative—whether through shifts in terminology, framing, or bias—illustrating the evolving nature of news stories.
For a walkthrough of the prototype, please refer to the video at the top of the page.