Cole Lawrence

Currently building Phosphor and Forethink, I design, test, and guide the implementation of end-user programming and collaboration tools.

Phosphor

2023-12 Founding Chief Technology Officer through present

Rethinking Project Development

Phosphor uses technology to identify, develop and finance opportunities early in complex markets: clean energy, real estate, and infrastructure. We focus specifically on the pre-financing phase to improve decision-making.

See the Phosphor landing page

Forethink

2023-11 Chief Technology Officer through present

advanced Privacy-First Personal AI Tool

AI architecture, tooling, and evolution of a browser extension integrated into hedge funds with high confidentiality needs. All data is stored and processed on the user's device. Our servers are completely stateless/zero-retention.

See the Forethink.ai landing page

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Story.ai

2021-01 Head of Product through 2022-01
2020-03 Full-time Product Owner
2020-01 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.

See the Story.ai landing page

Artprompt

2022-08 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.