Good Citizen

I believe in the power of empathy and good design to solve human problems. More specifically, I specialize in user experience design, user interface design, interaction design, and front-end development of digital products (mouthful).

Background

Most recently, I was a UX Design Lead at Galvanize where I spent almost five years designing the HighBond product experience for governance, risk, and compliance professionals. My last year was focused on creating and managing the design system that supports the HighBond user interface.

Beforehand, I led a team of 4 in my design consultancy - Good Citizen - for 15 years, conducting user research interviews, A/B testing concepts, leading design workshops, writing countless proposals, and delivering solutions for a wide range of challenges.

What I'm looking for

I'm seeking a design position that allows me to work on big-picture strategic initiatives while staying balanced with "get my hands dirty" production work. I’d be open to a range of product and UX positions but would probably be best utilized in a senior product designer/UX role.

My recent focus on creating, maintaining, and evangelizing design systems would also make me a candidate for positions within existing DS teams or as a foundational member on a new team.

My working style

I like "just enough" structure, process, and systems. Rather than constrain, I believe they create freedom, effectiveness, and provide teams a safe environment in which they can experiment without consequence. I would consider myself a craftsman focused on accuracy and quality in my work, yet always striving to "find the right amount of perfect".

I like to work with a strategic plan, but will encourage down-to-earth realism and prefer to design interatively to achieve that vision. I will help the team to work more effectively. I have intensive problem-solving capabilities with a common-sense, practical approach.

I am at my best when working closely and truly collaborating with a cross-functional team, flying solo is not my idea of a good time. I love continuous and constructive feedback, even the tough stuff, as it pushes everyone to create their best work.

Personal

Outside the world of design, I am a competitive soccer player, Crossfitter, and rabid Manchester United fan. I have called North Carolina home for my entire life and love exploring all its nooks-n-crannies with my wife Britten and children Brisyn and Saylor Grace.

Work

HighBond Robots

Easily the most challenging, and rewarding, work of my career. Robots was the first net-new product addition to the HighBond platform in over 3 years. It represented a monumental shift in our approach to automating and managing the scripting and analysis of client data — we needed to translate a desktop app experience to a fully cloud-based hosted platform that enabled our customers to automate their entire analytics lifecycle. This meant that numerous core users would be interacting with Galvanize in the cloud for the first time since becoming a customer.

The result was a product that opened new market segments, allowing customers to move from on-premise desktop installed software to a cloud-based serverless environment. I succeeded in replacing a code-based script-heavy experience with a visual interface that could be utilized by the most inexperienced of team members.

My work spanned across user interviews, flow diagrams, lo-fi wireframes, illustration, and high fidelity prototypes. I coordinated efforts with product managers, frontend developers, and the content team in weekly design syncs to ensure quality for the shipped product.

Note: NDA's prevent public sharing of detailed product information

Scope Augment our on-prem analytics product with cloud-based automation
Timeframe 2018-2019 / 18 months
Role Lead UX & product designer

Early concept sketches — Everything begins with pen and paper. Words and sketches are cheap.

Everything begins with pen and paper

I love how writing and sketching helps me to focus on the problem at hand. Words, boxes, and arrows allow me to capture workflows early on and ensure that I don't lose sight of the forest due to the trees. And by trees I mean pixels, colors, fonts, Sketch, Figma, Framer, etc. Rushing for the nearest design tool almost always results in half-baked and less thoughtful concepts.

In the absence of experimentation and exploration, innovation is near impossible IMHO. My writing and sketching naturally evolves into UX solutions, UI sketches, and interaction flows that always produce better results than if I had skipped the process.

Creating a new Robot allows for some personality to shine.

Adminstrative Settings — Migrating from a cloud agent to an on-premise agent generates a keyfile for download.

Failed welcome tour concept — #fail - Not everything was a success. This "welcome tour" concept fell flat with test participants.

Robot task detail screen — A robot task is a set of automated instructions. This screen is showing the details of a selected task.

The Task Designer

This Robots feature was basically a project within a project. The scope of the Task Designer was very ambitious, with the ability for a user to configure scripts, automate the execution of the task, send notifications to team members, and finally publish analysis results to a separate area of the HighBond platform.

