1p-logo

" Radley is an incredibly rare and brilliant team member. Across any digital project, he helps bring teams together through the creation of systemic design - including advocacy and education for the users of that system. This means business users, art directors/designers and developers.

" Ultimately, this leads to better teamwork, brand consistency, accelerated development and a more enjoyable working relationship. That's Radley's superpower - creating tools and systems that promote collaboration and reduces friction. "

 David Mayer

Director of Creative Technology at First Person

1P website

In between client projects, I was tasked to work on the agency website. I cleaned up the layout, designed new sections, and managed the design library for it and other internal agency projects.

Homepage 2020 → 2023

1p-project-homepage-examples

Blog page designs

1p-blog-layouts

Custom Figma thumbnails for Case Study files

1p-figma-project-files@2x

Color palette

1p-library-colors-hex

Project pages

Project pages are web-based, responsive slide decks for pitches and social media.

The purpose was to be able to throw together a pitch or promo as easily as a Keynote deck. I created the master Keynote template and Figma blocks with a 1:1 size ratio (1920 x 1200).

I used Figma variants to explore responsiveness. The final solution would be that images and layout scale in direct proportion down to landscape phones. Text didn't scale quite as much, so it could remain legible at all sizes. We created new layouts for vertical phones.

Project pages were based on existing slides

1p-project-pages-grid-example
1p-project-pages-grid-example2
1p-project-pages-text-example
1p-project-pages-text-example2

Keynote template

1p-project-pages-keynote

Block examples. Responsive blocks are separate from production blocks.

1p-project-pages-grids
1p-project-pages-text

Project template

This was created to kick-start client projects. It consists of three shared libraries: Brand & Color, Web Library, and Helper Kit. It also contains layout files for wireframe and production designs. Finally, it has optional files for Assets, Icons, and other use cases.

Example of a First Person designer using the project template

1p-project-template-in-use

Template onboarding

1p-project-template-docs

Starter files

1p-project-template-files

Sticky notes — part of the Helper Kit

1p-project-template-sticky-notes

Narrative blocks & components

We explored various ways to communicate narrative flow and content. The final solution was a small set of components and block templates. This library allowed the narrative team to pivot from Miro to Figma, saving days of work and redundancies. The team created over 2000 blocks for Lookout.

Narrative components and blocks

lookout-narrative-blocks-v2

Email blocks & components

A small library with styles and components specific to emails. It uses the core Brand & Colors shared library, but has text and grid styles specific to email.

Email layouts

1p-email-layouts

Component library

1p-email-components

Selected works

LookoutDesign library & components

First PersonDesign libraries & components

VectraDesign library & components

Omnicell: Figma libraryMigration and ongoing library management

Omnicell: Sketch libraryDesign library, components, & responsive design

ObviousMVP app design

ObviousWireframe design

Starsky RoboticsDesigning a remote driving system for autonomous trucking

IlluminateOnline conference for pharma tech

VMwareInteractive conference presentation

Omnicell kiosksDevelopment & design

Star Wars APIDesign & development exercise

Fitness goals appApp design exercise

Disney Movies AnywhereDesign & development

DayframeDesign & development

HD WidgetsDesign & development

App StatsDesign & development

CloudskipperDesign & development

Flash / FlexDesign & development

Elemental DesignRave flyers

footer-logo
thanks for the visit!  ❤︎
View