Quietly Story & Analytics

Quietly provides a powerful suite of tools for editors to collaborate with writers and produce content for brands and publishers. For over 2 years, I designed, coded and shipped major features for Quietly's web application.

Story Editor

A focused authoring experience for our editors and writers

The story editor in its zero-data state.

Problem: For a long time, our in-house editors used Google Docs to work with our external writers. We needed to build a new writing platform that supports our specific workflows, talks with our existing content management infrastructure, and lets us deliver semantic HTML output to our clients.

Inspired by the distraction-free approach from writing platforms like Medium, Svbtle and Maptia, I designed a focused writing interface that integrates with our existing editorial management tools.

Early mockups done in Sketch.

Despite the complexity of the project, we decided to iterate quickly and experiment with different front-end libraries to build the minimum viable product. After coding a prototype version, I led several usability tests with our editors and writers over the course of two weeks.

Validating usability

To validate the usability, I led several test sessions with our internal and external writers using the flexible method. After testing with half the participants, we've identified about a dozen issues. Then, I tweaked the UI of the prototype and squashed any noticeable bugs before testing with the remaining participants. What we saw was a significantly lower error rate than before without spending too much time switching between development and QA.

Based on feedback and because of the minimal UI, I designed a simple pop-up to let the user be aware of the essential features of the editor.
Direct communication between the writer and editor removes the pain point of chasing down emails and conversations.
Our editors can easily deliver semantic HTML version of the content to the client, who can then insert it into their CMS.

Outcome

The end product is a versatile editing environment tailored to the needs of our editors and writers. For me, the learning moment of this project was to understand the value of iterating quickly and testing early and often. With real user validation and feedback, we were more confident with the stability and usability of product before we pushed it live.

Analytics Dashboard

Empowering our analysts

Problem: Our internal analysts needed a dedicated tool to visualize all the custom content performance data we've been collecting in order to generate insights for our clients.

Understanding the context

Keeping modularity and scalability in mind, I studied well-known analytics platforms like Google Analytics and Mixpanel to learn how they structure the display of large data sets. Although I've considered the use of graphs and other visualizations, after talking with our analysts, we concluded that tables let them see patterns better.

They also mentioned how they tend to compare metrics to the content average to analyze the performance of individual elements. Therefore I included the relative difference in percentage below each metric value to help analysts quickly spot anomalies in content performance.

Analytics for a Quietly embeddable widget content. Each metric value has an indicator below that shows the relative difference to the content average.

Improving glancability

For long-form stories, our tracker had the ability to collect data at a more granular level. I explored several ways to display this information so that the viewer can gauge the performance at a glance.

Earlier iterations of the story analytics.
Final iteration that features color-coded overlays to show performance at the content level.

Outcome

Overall, it was a fun and challenging project to build from end-to-end. I was able to learn a lot about how our analysts work to inform my design decisions. This project sets the foundation for a powerful set of tools that let our team work smarter in how we deliver content strategy to our clients.

Other Projects

Front-end Automation

Configured the Grunt build script for our web application to generate font icons, bundle the JavaScripts using Browserify, run unit tests using Karma and compile our SASS files. My font icon generation method is documented in this Medium post.

WordPress Plugin

Wrote and maintained a WordPress plugin in PHP and JavaScript. The plugin simplifies the way publishers can insert content created on the Quietly platform into their WordPress posts.

Newsletter Design

Created a custom-coded template for our monthly newsletter on MailChimp. A rule of thumb I learned was to keep the layout table-friendly and code like it's the 1990s.

Compass Listing Recommendations

interaction design

Intensive Care First Aid

freelance brand + web design

Lithium Community

interaction design

Quietly Story & Analytics

design + front-end development

Maker Source

experience design / academic

Food Repurposing Platform

experience design / academic