A web publishing and portfolio platform with a built-in word-processor.

The literary equivalent of Dribbble, Behance, and Cargo Collective.

desktop prototype

00 Introduction

CLIENT — blue—pencil
ROLE — UX | UI designer

TIME frame — 80 hours
budget — shoestring

focus — free cms | digital publication
concentrate — research | word processor

Background

blue-pencil is a non-profit organization whose mission is to foster an all-inclusive space for writers, particularly POC, to build a strong habit of writing, curate a portfolio space, carve out a web presence, and discover peers. Weekly short-form prompts encourage members to explore their voices through a variety of themes. blue-pencil is to be the literary equivalent of NaNoWriMo x Dribbble, Behance, Cargo Collective.

Sunili Govinnage, a former lawyer advocating for human rights issues in the media’s and pop culture’s representation of POC, notes in her article “I read only non-white authors for 12 months. What I learned surprised me.” published by The Guardian in 2015:

“The inherent biases in publishing and book media are real … one study showed that only three out of the 124 authors who appeared on the New York Times’ bestsellers list during 2012 were people of color, and that ‘no African American authors made the Top 10 Bestsellers list in 2012’.”
“To see things from a different perspective, formulaic or not, shows that there's not simply one view of the world, which in itself is a valuable thing.”

Personal Challenge

Being in the publishing industry myself, I am no stranger to the deep-rooted issues of POC misrepresentation by white authors and the underrepresentation of authentic #OwnVoice literature, a hashtag created by young adult author Corinne Duyvis to highlight stories by POC authors who share a marginalized identity with the protagonist. This was an opportunity to hone in on a meaningful real-world problem in social justice for an underserved user base.

Solution

Dribbble, Behance, and Cargo Collective might be all about the visuals, but at the end of the day, designers are still telling stories, not unlike wordless picture books. However, a picture is worth a thousand words, and their creators are able to impact their audience upon sight whereas it’s much harder to maintain reader interest and continual exploration when each experience bears delayed payoff.

The challenge with conceptualizing a literary counterpart lies in creating a visually compelling landing page/browsing experience to showcase the breadth of work as well as a visually engaging reading experience once you click into a piece.

The three big questions to answer are:

How might we create a distraction-free writing space to promote productivity and effectivity?
How might we promote literary portfolios — how might we intrigue writers to consider the visual presentation of their work and ease them into the design process when they’re unfamiliar with and intimidated by the notion of it?
In this golden era of skimming, how might we optimize content for reader accessibility, digestibility, and community engagement?

Defining blue-pencil as publishing platform with a built-in word processor would streamline the writing process for digital optimization and direct dissemination. I made a decision to have selectively-featured word-processor with no plugins, no code, no alternative media types other than plain text, and no document windows (edit more than one document at a time) for a simplified template of limited fonts, text colors, highlighting colors, and aligning options, resulting in a unified website-wide visual theme and brand. It’s important to avoid a steep learning curve that can make accessing, typing, reviewing, and editing a piece for a writer from any technology era difficult.

To address reader digestibility, writer’s block, and provide incentive for rapid and consistent portfolio development, blue-pencil only engages in short-form (1200 character limit) with weekly prompt challenges — a central repository of ideas open to community proposals. Most importantly, short-form lends itself to visual exploration when long-form does not.

01 Research

SECONDAry research | competitive analysis
focus group interviews
analyze findings | prepare proposal

Methodologies

Competitive Analysis: an analysis of competitors.
Focus Group Interviews: an interview guide to gain qualitative insight from various groups of individuals.

Competitive Analysis

I compared a mix of software programs, writing apps, and online word processors to scope the current tools being offered, and referred to Fanfiction.net and AO3 for a close-to-ideal reading and browsing experience. I looked to NaNoWriMo and Reedsy as resources for blue-pencil’s prompt challenge concept.

Key Findings

WRITING

A word processor’s functionalities are important in making the writing process and publication easier i.e. save and export to multiple file types.
Minimalistic, beautiful UI design positively impacts user focus and productivity, but overly minimalistic limits customization ability. An immersive experience is defined by a distraction-free digital working environment i.e. override of desktop notifications.
Dark and “focus” modes lessen strain on the eye, is associated with “entering the zone”.

reading

Too much content and self-tags define low quality, amateur work and discourages reader conversion.
Writers treat platform as a storage warehouse instead of a space to develop new work.
Censorship is a sensitive, controversial topic for writers, but flags should be used to warn for triggering content for readers.
Fewer readers are comfortable with commenting on work, preferring to dish out “kudos” or “likes” instead.

Focus Group Interviews

