Contexto is for people writing together. The app helps you ask collaborators quick questions about specific document passages, in context and real time.
Technical writing frequently involves numerous collaborators. A technical writer must compile and organize information sourced from subject-matter experts before analyzing it, developing a style guide, and formulating a content strategy. Only then does the writing begin.
During the writing process, technical writers (and editors, and lead authors) frequently encounter hurdles in the form of unclear, misleading, or missing information. They must consult with subject-matter experts, co-authors, or other colleagues to resolve these issues.
This consultation often happens in the margins of drafts, in comments pointing to specific passages of text. But sometimes, in the interest of reducing the number of document exchanges and draft versions, or to clear up persistent confusion, it happens in person, over the the phone, or through email.
Being able to reference and point to specific passages of text makes meeting in person or communicating through email preferable to resolving document-related issues over the phone.
However, meeting in person isn’t always possible or convenient. And while email has the advantage of being convenient, unobtrusive, and suited to quoting text, if replying requires modifying or referencing a large attachment, response time may be delayed until the recipient has desktop rather than mobile access. Document consultation emails without attachments run the risk of miscommunicating because they address textual issues in isolation from the source document.
Additionally, owing to their closeness to the subject matter, experts can initially be blind to their own logical fallacies, inconsistencies, incomplete explanations, jargon, and disorganization. Sometimes, it takes a bit of back-and-forth before an expert grasps the question a technical writer, editor, or lead author is asking.
Using email for this back-and-forth can be clumsy and less than expedient. Chatting in real time over instant messaging provides a more dynamic, adaptable, efficient experience.
However, quoting paragraph-length passages and using highlighting, arrows, underlining, or other markers to draw attention to certain parts of a text is difficult in many instant messaging systems.
Also, instant messaging platforms tend to cater to discussion at the project level rather than the document level, so it’s easy for chats to go off-topic and veer into matters only tangentially related to a particular document. This makes it difficult to keep track of previous discussions related to a certain document in an organized and easy-to-navigate way.
Imagine there were an app that:
- Helped writers and editors of technical content consult subject-matter experts discreetly and in real time
- Provided adequate context and editorial markup to elucidate document-related queries
- Kept discussions on track and easily findable by grouping them according to document
I used mind mapping and affinity diagramming to deconstruct these insights into concepts and discover their interrelationships.
Here, I'm brainstorming off of a concept using mind mapping. Concentrating on concepts and associations rather than logical branches.
Adding to and prioritizing the mind map. First pass in yellow; second pass in blue. Associative word play on the sticky note.
Sorting it out: What is Contexto?
Once I was able to succinctly articulate a concept for the app, it was time to figure out a name. I trolled the Oxford English Dictionary, online thesauri, Wikipedia, style guides, glossaries of language and writing terminology, Google search results, and topical articles, recording words I found that related to the concept. I also noted any associated words that sprang to mind in the process. I started to extrapolate these words into word mark concepts.
I settled on the word “contexto”, because its Spanish meaning (con meaning “with” and texto meaning “text”) summarizes the way the app facilitates chatting about a draft document with text quotations to provide context. Before switching to digital tools to further develop my word mark ideas, I paused and created a mood board to give myself creative direction.
Here, I'm brainstorming and iterating on app names and visual concepts for the word mark.
Mood: marginalia and proofreader's marks.
Iterating on word mark concepts in the digital environment, experimenting with dots and lines, slashes, serif versus sans-serif, and focusing on "o" and "e".
I wanted a word mark that was simple, elegant, bookish, and highly readable—it would be representing an app for writers and editors, after all—and found it in one of my last iterations. It is rendered in Linotype Times Bold. In this font, unlike Times Regular, the counter of the lowercase “o” normally features a vertical axis. To embody the idea of movement as a way of referencing the app’s functionality of moving a draft forward by expediting communication, I echoed Times Regular and imposed an exaggerated humanist axis on the “o” counter in Times Bold. The distinctive orange-red colour refers to the red ink of a proofreader’s marks.
I also needed to establish a colour scheme with enough options that it could be used to distinguish between different chat participants or different documents.
It was time to create the app itself. I set out to create a site map that would serve as the foundation for my wireframes and prototypes.
First, I revisited the use context for Contexto.
Contexto connects collaborating parties.
Next, I created a flow diagram, modeling how the app would facilitate dialogue between the two parties represented in the use context diagram shown previously.
The flow diagram shows a typical Contexto flow initiated by a lead author, editor, or technical writer.
When creating wireframes for previous projects, I noticed the task led me to devote too much attention to the layout of the interface too early on. Therefore, for this project, I intentionally kept this stage of the process very low fidelity, forcing myself to consider the features themselves, and not their placement as elements on the interface. Only after I had decided on which features to include on which screens did I begin drawing visual prototypes.
Moving from conceptual wireframes to visual prototypes for one series of screens in Contexto.
I practiced rapid prototyping, testing my paper prototypes with users to gather insights, iterating based on what I learned through testing, re-testing, and iterating again many times.
User testing, and recording feedback and insights from user testing.
I decided to move to digital tools (Adobe Illustrator) to create more precise prototypes. However, at this stage I found myself replicating my paper prototypes exactly, which wasn’t helping to push my design forward, so I returned to paper.
Back to paper. Working through a specific design problem identified through user testing.
Left: Prototypes in a working flow. Right: Reviewing successive iterations; previous drafts of each screen are pushed toward the top of the table.
Continuing to iterate and test successively, I returned to the digital environment, but with a different tool. This time, I used Sketch to create hi-fi mockups.
Increasing prototype fidelity in Sketch.
Here too, I lowered the fidelity to devote more intention to making decisions affecting the app’s flow. Is a back button necessary, or could swiping be used instead? Should it be a “back” button or a “home” button?
User testing my prototypes revealed conflicting desires. Some users wanted a split screen to see the quote while typing a comment, but others wanted more room either when marking up the quote or commenting on it.
A complete walkthrough of Contexto. This sequence shows how a new user and document lead (e.g., lead author, editor, or technical writer) enters the app and sends their first chat.
Contexto is still a work in progress. For my next steps, I plan to:
- User test my wireframes using Invision, targeting technical writers and editors in my network and conducting remote testing.
- Iterate based on insights gained through user testing.
- Create high-fidelity mockups and animations simulating Contexto in action.
gLike
Contexto, a Mobile App Case Study
I've worked as a writer and editor on projects including technical documentation, policy, academic papers, books, blog posts, articles, user manuals, grant proposals and reports, radio ads, research briefs, white papers, and marketing copy.
On many of these projects, I started out as a newcomer to the content area. Out of necessity, I developed an expertise in sourcing the information I need to do my job well—knowing where to go, who to turn to, and when to do so.
When I was assigned the topic of 'technical writing' for my Mobile App Design class, I knew I wanted to explore the person-to-person interaction that occurs between a communication specialist and subject area experts. It's a critical aspect of the job, but one that often gets overlooked. Contexto is the result of these explorations.
I completed this project solo as a student at Emily Carr University of Art and Design, and was solely responsible for concept, branding, information architecture, and UX design.