Whew, I'm tired from just typing all that. Functionality and fat were trimmed in order for us to meet production deadlines, but the end result remained true to the original vision and goals.

A place for developers to call their own

We knew that we wanted to keep things simple and clear for everyday users of Robots, but analysis script developers needed a bit more. Robot version control, file diffs, version activation and deactivation were some of the more involved needs for developers - Dev Mode to the rescue. A toggle switch allows a developer to enter into an tailored space to complete their work. Dev Mode is permission-based and access restricted to keep unintended consequences at bay.

Robots Dev Mode — Dev Mode is used by robot developers to test scripts, activate versions, and track changes to tasks.

Consistent ≠ boring

An ongoing goal for myself, and the entire UX design team, is consistency and low cognitive overhead for users. So we always strived to reuse UI components and patterns wherever possible to promote and ensure that consistent environment. This can lead to a lot of repetition and potential stagnation in the visual UI design of a platform.

I always sought to balance predictable consistency with unexpected delight. I would look for ways to inject personality into my work. These robot icons and "empty state" illustrations are a prime example, and everyone really got a kick out of them.

Blank state illustration set — I also took the opportunity to bring some life into the "empty states" for each section of the app.

Analytics Data Access

ACL Analytics is the flagship product that Galvanize (ACL) was built upon. It is a Windows desktop application with a semi-annual release cycle, which meant that margins for error and room for "way out there" experimentation were very thin.

The product manager had identified that we needed to provide users with a more friendly method for connecting to existing data sources and building queries for importing that data into our Analytics application. We designed the Analytics Data Access query builder to solve this problem and provide a point-and-click UI for connecting to a database and then constructing queries for data extraction and import.

User research and validation was kept to a minimum - the product manager had a firmer grasp on the user need from his days as a member of the customer support team. So I was able to jump right into diverging exploration through sketches, wireframes, and low-fidelity Balsamiq prototypes, which allowed us to focus on the most complex aspect of the application — the Query Builder.

Scope Design an interface for accessing various databases and constructing queries for data import
Timeframe2016-2017 / 6 months
Role Lead UX & product designer

Data source connection panel — A connection to an existing data source in the first step

Connecting to a data source

The user's first step is to connect to their desired data source. The data source could be either an on-premise database or a cloud source. Users were still very familiar with old-school FTP and DSN connection techniques, so this informed our final solution for the connection parameter dialogs.

Adding filters to control the contents of the result set

Advanced SQL mode — The more advanced SQL mode was just a toggle away

Give them the power

We certainly did not wish to hamstring our more experienced and knowledgeable users. So we designed a power mode where the visual query builder would be hidden in favor of a text editor-ish area where raw SQL could be written by those who preferred the control they were used to. Toggling from SQL mode back to the visual builder would erase the query. This was a trade-off that was made due to the complexity of 2-way translation of SQL commands.

Analytic Header Designer

Content team is on furlough. Project overview coming soon...

Scope Create a simple visual interface for our complex developer-focused scripting environment
Timeframe 2019 / 3 months
Role Lead UX & product designer

A more complex header configuration example

Starling Design System

The Starling Design System (SDS)turned out to be both my passion project and my last contribution to the Galvanize organization. I poured all my energy and focus into establishing the first version of our design system and was well on the way to the next major revision through numerous iterations and improvements. The core design system team learned what worked well and what didn't through hands-on use and evangelism of the system to the product teams and developers would used the components and patterns to speed up their workflows.

The SDS is a combination of reusable design components in Sketch and (soon-to-be) Figma, coded React components, and design guidelines & best practices that directed the use of the system. Design foundations were established for typography, color, and spacing/layout. These foundations were the building blocks of the design components which were then codified via React.

You can visit the public design guidelines site, of which I also led the design efforts, and see some of the results for yourself.

Scope Create, maintain, and evangelize system of design guidelines, components, and patterns
Timeframe 2017-present
Role Lead UI designer and maintainer

The Starling home page — The Starling Design System site home page

Hello, I'm John Peele.