01. Content Inventory

Before building the design system, I went through all of the Figma design files to create a content inventory. This consisted of pulling different component styles, including text, button, link, and icon styles, found throughout the app and moving them to a single page with notes about the functionality and uses of each.

By doing this, I was able to discover what styles were conflicting with one another, which styles needed to be addressed for accessibility, and the differing functions for each component. This process helped me to learn the app better and familiarize myself with the design language - it also created a perfect foundation for creating the design system.

02. Typography

Due to the small nature of the company and the probably of hiring someone new soon, I wanted to ensure that onboarding employees could easily review the typographic hierarchy and uses in the app. This allowed for an easier onboarding process for new marketing, design, and front-end employees.

Typographic Scale for TableRaven web application in Figma

03. Buttons, Links, Selectors

Buttons

I used a Figma plugin, Propstar, to label the different component instances. Because the padding is different from the primary button with text, to the primary button with the solo icon, I created separate components to allow developers easy reference.

Buttons components displaying variations in Figma using Propstar Figma plugin

Links

I used the design system as the component library. Because the secondary link only had the addition of a "+" symbol, I did not create a new component but instead referenced what the secondary link should look like.

Link components displaying variations in Figma using Propstar Figma plugin

Selectors

Each selector had different functionality which was communicated through the various styles. The choice selectors are secondary choices the user made, using the circle to communicate that unlike the checkbox, a user cannot interact with it; the checkbox uses the typical ui pattern for a checkbox and allows users to select multiple options, the toggle is used to show or hide information, while the radio button signifies the user can only make one selection from multiple options.

Selector components displaying variations in Figma using Propstar Figma plugin

04. Input Fields

Text Fields

When there's a small amount of information, such as assigning a name to a Session or changing Character name, the open text-field is used. However, when there is the possibility for longer text, such as a user listing their inventory on the Character Page, it's a closed text field.

Text Field components displaying variations in Figma using Propstar Figma plugin

Number Fields

To ensure a seamless user experience, we wanted to auto-calculate as much of the character statistics on the Character Page that we could. this led to different variations of the number input field, one in which the user could clearly edit, as well as disabled fields and total amount fields.

Number Field components displaying variations in Figma using Propstar Figma plugin

Dropdown Menu

Dropdown Menu components displaying variations in Figma using Propstar Figma plugin

05. Iconography

Part of my role as product designer was to design the iconographic language for the entire app. This mean determining icon style, stroke weight, and designing custom icons where necessary. As a Tabletop Roleplaying Game Assistant, there weren't many universal icons we could use, as the challenge was to represent races, classes, and ages while being as inclusive as possible. While some icons were retrieved from IconScout, I designed custom icons to represent age and race to put inclusivity at the forefront of the process.

Icon Library

Below is an image of all of the icons used throughout the application, made into components using Figma.

Icon components displaying variations in Figma using Propstar Figma plugin

Custom Icons

One of the challenges was finding icons that were inclusive but still represented what we wanted such as ages and races. There are four different ages that are represented: young, middle-age, old, and venerable.

Custom Icons created in Adobe Illustrator then optimized and made into components using Figma

06. Colors

As the company and product grow, we continue to add more valuable information such as pricing and a blog page. As I design new features, I will create new mockups previewing the new feature, such as Custom Spells or Inventory on the Character Page, to demonstrate the benefits. One skill I would like to work on based on my experience with this project is my front-end development skills and gaining a better understanding of HTML, CSS, and JavaScript to better communicate with developers.

Branding and app colors for TableRaven

06. Cards

As the company and product grow, we continue to add more valuable information such as pricing and a blog page. As I design new features, I will create new mockups previewing the new feature, such as Custom Spells or Inventory on the Character Page, to demonstrate the benefits. One skill I would like to work on based on my experience with this project is my front-end development skills and gaining a better understanding of HTML, CSS, and JavaScript to better communicate with developers.

Cards displaying different states in Figma using Propstar plugin