Cole Lawrence

I design, test, and guide the implementation of end-user programming tools.

Story.ai

Head of Product
Full-time Product Owner Part-time Product Designer

Text Engine + Editor

UX design, usability testing, and technical architecture for novel NLP Text Engine and type system for a semi-structural textual programming language.
This design was uniquely challenging as at the time of design and throughout the company's life-span, there were no other products that quite achieved this vision of end-user programming.

Internal Dev Tools

While simple on the surface, the combination of a Rich Text Editor plus a Text Engine with grammar correction and value type checking, is actually a huge amount of technical complexity with many moving pieces.
For ease of troubleshooting, we incorporated and designed several dev tools which could be accessed via our central editing UI.

Text Engine entity-component-system components debugger.

URL feature flag customizer allows for personalized editor embeds and demos for presentations to investors and in tech talks.

Rich Text Editor ProseMirror schema and positioning debugger (borrowed from the ProseMirror ecosystem).

Local & Production Deployment Ops

Local developer environment setup and tooling infrastructure.
I believe that everything done locally should be able to mirror production as closely as possible, that is why I invested in putting together a proof of concept local development environment with Tilt.dev + Helm charts. This was the first experience I had with writing helm charts, but I was able to demonstrate how this could work over the course of a weekend. The following week, I worked on documentation and handed-off code ownership to our director of engineering, Will. Will later set up our production deployment infra with Github Actions + GCP using the same templated helm charts as we used in local development.

Tilt.dev Dashboard for both navigating k8s pod logs, locally formatted links, and code generation buttons. This dashboard and the entire platform can be launched locally with a simple tilt up.

Tilt.dev Dashboard code generation buttons will go through Docker images, so dev tooling can all work within Docker containers, allowing us to use more specialized tools that might be harder to use in all operating systems.

Runtime GraphiQL along with pgAdmin, and a PostGraphile playground are hosted as part of the Tilt.dev Dashboard. All these tools are accessible via links in the Dashboard, making it a one-stop shop for managing the codebase and helping contributors find all the services.

Artprompt

Sole Founder

Product Design and MVP Definition

Product design and minimal viable product scoping for an art generation app with an initial focus on in-person demonstration and interactivity.
One thing I love about this product is its simplicity. It's relatively easy to explain and demonstrate, and the technical side is little more than CRUD. So, moving quickly and focusing on a high-quality user experience and a flexible technical implementation is easy. This simplicity has made the product a joy to work on, unlike Story.ai, where it took months to design and implement core functionality due to the number of interconnected moving parts and lack of precedence.

October 2022 MVP

Design Ops

We're using a combination of remotely hosted Figma Tokens, custom TailwindCSS plugins, and the Material Design 3 Color tools to maintain consistent styles and typography between code and design files.
Our tools allow us to experiment quickly with different color palettes and themes between different screens in progress. The typography styles replace the base TailwindCSS text classes with classes of both the font family and font size, so we can precisely control the correct letter spacing programmatically, using a system called Dynamic Metrics. So, an example of a TailwindCSS component in our codebase looks like text-ui-sm instead of text-ui and text-sm

Changing themes and color sets in Figma using code generated Figma Tokens.

The font proof sheet demo lives within the app, so we can quickly see how different metric settings can affect the legibility of our text. Being a part of the app affords us to check our legibility under various themes and with fallback fonts.

Qri

Design Consultant

Qri Cloud Redesign

UX design and communication design for a distributed data host based around IPFS.

Key UX problems:

  • Understanding how IPFS works and why something needs to be installed to your computer in order to participate in accessing and contributing to the shared data hosted on IPFS.
  • Understanding large dataset changes between revisions contributed by users.
  • How to use automation for data normalization and cleaning datasets.

Contributions

  • Discovery around a leaky funnel of new users bouncing off of our highly technical product. This redesign process covered many aspects of the perception of Qri including defining voice and the ideal audience profile.
  • Development and implementation of a new design system and set of visual language components.
  • Understanding large dataset changes between revisions contributed by users.

Parrot

Founder & Engineer

Parrot App

University student founder for a new mobile app to reduce pervasive loneliness on campus.

Key UX problems:

  • Understanding students' comfort levels meeting new people.

Contributions:

  • Coordinated with campus faculty to host several campus events as analog equivalents to features we could digitize.
  • Designed user research surveys to gauge viability and opportunity for go-to-market.
  • Recruited and led volunteer designer, events coordinator, and engineers driven by the problem of loneliness on campus.