Ria Carmin

Portfolio

Looking at work in UX Engineering and Design Systems

Design Thinking

Finding focus though collaborative exploration.

1

Visual Design

Introducing graphic design rules to UI code.

2

3

Design Systems

Architecting scalable user interfaces.

Timeline

2013

DESIGN THINKING

VISUAL DESIGN

DESIGN SYSTEMS

2018

EquitySim

2020

Hopin

now

2015

FWD.us

Design Thinking

01

Finding focus though collaborative exploration.

Designing for social change.

Objective

Facilitate a creative space for people from different expert areas to identify problem areas and find solutions .

Leading design thinking workshops.

Methodology

Warm up

Explore

Diverge

Converge

Prototype

00

01

02

03

04

resource

Designing for learning.

Metric

What does it take to bring someone to be confident to invest their own money? Time to confidence.

Maximizing impact by finding the path to our users’ success.

Problem

Novice to Pro:
Build skill and confidence.

Deconstructing trading experience for beginners.

Game design and testing. Adding real-time data to the learning.

Bringing everyone in.

Visual Design

02

Breaking barriers of static.

Vertical Rhythm

Creating flow with 8pt vertical rhythm grid

Problem

On the engineering side, vertical rhythm is a lot of math combined with unreliable browser behavior.

Solution

Global reset

Space helper

01

02

calcSpace

02.1

withSpace

02.2

Component

Typography

Color

Mix all the things.

Design Systems

03

Architecting scalable user interfaces.

Process

Audit

Map all the components and where they would fall in the hierarchy.

USAGE

PURPOSE

Ubiquitous

Unique

Broad

Narrow

Form

Content

Attention

Layout

Navigation

…

Stack

Storybook

Figma

React

Documentation

Design kit

Library

Architecture

Symbols

Blocks

Globals

Components

01

02

03

04

Symbols

 — brand primitives.

// Layout
export const MOBILE_MAX = '560px';
export const TABLET_MIN = '561px';
export const TABLET_MAX = '1024px';
export const DESKTOP_MIN = '1025px';


// Colors
export const UTILITY: ColorUtility = {
  WARN: ORANGE.DEFAULT,
  ACTION: THEME.PRIMARY,
  ERROR: RED.DEFAULT,
  SUCCESS: GREEN.DEFAULT,
};

// Line
export const RADIUS = {
  SMALL: RADIUS_SM,
  DEFAULT: RADIUS_MD,
  MEDIUM: RADIUS_MD,
  LARGE: RADIUS_LG,
  XLARGE: RADIUS_XL,
  ROUND: RADIUS_ROUND,
};

Blocks

 — language of the interface.

// isClickable

import { css } from 'styled-components';

export const isClickable = css`
  ${area}

  &:hover {
    background-color: ${({ theme }) =>
      getFromTheme('COLOR.GREY["200"]', theme)};
  }
`;

Globals

 — the canvas.

import { createGlobalStyle } from 'styled-components';

const { body } = TYPOGRAPHY;
const { link } = INTERACTIVE;
const { field, hasErrors } = FORM;

export const GlobalStyles = createGlobalStyle<{ theme: Symbols }>`
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  html {
    margin: 0;
    padding: 0;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    padding: 0;
    ${body}
    color: ${({ theme }) => getFromTheme('COLOR.GREY.DARK', theme)};
  }
`

Components

 — collection of patterns.

Standards

themable

i18n / l10n support

a11y

Current State

> 70 components and helpers

~80% adoption

used in various setups

governance system that supports ~100 member team

The end.

Made with Slides.com