In one-on-one interviews, I was interested in gathering qualitative data on user experiences with writing and publishing content online, writing habits and rituals, platform and language preferences, reading and writing interests, purposes for using blue-pencil, and priorities for readers and writers. From the challenges and fears observed, I identified two user groups — writers and readers — whose priorities intersected at three common purposes for the blue-pencil platform: quick writing exercises, reading, and peer feedback.

Writers fear judgment of the quality of their work, critique on the authenticity of their experience, offending the reader, identity exposure, and content censorship. A collective struggle in writer’s block is defined by a lack of inspiration, time management troubles, perfectionism, and the inability to complete a project. blue-pencil must prioritize:

Desktop mode optimized for writing process over mobile mode
Prompts to instill inspiration, motivation, and self-accountability
Visibility controls for privacy and feedback

As for readers, blue-pencil must answer their searching, browsing, and reading experience needs and interests in:

A clean, but visually compelling interface
An easy tagging and filtering system
An inclusive space that supports #OwnVoice POC stories

02 Define

provisional archetypes
—
project goals

Provisional Archetypes

Project Goals

While mapping out Business goals x User goals x Technical goals and their intersections, one issue I thought of: whether or not it aligns with blue-pencil’s mission for authors to be exclusively POC. blue-pencil can be branded and positioned as a platform supportive of POC writers, but it is proud to be a non-discriminatory, all-inclusive space. Also, authenticating identities would be difficult to prove in an online environment, so from a functionality perspective, this should not be a mandatory feature.

03 Information Architecture

SITE MAP

Site Map

Before laying out blue-pencil’s architecture, I thought about the pros of an online word processor and its automations for easier content management.

Online Word Processor Pros

SEO Optimization: Title tags and meta descriptions are automatically generated for all pieces.
Formatting and Media Tools: Ability to schedule posts in advance, options for previewing and editing the visual design through panels, not code.
Category, Tag, and Readability Options: Revisions for returning to or recovering past versions, preview and publish are at the very end.
Logically Organized Menu of Features: Simple mouse-click selections makes web designing and publishing accessible to the masses.
Mac and PC Friendly: No versions as an online web-based tool.

Through a site mapping exercise, I explored user journeys in reader’s and writer’s modes, further defining integral vs. nice-to-have word processor features.

Needed Features

File Management: File management capabilities used to create, delete, move, and search pieces.
Optimizations for Web Content/Font Specification: Format content for optimized viewing and distribution across the web, available typefaces and font sizes should be easy to read with bold and italic options.
Cloud-Based: Documents should be automatically backed up and accessible from multiple devices.

Nice-to-Have Features

Goals: Goal-setting to track the progress of each piece in terms of word count and time investment with a visual status indication on a calendar. As GroupVisual.io notes in their “Hooked: Data Visualization & User Motivation” article on Medium, visualizing progress helps with staying motivated.
Social Media Integration: Search engines prioritize sites with good foot traffic from social networking sites.
WYSIWYG: What you see is what you get — the saved pdf version and printed copy of the piece should be similar as appears in the web publication.

04 Design

HI-FI wireframes
—
HI-FI ui designs

High-Fidelity Wireframes

I created high-fidelity wireframes for desktop from my sketch mock-ups. Below are some examples of the word processor feature in full-screen mode.

One area I decided to dedicate attention to was the side panel in the word processor, which showcases two features: My Notepad and Publish. My Notepad encompasses all functionalities the user may need during their writing process such as tagging Keywords, setting Goals, personal Notes, Images for working inspiration, Draft versions, and Export options. Publish encompasses all functionalities the user may need to publish their piece onto the platform such as defining the Short Form Type, Categories & Genres (up to three), Ratings and Warnings, Tags (up to seven), Visibility & Status, Discussion limitations, and Permalink.

High-Fidelity UI Designs

Designing high-fidelity UI screens for desktop, I kept the word processor feature minimalistic in greyscale with a few color accents for CTAs. As users will be working directly on the platform in writing mode for extended periods of time, it’s important to prioritize reducing strain on the eyes i.e. lowering font-to-background contrast with a light grey background, offering a dark mode, and having all font and highlighter combinations pass the WCAG 2.1 Level AAA 7:1 contrast ratio standard.

The publishing panel and reader interaction functionalities are in sans serif, SF Pro Display typeface. However, for the reading cards on the home page, I paired SF Pro Display with Cochin typeface, a serif font, as a nod to books in print. The color bands running across the reading cards are algorithmically randomized, generating a brighter and varied interface to encourage browsing interest.

Branding

When brainstorming for the name, I thought of tools traditionally used in the writing and editing process, stumbling upon the definitions of blue-pencil in my research:

