top of page

 

Overview

​

In early 2022 I began unifying my company's mobile and desktop UIs and applying a rebrand to accompany a new marketing campaign.  This was a months-long effort, full of research, testing, design, Figma, writing, documenting, and more.  It was an enormous effort.

​

Sadly, staff reductions in 2023 meant I was not able to see the effort cross the finish line.  

​

 

Role​

​

  • Team Lead

  • Lead Designer

  • User Research

  • Prototyping

  • Testing

  • Documentation

​

​

This project draws extensively from my experience at Unifocus, where I:

​

  • Implemented a formal, concrete design process, based on industry best-practices.  This allowed the team to scale as the workload grew, and facilitated a seamless transition into remote work once that became a necessity.

  • Improved usability and customer satisfaction.  An established program of user testing helped nail down major usability issues, and the creation of a continuous customer feedback loop helped find and fix usability problems.

  • Created a component library.  This helped the developers and designers stay in sync during the design handoff and ensure a smooth transition into the development phase.

  • Established a comprehensive design language.  This included full component support in Figma for designers, and complete documentation for the theme, all major usage patterns, and best practices.  Doing this helped with design consistency and turnaround times as well.

​

​

What I Produced

​

Figma Components for Designers to Use

After all the research and testing, I produced a Figma document that contained the master components for our designers to use.  You can see one of my more complex examples below.

​

The specific document below contains all the components required to render a complex Data Grid.

​

​

Figma Examples for Designers to Copy and Reference

​

While creating screenshots for the documentation, I realized it would be useful for my designers if they could copy/paste canonical versions of our components.  This helped speed up the creation of prototypes, and also helped socialize the new design language more quickly.​

​

You can see a page of DataGrid examples, created from the components shown in the document above.

These examples used Figma best practices, and were quite robust when used in project design files.  

​

Grid Example 19 - Context Menu.png
Grid Example 16 - Row Validation & Saving.png
Grid Example 15 - Pagination.png
Grid Example 7 - Selected Row.png

​

Extensive Documentation, with screenshots

​

Below, you can see an export of one of the documents I created for the component library and design system.

This document was for the Data Grid, which you have seen above.

​

You can view an example below:

​

UFGrid_Documentation.png

​

API Documentation

​

My team also developed extensive API documentation for our developers, to ensure consistent use, and to capture best practices.  We used Storybook.js.

62ef0db617fa636277a02588_Screenshot 2022-08-04 171249.png

 

Prototype & Breakpoints

​

These prototypes are examples of what our apps look like using the component library I designed.  Additionally, the prototypes show the responsiveness rules for each breakpoint for our design system.

​

Click on each version in the sidebar below to view variants for large-screen desktops, to tablets, to weird, wacky form factors, down to a small mobile device.  

​

These prototypes use a concept from iOS called "Size Classes" which help facilitate the creation (and management) of different responsive variants for each breakpoint.

​

bottom of page