Headlines aren't enough.
Businesses do not face long-term consequences.
Attention spans fade, the news cycle churns, and PR firms expertly craft superficial conclusions: majority of the time, no meaningful change is left in the wake of an exposé.
Our channels of information encourage shallow, short-term responses, not accountability. Backlash is quickly buried. Intentionally or unintentionally, this is by design.
How do we craft an alternative?
The passion and comprehensiveness of online activism in 2020 was outstanding. Without a central authority behind the flood of educational content, it us a powerful testament to many's desire to learn, share, and do the right thing.
While not a perfect movement, it made clear that community responses to crisis have the potential to create high-quality, enduring digital resources.
The Idea.
Inspired by the decentralized nature of online educational activism, I propose a permanent record for corporate misconduct.
A community-powered living archive that aggregates documentation of misbehavior to promote long-term culpability, facilitate transparency, and monitor systemic change.
An architecture for change.
Frontend + Backend Design
I drew from the visual language of social media activism, fact sheets / nutrition facts, and NGOs to create a urgent, adaptable, and concise visual language.
Structurally, there are two main components:A brand - The consumer-facing identity of an organization.
A report - A distinct event or pattern of misconduct.
This raised the question of scope. What counts as misconduct? What scale of misbehavior is relevant? What about words without action?
I surveyed headlines and activist resources to try to find the common qualities of misconduct and found three themes: human rights abuse, political abuse, and anti-consumer practices. I liked these themes because they are emotionally resonant and issue-encompassing by consequence.
Example: Oil company lies about climate change. Instead of arguing a political stance, this category system would emphasize the measurable consequences of this action: misinformed consumers.
This structure intentionally excludes: individual people, controversial statements / marketing, and all 'socially-conscious' PR strategies (e.g. donations, pledges, mission statements).
Initial mockups of web pages and structure.
(Feedback: needs hierarchy, call to action, and )
Current (working) brand identity and visual language.
Example: Adaptable for social media presence.
A platform that relies so much user content needs an extremely scalable and feature-rich backend that can support abuse detection, moderation, version-control, user authorization, and complex parsing functions. Luckily, MediaWiki (the software that powers Wikipedia) is open-source, well-documented, and can do all this and more.
However, building an adapted front-end inside of MediaWiki would be unnecessarily complicated. Instead, I decided to learn React + Next.js to build a front-end server specifically to support the Accountable Brand structure, pulling content from the MediaWiki network and (potentially) beyond.
The current state.
I completed a prototype of Accountable Brands:
the full-stack web application with architecture as mapped above, hosted through Google Cloud Run and a Digital Ocean VM.
Search by brand
ElasticSearch indexes brand names, products, industries, and headlines. The search bar is the primary method of navigation, facilitating brand-based browsing.
Open-source brand pages
Rich formatted metadata, visuals, and a freeform summary contextualize each brand.
Open-source report pages
Linked to a brand, reports are the primary content of the platform. They are structured to be easily digestible articles that refer users to further reading.
Public editing/creation
( Mirrored )
For now, editing happens on the native MediaWiki interface, which comes with many built-in tools and security measures.
Citation generation
( Mirrored )
One of these tools is an integrated citation management tool that can query the internet and academic databases.
Mandatory peer-review
( Mirrored )
Before edits appear on the public wiki page and the main site, they must be reviewed and approved by a long-time user.
Page-specific discussions
( Mirrored )
Before edits appear on the public wiki page and the main site, they must be reviewed and approved by a long-time user.
Wikipedia excerpting
To speed up content creation, especially for brand pages, I integrated an inline system that can excerpt Wikipedia pages and their sources in real-time.
I expect this to be a permanent feature because timely, reliable, Creative Commons data is a cornerstone of the platform.
Dynamically-generated icons
In pursuit of a visually dynamic, engaging interface I created an automatic icon system that finds material icons to represent a company's offerings.
I also built a robust control panel for administrators to review, ignore, and reassign icon requests.
Tools Used
This was the largest project I've ever completed. Learning both front and backend development all at once was challenging and rewarding. While I have worked my way up most of the learning curves, there is still plenty to rework and optimize.
Figma
Designing the brand identity and HiFI prototypes.
Illustrator
Creating custom material-style icons.
Git
Version control of both submodules of the project.
Docker
Cluster and image management for MediaWiki servers.
REST API
Communication in JSON and HTML between servers.
TypeScript
Primary language for the custom frontend server.
React.js
The component-based interface library.
Next.js
Framework for the dynamically-generated interface.
Tailwind CSS
Rapid styling/theming library in conjunction with CSS.
MediaWiki
Robust and extendible full-stack wiki server, used for backend.
ElasticSearch
Scalable search software that handles both servers.
Zotero
Citation management tool, hosted in a dedicated server.
Google Cloud
Automatic Build and Run routines used for the Next.js instance.
Digital Ocean
Hosting a VM with the MediaWiki cluster.
The next steps:
Lessons Learned
This project has taken me from idea to design, to prototype, to service. It took around 3 months to complete, and in that time I was completely immersed in the interdisciplinary process of building digital solutions.
I put this project on pause to search for a job, but I can't wait to continue prepping the brand for release as soon as I can support it. Thanks for reading!