— To edit, especially by shortening or deletion.
— A writing instrument used to remove or change words to improve or make the piece more acceptable.

The idea of this term as a metaphor for marginalized POC communities and conveying the short-form nature of the platform spoke to me.

05 Implementation & Reiteration

HI-FI prototype
—
usability test
analysis of findings
—
priority revisions

High-Fidelity Prototypes

With InVision, I created a high-fidelity interactive prototype for desktop. Give the prototype a play or check out the video run-through below.

desktop video run-through

Usability Testing

The idea was to evaluate decisions made in the UI design, branding, information architecture, and in creating a non-discriminatory, all-inclusive space supportive of POC voices. I also wanted to test the flow from writing to publishing to browsing, and the usefulness and usability of the features below:

Writing — word processor workspace, My Notepad panel
Publishing — Publish panel, preview
Browsing — content, filtering, interactions

Key Questions

Are the flows between writing, publishing, and browsing clear and intuitive to the user?
How successful is the writing space in being distraction-free and in promoting habit-building, productivity, and effectivity?
Are writers interested in and engaged with the visual designing of their piece?
How likely are writers and readers to use blue-pencil over comparable platforms? Do the weekly writing prompts and short-form format appeal to the literary community?
How successful is the word processor in answering writers’ and readers’ respective needs, wants, and concerns? In easing fears, frustrations?
Has the content been optimized for reader accessibility, digestibility, and community engagement?
How do features like the #OwnVoice tag resonate with POC? What is their impression of the blue-pencil brand and platform?

Analysis of Findings

Key Takeaways

While the flows between writing, publishing, and browsing were clear, the “reading” mode vs. “writing” mode were not.
100% of users found the design of the word processor fun and modern. They were open to exploring the features and delighted in seeing the visual design of their reading card to be displayed on the browsing home screen.
Some users found the design of the word processor toolbars time-consuming — they are used to a single traditional bar at top.
Users were split into two camps of feeling comfortable working in the word processor space online: those who were not are due to personal preference of working offline or on a document-based program i.e. Microsoft Word or Google docs.
The visual design abilities and presentation in reading mode reminded some users of the creative designs utilized by indie/small press published poetry/short story books.
POC users felt pleasantly surprised, supported, and valued by the #OwnVoice tag, impressed by blue-pencil’s all-inclusivity mission.

06 Conclusion

Reflection
Next steps

Reflection

Blue-pencil was a complex case to take on because it involved highly technical CMS and word processor systems that have long been matured by competitive products on the market. The challenge of committing to design decisions under time constraints limited the space to consider other solutions and creative proposals. An example of a decision I questioned: Is there a real need for “reading mode” vs. “writing mode”? Perhaps the distinction could be confounding for users and it segregates writing and publishing from the browsing process. Breaking up an experience into smaller chunks may be more digestible, adoptable, and customizable for users, but could also be disruptive to the cohesiveness.

Also, the psychological effects behind a craft and on those who adopt it as their practice is very complex — any craft has their own unspoken rule of conduct followed by their community — in blue-pencil’s case: letting the words speak for themselves. From observing how users interacted with and responded to the website, and the questions asked re: blue-pencil’s purpose, I wondered if we’re truly filling a hole in the publishing industry.

Is the interface design of the word processor encouraging or discouraging writers from exploring the visual design of their piece? Do they feel pushed to “market” their words in a way that is uncondicive and disruptive to their working process? Do they feel as if they’re “selling out” or cheapening the value of their work because there is now another comparatively “frivolous” aspect of evaluation besides the writing chops and storytelling? And the biggest question of the day:

How might we be able to communicate the value of visual design to those who do not traditionally work within this medium?

For any industry we are serving, this is the question we, as designers, need to evaluate ourselves and the work we put out into the world, the standards we must uphold ourselves to to elevate the significance of design.

Next Steps

Mobile-friendly mobilegeddon.
Gallery view.
Languages other than English, but for the English market.
User Safety and Security: Protect individual documents with watermarks, passwords, and encryption.
Co-working and Advanced Editing Capabilities: Comment and markup text, perhaps track changes and time stamps for beta reviewers, group share and discuss edits, and an ongoing list of cumulative edits made to a piece.
Resources: Cloud-based should allow for in-browser consultation to online articles, research, images, graphs, and access to dictionaries and thesauruses.

Ruled Out

Footnotes and cross-reference: Footnote generation is perhaps not unnecessary to cross-reference other sections due to short-form constraints.
Premium: Is a premium feature necessary? What additional services would users pay for that isn’t already provided?
Autocorrect and Spellcheck: Is not inclusive to other languages and can be “othering” for POC.

BLUE-PENCIL Read & Write