Component Library Flagship

Component Library Flagship

StoryForge is a platform that publishes writers through peer-review. Users can write, read, comment, and connect with others. For the majority of my time at StoryForge, I was the only UX/UI designer working with a team of developers to improve usability and visual consistency.


I pitched a creating component library to the leadership and development teams as a way of increasing speed to deployment and visual consistency. They accepted, and I ended up designing over 30 components which are now live on the site.

(Note: I did not design the marketing website. I only worked on the platform, which requires creating an account and signing in)

Company

StoryForge

My Role

Lead Designer

Type

Component Library, Startup

01 StoryForge Alpha

When I started at StoryForge, they had just released their MVP website. They hired me to bring them to next level (Beta 2.0). I started with an audit of the website, and then a systematic redesign of the information architecture and key flows.

When I started at StoryForge, they had just released their MVP website. They hired me to bring them to next level (Beta 2.0). I started with an audit of the website, and then a systematic redesign of the information architecture and key flows.

02 My Process

When starting a new feature, I started by gathering requirements from my team members, conducting user research if resources allowed, conducting competitive analyses, and ideating.

When starting a new feature, I started by gathering requirements from my team members, conducting user research if resources allowed, conducting competitive analyses, and ideating.

Quill shop ideation

Quill shop ideation

Profile avatar settings ideation

03 Component Library

As I worked on more and more screens, the need for a source of truth became apparent. I then began work on a standardized design system, complete with colors, tokens, and components.

As I worked on more and more screens, the need for a source of truth became apparent. I then began work on a standardized design system, complete with colors, tokens, and components.

Category and subcategory component annotations

Category and subcategory component annotations

Navigation component annotations

Navigation component annotations

Progress bar component annotations (light mode and dark mode)

Progress bar component annotations (light mode and dark mode)

Comment component structure and functionality

Comment component structure and functionality

04 Component Application

It was not a linear process. As I worked on new designs, the need for new components I had not yet built would arise. Over time, the platform became more and more consistent as it was built with the reusable pieces.

It was not a linear process. As I worked on new designs, the need for new components I had not yet built would arise. Over time, the platform became more and more consistent as it was built with the reusable pieces.

Mobile designs for story management

Mobile designs for story management

Shop redesign mockups

Shop redesign mockups

005 In production

Below are screen recordings of a few components in action! In all of these examples, I designed the components and the full page.

Below are screen recordings of a few components in action! In all of these examples, I designed the components and the full page.

Adding and replying to comments

Adding and replying to comments

Managing chapters in a story

Managing chapters in a story

Creating a new story planning sheet

Creating a new story planning sheet

Overview

Overview