John Hatley | Product and UX Designer | Portfolio

Basics

Year:

2019

Tools Used:

Figma, Google Material

Role:

UX/UI Design

About

Business Goal:

Present a best-in-class suite of applications.

Tasks:

Deliver an appealing and complete set of controls and standards that would be leveraged moving forward.

My Role:

My role was to lead the process and deliver the standards.

User Research

Interviews and Observations:

2 Groups of 5 - Existing Users/Free Agents

Existing Users:

Experience with the Windows application ranged from 1 to 12 years.

Free Agents:

DBA's, Developers and Generalists with 1-8 years of DB experience.

Findings & Collateral

Most Important Data:

Users identified several areas in the existing interface that were either confusing or missing:

inconsistent controls
vast color palette
poor information architecture
differently styled interfaces between applications

These issues are common with legacy windows applications, especially when coupled with applications that were acquired and made to be a part of the portfolio of offerings.

Prior to design:

In addition to the user input, I leaned on a few other information sources to help provide a complete picture prior to designing:

product backlog of bugs/enhancements
engineering and architecture team members to best identify limitations and performance considerations
competitor's offerings

Solution

As design team lead, supporting 5 scrum teams located in Ireland, NC and Florida I decided to leverage a proven design system that would allow me to provide quick turnaround and keep the teams moving. I chose Google Material as the baseline, modified the styling and augmented only when absolutely necessary.
I began by taking inventory of the existing styles, control groups and interaction patterns and then moved into a period of review to determine which components to carry forward and what to improve upon. During that phase we also completed the following:

Established an engineering lead to help with the reviews and to provide input around feasibility and LOE.
Figma was selected as the application to construct, house and share the design system.
Google Material was selected to serve as the baseline.
Style adjustments and additional controls were generated and iterated upon through a series of design reviews with product managers, engineering leads and stakeholders.
Once settled, the styles and controls were created as components in Figma and as a library in Axure for use in all prototypes.

The Design System v1.0

Alternative View

Conclusion

The selection of Google Material was an overall success, although there were bumps along the way. Not all of the nuanced control sets are covered in Google’s library and some of the UI elements were required to be modified greatly to provide the data density required by stakeholders.
Figma proved to be an exceptional and cost effective tool for our use case and it was adopted as the wireframing solution as a result of this project.

Contact

Have a nice project coming up? Let’s talk about it! Shoot an email to john.hatley@gmail.com