Setting standards at a developer docs startup

First hired product designer at ReadMe YC 15', established the design elements and UI libraries within the core ReadMe product, worked on everything from coding small components to designing large features.

Joining a startup and small team

I joined the ReadMe team as the first hired product designer during a phase of growth, watching the team grow from 8 to 40. ReadMe, based in San Francisco, CA, is a documentation startup that allows users to build interactive developer hubs that are easy to customize and maintain. This role was ever-evolving and learning each day; I designed fullscale features, coded smaller components for the front-end, created marketing pages and so much more.

As the first designer at a startup with a small team, you wear multiple hats and gain varying skillsets quickly from the role. I found the development background that I learned allowed me to have a deeper understanding of the functions, data and engineering of products. Each day I collaborated with an innovative, friendly team of engineers, marketers, customer support, etc, and grew immensely from the experience.

Developing UI libraries and building in constraints

With an evergrowing start and multiple engineers building features from the ground up, new design components and styles are being added on the daily. One challenge we faced on the end product design was inconsistencies across button states, font pairings, text treatment, alignment, etc.

To bring consistency and ease for engineering, I partnered with a front-end developer to build out the first UI library and design system for ReadMe. This experience set design standards across the product on a baseline level that multiple collaborators could follow and build the foundation to add more later. Working with engineering, I learned how to consider designing products as building blocks and the perspective of components that come together. Also, developing a baseline level of how data passes from one component or group to another.

The end result was a set of Figma files with linked components and internal UI library engineering could call within a few lines of code. Building a system from the ground up allowed me to understand more of how engineering maintains and builds a product, and how design can work syncretically along in this process.

Quick snapshot from Figma showing foundational components

Bringing a product to life and growing features

During my time at ReadMe, I successfully researched, designed, and help ship endless features to the core product. These include; onboarding flows for new customers, metric dashboards, API reference sections, searching within developer documentation, suggested edits, API setup within local environments, and more can be viewed below. Each new design required learning of specific technical constraints and flows developers would interact.

Scroll through various final snippets below of previous design work below with the ReadMe team.

Tutorials - Build short snippets of code to teach others how to use your API

Tutorials Editor & Preview - Walk through each step of the API line-by-line and set a corresponding line of code

Staging - Merge latest documentation edits into a master version

Upgrade pricing plan screen detailing each plan level

Setup screen for Developer Metrics which starts with an demo call

Documentation Hubs redesign concept for an updated look

Onboarding circa 2019', learn how to get your documentation up and running

Tutorials marketing page used for the launch of the new feature

Learning coding and front-end skills

Each day my work would go beyond Figma and started the journey to relearn basic coding skills. Being at an engineering-focused startup I took the time to understand baseline engineering sprints/workflow and more about code from my coworkers. My first challenge was redesigning and coding the main product pricing page, which can be viewed here

I learned how to set up foundational code for a page, distribute data and CSS to achieve the final look. After a few months of growing my skills, I could achieve a 1:1 visually to my Figma files, and then took on the challenge of learning more about data structure, which can be read through more below.

A chapter of growth

Being the first designer at any startup is a rewarding, fast-paced experience that leads to tremendous growth. I hold endless gratitude and memories for my time at ReadMe, the team will always have a special place in my growth and career journey. I'm looking forward to seeing the product grow and become an industry player in the documentation space.

Results

2 years

learning and growing with an amazing team

50+ Figma files

building an innovative product