Storyline

Role

Product & UI design

Timeline

2019 - 2020

Team

  • Consulting
  • Product
  • Design
  • Engineering

Skills

  • Product & UI design
  • Information architecture for research workflows
  • Responsive web and mobile layouts
  • Design system patterns (navigation, tables, cards, tabs)
  • Frontend implementation

Outcomes

  • Web platform for qualitative programs (e.g. Voice of the Student) with diagram, quotes, and insights workflows
  • Consistent Storyline visual language from global nav through dense research tables and persona canvases
  • Mobile companion flow from sign-in through projects, chapters, quotes, and insights
  • Artifacts that bridge workshop walls, printed cards, and production UI for client teams

Storyline helps organizations find the right problems before they over-invest in the wrong ones—grounding strategy in customer voice, editorial discipline, and frameworks like Narrative Architecture™. The work that happens in facilitated sessions and on workshop walls still has to live somewhere after the room clears: researchers need a durable system to organize interviews, affinity notes, quotes, and the story they will take back to leadership.

I partnered with Storyline on the product side of that promise: a web-and-mobile workspace where programs such as Voice of the Student (for partners like College for America and Southern New Hampshire University) could move from sticky notes and printed persona cards into a single, navigable system. The interface had to respect how qualitative teams actually work—chapters and headings, Facts and Feelings, participant context, and insights that stay legible when the dataset grows.

Workshop with participants around walls covered in story cards
Facilitated sessions at scale—teams externalizing narrative maps and card-based synthesis before anything ships as software.

From physical synthesis to software

Storyline’s on-site process produces serious surface area: walls of cards, typed personas, and facilitated alignment. The product job was to carry that fidelity forward without turning the app into a generic project tracker. Screens needed to feel like the same brand clients already trusted—red primary chrome, disciplined typography, and moments (like persona posters and quote cards) that could stand up in a stakeholder readout, not only in a database grid.

Research wall with persona cards and sticky notes beside mobile UI storyboards
Wall-scale affinity work next to phone-scale storyboards—the same program expressed as physical evidence and as a proposed mobile flow.
Stacks of printed persona cards on a table
Printed persona cards—research distilled into tangible artifacts stakeholders can hold, then mirrored in digital poster views.

What I focused on

Research IA — project hierarchy, diagram chapters, tab model (Diagram, Quotes, Participants, Demographics, Insights), and flows that mirror how teams move from raw voice to structured themes.

Storyline web app Diagram view with chapters, headings, Facts and Feelings
Diagram view: chapters and headings as a grid of Facts and Feelings—matching how teams structure affinity output before it becomes a slide deck.

Dense editorial UI — tables, filters, row actions, and category tags (e.g. Feeling vs Fact) that stay scannable at scale.

Storyline Quotes tab with participant rows and Feeling and Fact tags
Quotes workspace: participant context, Feeling/Fact tags, search, and row-level actions for teams curating large interview sets.

Persona and quote surfaces — layouts that privilege the pull-quote and portrait as hero content, with metadata and tags supporting—not competing with—the narrative.

Storyline persona canvas with portrait, attributes, and highlighted quote
Persona canvas: poster-like composition so a single voice reads clearly in a leadership review, not only as a database row.

Mobile companion — end-to-end flow from sign-in through project pickers, chapter navigation, quote feeds, and insight lists aligned with the web mental model.

Design system and build — reusable patterns for headers, tabs, cards, and actions so new client programs did not reinvent chrome; close collaboration with engineering for faithful, performant delivery.

Storyline project view with global navigation and tabbed project workspace
Project shell: global red header, breadcrumbs, and tabbed research workspace—the same chrome and spacing vocabulary reused across views.

Outcome

The platform gives Storyline and their client teams a single home for voice-led work: the same rigor that shows up on the wall can be revisited, edited, printed, and shared as the engagement evolves. Diagram structure, quote libraries, and persona storytelling stay connected—so “customer truth” is not a one-off deck but an operational layer teams can return to when priorities shift.