Role
Project Manager
Lead UI Designer
Prototype Designer
Summary
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
How can we design to simplify and streamline the complexities of worker identification and classification?
Goals
Design 0-to-1 of worker and client on-boarding
Build clickable prototype for investor pitch meetings and development
Design style guide and component library for on-going platform development
Deliverables
Task Flows
Wireframes
Visual Design
Clickable Prototypes
Redlined Documents
Tools
Pencil & Paper
Abstract
Sketch
Realtime Board
InVision
Zeplin
Approach
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
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.
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.
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.
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. In an ideal world, the mobile experience would be broken into additional screens to avoid long, tedious scrolling and form fatigue.
Initial design closely mirrors the web application layout but deviates significantly in the design of the progress stepper and navigation.
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.
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
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.
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.
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.
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.