GreenLight

Overview

GreenLight is a new web app in the Human Resources and Payroll space. Built from the ground up to help on-board and manage independent workforces.

Challenge

Simplify and streamline the complexities of worker identification and classification.

Build clickable prototype for pitch meetings and development.

Goals

Create 0-to-1 design of worker and client on-boarding.

Design style guide and component library for on-going platform development.


ROLE

Project Manager

Lead UI Designer

Prototype Designer

Deliverables

Task Flows

Wireframes

Visual Design

Clickable Prototypes

Redlined Documents

Tools

Pencil & Paper

Abstract

Sketch

Realtime Board

InVision

Zeplin


Process

I lead a team of designers through a series of two-week design sprints, beginning with competitive analysis and market research through to prototype design and developer handoff. 

As a team, we met with the client on a weekly basis to articulate design direction and manage client expectations regarding deliverables and timeline.

As design moved into the digital realm, we used Sketch and Abstract for version control.

Competitive Analysis and Research

We analyzed numerous competitors and complimentary companies. In doing so, we determined the following to be strong starting points:

  • Organize form fields appropriately (i.e. group by type of information needed)
  • Minimize user input and auto-complete forms and documents where possible
  • Design strong visual hierarchy for CTAs and secondary controls

We spoke extensively with the CEO of GreenLight who has more than 15 years' experience in the field and leaned heavily on the GreenLight team for industry knowledge.

 A handful of the competitors analyzed

A handful of the competitors analyzed


Warning Icon.png

Understanding Risk

Incorrect worker classification poses a huge risk for companies of all sizes. GreenLight's goal is to take on that risk on behalf of its client's and mitigate it as much as possible.

A significant portion of our early analysis, research, and design exploration revolved around gaining a deeper understanding of the risks of misclassification and how to ensure our design addressed the issues.


personas

Research and analysis, as well as extensive client feedback helped us to create personas for the types of clients we would need to on-board and the types of workers we would need to properly classify before they could begin on-boarding.

Personas of potential client and worker types

Task Flows and Information Architecture

The complexities of worker classification demanded we create comprehensive task flows and information architecture. Working through task flows and IA before proceeding with initial designs helped to streamline the design process from lofi to hifi.

Below is the worker on-boarding task flow which shows the journey from an initial email inviting them to register, to completing all paperwork and starting the job.

Worker On-Boarding Task Flow

Design development

Starting with pencil and paper helped us to quickly flesh out numerous design ideas and get feedback from the client and internal teams. Starting from scratch afforded us the opportunity to iterate quickly on feedback, cherrypick elements from competitors, and design to the client's liking.

Early wireframe sketches

Layout exploration

Microframes with user flow


Ui Design

UI was created primarily with Sketch. 

Though we were focused exclusively on designing for web per the client's request, I personally explored possible mobile layouts.

Initial design closely mirrors the web application layout but deviates significantly in the design of the progress stepper and navigation.

Mobile design exploration compared to web


Prototyping

During design, the client was presented with an opportunity to pitch investors so we rapidly created a clickable InVision prototype with mid fidelity assets.

The prototype was later updated with high fidelity assets and handed off to the client as part of our final deliverables.

Branding and Component Library

As lead UI designer, I worked closely with the client during the high fidelity design phase, making adjustments based on client feedback to branding, components, and interaction design. I also interfaced with the client developer team to hand off UI components in Zeplin.

Style and component guide

Developer Handoff

Final deliverables were given to the client in Zeplin and with a Sketch file marked up using Sketch Measure and custom annotations. 

 UI component marked up with Sketch Measure and custom annotations

UI component marked up with Sketch Measure and custom annotations

final thoughts

This project with GreenLight afforded me the opportunity to lead a team of designers and interface with the client team on a regular basis. Managing the end-to-end design for GreenLight's MVP was an invaluable opportunity.

Upon reflection, there are a number of ways I would approach this work differently if I were to take it on now.

  1. Involve the development team earlier in the design process. Having a developers perspective at the table would have helped the team to better understand the code base or framework that they intended to build GreenLight with. 
  2. Conduct a more thorough evaluation of platforms and competitors currently on the market. As a design team, it was well beyond our scope to evaluate GreenLight's business model, but further research may have contributed to the platform finding market fit more smoothly.
  3. Conduct user testing earlier in design process. While the team did seek out critique and feedback, user testing with early mockups, paper prototypes, and mid-fidelity clickable prototypes would have been invaluable in pushing the design past the obvious.

For access to the InVision prototype, please contact me.


Here's some other work to check out: