Menu  
jpost design logo

Want to make your UX easy to use, functional, and delightful? I do that!

Forging 10+ years of cross-platform experience in responsive design, iOS & Android apps, and other omnichannel product design. Leading intuitive & delightful design, while tying principles back to objective metrics and KPI's.

My design philosophy is its all about problem solving, my drive is fueled by user feedback from new design tests and iterations, and my ultimate goal is to create positive effect in this world through superior design.

With a front-end background I've been called a unicorn, but personally I prefer the platypus.

(And alliterations. These are hand-crafted SVG's with PNG fall-back btw)

beaver plus
duck equals
platypus

Notable Accomplishments:

  • Princpal Zelle P2P cash payments designer at U.S. Bank, causing a 58% year-over-year growth in payments, and increasing active Zelle users to over 850,000 in 2020
  • Spearheading a 13-point bounce rate improvement for Zelle P2P cash payments at U.S. Bank, reducing bounce from 18% to 5% by redesigning intuitive flows, on-brand designs, and reinforcing CTA's in UX writing
  • Elevating ATM accessibility from 2010 ADA Accessibility Standards to WCAG 2.0 AA, redesigning and testing UI, layout, and HCI for U.S. Bank
  • Principal designer of major new features at Roostify, increasing overall application efficiency by 30%, bringing a near 50% reduction in time to approve home loan documents, and nearly 40% reduction in time in approving Home Equity Lines of Credit
  • Generating $35 Million+ per year in recurring revenue at Vlocity, by designing and presenting responsive web and hybrid app product demos up to C-suite audiences
  • Raising the Net Promoter Score by 4 points at AAA Northern California, by spearheading a multi-phased redesign of the core map ordering experience

Design Skills:

  • User Research
  • Personas
  • Journey Maps
  • Distilling Problems / Goals
  • Prototyping
  • Wireframing
  • Lo-fi and Hi-fi Mockups
  • Mobile-First Responsive Web
  • Mobile App Design (iOS and Android)
  • Design Systems (e.g. Apple HIG, Material)
  • Sketch
  • InVision
  • Figma

Technical Skills

  • HTML / HTML5
  • CSS / CSS3
  • JavaScript
  • Frameworks (e.g Bootstrap)
  • Adobe Analytics
  • Google Analytics
  • Git Version Control / GitHub

“A brilliant solution to the wrong problem can be worse than no solution at all: solve the correct problem.”

― Don Norman, of NN/g

Experience and Examples


UI / UX Design and Development

  • Responsive Sites
  • Apps
  • Wireframes and Prototypes
  • Personas
  • User Flows
  • User Research
See All Design and Dev

Multimedia Visual Design

  • Motion Graphics
  • Graphic Design
  • Illustration
See All Multimedia

UI / UX Design and Development

US Bank – Zelle P2P Payments Registration Redesign

Summary: U.S. Bank's mobile app for iOS and Android uses Zelle for P2P (peer to peer) money payments, with 850,000 registered Zelle users.

Problem: The business team identified an unusually high 18% bounce rate on the Zelle registration screen, as tracked by Adobe Analytics. I was tasked with finding why, and how might we improve the design to reduce bounce rate and increase registration?

Process: First, I gathered all the analytics from our business partners. Then, with no budget or time for formal UX research, led a heuristic review, in-office UX research, and employed our UX research partner as a proxy for real user feedback.

Together, we then collaborated on UX feedback and possible user pain points. I then distilled them into 3 areas: user flow, art direction and style, and trust and security.

I formed a hypothesis that the registration screen was mismatching the users' mental model, was lacking signals of trust, and was overall confusing users. Drafting new wireframes and mockups, I then tested new designs internally and with our stakeholders, until my design team was confident we reached an MVP solution. I then took lead in presenting our solution to our head of design in all-hands design review for approval.

Solution: A redesigned user flow, streamlining the initial steps, and customized registration screens according to users' 3 distinct end goals of using Zelle for the first time: to send money, request money, or split a bill. The new designs also better matched U.S. Bank's style.

The redesign resulted in a 13-point improvement in the bounce rate, and contributed to a 58% year-over-year growth in P2P payments, as well as increasing active Zelle users to over 850,000 in 2020.

Team: 1 UX Architect, 1 UI/Visual Designer, 1 Content Strategist, 1 Design Director, 1 Head of Design, 2 Product Managers, 1 Marketing Specialist, 2 Lead Developers

Timeline: 1 day discovery, 2 days UX research, 1 week first draft wireframes and mockups, 1 week second draft and design review, 1 week finalizing and specs

End Result: Improved overall bounce rate in registration and by 13 points.

  • Analytics
  • User Research
  • User Flows
  • Wireframes
  • Art Direction
  • Illustration
  • Copywriting
  • Mockups
  • Prototyping
  • Presentation

Original Zelle Registration Flow and Design

The original Zelle Registration page design was lifted directly from Zelle's own internal marketing guidelines. It lacked any U.S. Bank branding, or style, and taglines did not echo the user's original CTA intent.

The original flow just to get to the registration page was also a multi-step process. Users would be presented with multiple intermediate calls to action that all led to the same screen.

I knew right away this would be a bonus opporunity to streamline the user's journey.

UX Feedback and User Pain Points

Lacking time and budget for formal UX research, I led a heuristic review among our design team and stakeholders to gather UX research on why users may be abondoning the flow at such a high rate. I also brought in our UX research partner as a proxy for real user feedback.

Together, we collaborated online with virtual post-its, and I consolidated feedback into 3 points to improve: the user flow, art direction and style, and trust and security.

Wireframing New Layout Options

The first step was to draft new layout options. From user feedback, I knew I had to create a sense of synergy between U.S. Bank and the relatively unkown Zelle service. So first thing I did was to partner them at the top to create a sense of trust and security, and to comfort user they were still in the U.S. Bank app.

I also experimented with ways to break up the layout with headline, images, and copy, and ways to inject dynamic curves into the layout to bring a sense of motion and action.

First Round of Photo Style Mockups

Partnering with our visual designer on images, and partnering with our copy writer on headlines to echo the user's mental expectations, I led the art direction testing new photos across fairly standard layouts.

I led internal tests with project stakeholders, fellow designers on other projects, UX researchers, and styleguide experts, to gauge a hypothesis of how photos felt in the design.

As expected, photos in this flow felt strange to users, and didn't fit into the general style of the U.S. Bank app. So we pivoted to a more illustrative style.

Designing New Illustrations in U.S. Bank Style

As expected, photos in the designs felt weird and out of place to users. So I partnered with our visual designer to create new illustrations in the U.S. Bank style.

First Round of Illustration Style Mockups

Second Round of Mockups in Illustration Style

After feedback from an internal design review, guerilla UX feedback, and project stakeholders, it was clear the the new illustration style was the right direction.

I partnered with our visual designer to mockup a few variations, and together we sought feedback from U.S. Bank's illustration brand subject matter experts for which version best matched U.S. Bank's evolving style standards. We picked the best designs, and I led a presentation to business stakeholders and to an all-hands design review for approval of our work.

New Flow and Design - Send Money Registration

I presented the best versions of the new designs and flow in an all-hands design review to our Design Director. It went over smoothly, and was instantly approved.

In the end, I simplified the flow by eliminating unnecessary intermediate interactions, and eliminated the CTA carousel (they're proven to be poor UX). Partnering with our visual designer on art direction we created new illustrations, and partnering our with content writer on UX copy we emphasized ease of use, safety, and security.

Result: Improved overall bounce rate by 13 points.

New Flow and Design - Request Money Registration

Result: Improved overall bounce rate by 13 points.

New Flow and Design - Split a Bill Registration

Partnered with visual designer to create new 'split bill' illustration, incorporating diversity with multi-etchnic skin, and multi-gendered hands.

Directed content writer to touch on points of value: saving the user from the mental drain of doing math in their head, and tracking payments.

Result: Improved overall bounce rate by 13 points.


Roostify - Redesign Home Lending Dashboard

Summary: Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Principal designer of major new features, building and incorporating pattern libraries, and designing new workflows.

Problem: Borrowers and Lenders for home loans are bogged down by mountains of paperwork, and archaic systems. The current platform fell short of satisfying users' needs of communicating and working on the most important, time sensitive processes. We needed to know more about the home lending journey, lender's workflows, and communication points in order to design a better experience. Lots of communication and process was happening outside of the platform, making it difficult to track, causing borrower confusion, extending times to close, and creating insecure communications.

Process: We started with a research plan, partnering with Cooper Design to contract 2 main researchers to travel on-site to several banks across the country to develop a better understanding of the home loan journey. Combined with in-house and field interviews, we then created archetype personas and user journeys for both borrowers and lenders. Adopting a development term, we realized we needed to make the interactions object-oriented.

After assembling the full user profiles, 1 researcher spun off, and I partnered with the remaining researcher/designer to whiteboard the patterns, functions, and design artifacts we needed to improve communication throughout the home lending experience. We would switch duties whiteboarding, one person generating and the other synthesizing, both problem solving for the user personas. Focusing on the borrower dashboard, we boiled down the order of importance through a combination of persona mapping, and in-house user testing with the customer service team.

When a draft seemed ready, we checked in with my design director, and coordinated a group presentation and critique, up to a VP and the CEO. While presenting, we took notes of major points on post-it notes, and integrated the feedback into the next whiteboard.

The final whiteboard was presented in tandem with an example user journey, and was sketched out to include new UI elements and signifiers. It was then documented in a presentation as a guide for next steps, ready to be shared to greater teams.

Solution: The dashboard redesign, combined with other application flow enhancements, led to a 30% boost in efficiency, near 50% reduction in time to approve loan documents, and near 40% reduction in time to approve Home Equity Lines of Credit. The final whiteboard and documentation laid the wireframe, and I partnered with the visual design team to produce final mockups, then with engineering for prototypes and testing. For UX, each interaction and message to and from borrowers was object-oriented to a certain task, document, or subject. For UI, we streamlined and decluttered the look and feel, improving concentration on the most important items at hand, and eliminating confusion and chaos.

Team: 1 UX researcher, 1 UX researcher/designer, 2 product managers, 1 design director, 1 VP of product, 1 CEO

Timeline: 1 month UX research, 1 week crafting personas & user journeys, 2 days defining product improvements and scope, 1 week whiteboard wireframe and revision and presentation, 2 weeks digital mockups

End Result: Improved user efficiency by over 30%.

  • User Research
  • Personas
  • User Journeys
  • Whiteboarding
  • Wireframes
  • User Testing
  • Presentation

Original Home Loan Application Dashboard

Brainstorming and Mapping

Led exercises to map user needs, and how we might meet them with product value.

User Persona Creation

Distilling user research, brainstorms, and mapping, new personas were created and existing personas were expanded. Here's a classic 2-borrower persona scenario, with Brian as the Primary Borrower taking the active lead on the loan.

Borrower User Journey

From user research and personas, user journeys were created with intentional potholes and challenges, along with moments of delight in their experience.

Identifying Design Artifacts, Patterns, and Interactions

First Whiteboard Wireframe

Intentionally quick and messy to focus on agile changes. First draft of new borrower dashboard with object-oriented actions, messages, and status. Icons and UI kept to a minimum to focus on overall information architecture and user actions to walk thru.

Feedback Notes

Post-It notes were added from team feedback on layout, interactions, and journey, to be integrated into next version.

Second Whiteboard Wireframe

Quick 2nd draft of rapid whiteboard, many times wiped clean and re-done. Integrating notes and feedback, the new borrower dashboard adjusted its layout, added more UI icons and signifiers to better communicate to borrowers and lenders at-a-glance what was going on, and most important action to take next. New UI included a progress bar, new icons for quick scanning, and basic typography treatment to flesh out basic proportions.

Redesigned Home Loan Application Dashboard

I partnered with the visual design team to take the whiteboard wireframes as a base, and applied pieces of it to mockups with our new design system. Together we then partnered with engineering to prototype and QA the final redesign.


Vlocity - Neustar Support Portal

Summary: Vlocity is a SaaS cloud computing solution for the communications, insurance, and government verticals. I was the lead UI / UX designer and developer on the sales team for creating dashboards, purchase flows, and portals on the native mobile / tablet iOS app, and mobile-first responsive web experience.

Problem: Neustar had an enterprise support portal designed desktop-first in the 90's. It was outdated with both design and technical debt. They desired an updated UI and UX that aligned with their marketing brand redesign, and also to take inspiration by Salesforce's own support portal.

Process: I did a 50/50 split of design and development, from research to delivery. Starting with research from Neustar stakeholder interviews, I assembled a list of research into their current UX, and design goals. Taking inventory of their current support portal, I re-mapped the information architecture with card sorting and mental models, creating a flatter, more efficient entry page.

Next, due to time constraints put together a guerrilla style guide based on Neustar's recent redesign, combined with Salesforce's own support portal and lightning design system.

Then I did some quick sketches to check the grid pattern of the new desired card layout system, and jumped into the browser to design and develop directly. After a quick check in of the layout and design direction combining a rapid HTML prototype with a design inspiration board, I then proceeded with the full design, UI asset creation, and development of the portal.

Solution: Delivering a new mobile-first, responsive design, enterprise support dashboard prototype that aligned styles with Neustar's new look, and stakeholder requested inspiration from Salesforce's support portal.

Team: 2 remote sales leads, 1 remote sales associate, 1 UX designer, core on-site development team as needed

Timeline: 1 day for user research, 2 days of style and branding, 3 days of design asset creation and front-end development, 1 day of presentation

  • 50% UI / UX Design
  • 50% Front End Development
  • Stakeholder interviews
  • Style guide & Branding Research
  • Responsive Design
  • Illustrator Icons
  • HTML5 CSS3
  • AngularJS
  • Bootstrap
  • Salesforce
  • VisualForce

Original Neustar Support Portal Research

Design Research and Direction

A quick, guerrilla style guide and design board was put together from scanning Neustar's new marketing site, combined with Salesforce's own support page. I picked colors out of Neustar's brand, created custom icons and SVGs, and integrated them into the final portal redesign.

New Responsive Portal Prototype and QA Check

Working in an agile way, I got in the browser as soon as possible to mockup and prototype a proof of concept to check if we were on the right track.

Completed Responsive Neustar Portal Redesign

The final redesign incorporated the new design styles from Neustar's new branding, plus new portal support cards that took inspiration from Salesforce such as transparent icon repeating backgrounds.


Vlocity - Sprint Customer Service Dashboard

Summary: Heading UX design and development of Vlocity sales division, I created fully developed demos to pitch to customers. Designing and building unique, on-brand, user centric CRM dashboards built on the Vlocity, AngularJS, and Salesforce tech stack.

Problem: Sprint was looking for an updated, central dashboard for their customer service. It had to give at-a-glace information for quick service, plus be able to edit a customer's profile and perform certain actions. The sales team needed an on-brand demo ASAP in order to win over the client.

Process: Coordinating a group chat with the team, we defined current gaps in Sprint's system, and top actions their customer service needed, plus additional actions to improve their UX. Taking that bullet list, I then defined a story through the personas of a service representative and end consumer, and storyboarded their interaction.

Next I performed a quick style survey of Sprint in order to customize our platform to their brand. After some quick sketches, and check-ins to verify we were on the right track, I jumped into the browser, doing 50% design and 50% development, customizing our SaaS templates. When I got stuck, I would work with one of the senior developers to figure out the issue, and we'd define the best path forward and how to add it to our style patterns.

Solution: A fully working, on-brand live demo, built on Vlocity's platform on a Salesforce back end. Key micro-interactions included dynamic special offers, and expandable actions and details on existing products. The sales team successfully presented the demo, impressing their audience.

Team 1 remote sales lead, 1 on-site sales lead, 1 remote sales assistant, core on-site development team as needed.

Timeline: 2 days of research, 3 days of design & development, 1 day of testing, 1 day of presentation.

  • 50% UI / UX Design
  • 50% Front End Development
  • Responsive Design
  • Illustrator Icons
  • Photoshop Images
  • HTML5 CSS3
  • AngularJS
  • Bootstrap
  • Salesforce
  • VisualForce

AAA Northern California – Responsive Multi Use Template Process

Summary: Leading the UX design of digital products and experiences with internal and external design and development resources. Designing overhauls and iterative improvements from a desktop-first website, turning it into a mobile-first website, that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, Salesforce, Sass, HTML5, and CSS3

Process: I brought together business and digital stakeholders to research and define what types of pages and page content were needed. Then analyzed major breakpoints according to in-house analytics and major form factors at the time.

Next, formulated multi-use templates to be used in a Drupal based CMS, pulling existing CSS and typography styles as much as possible. Templates were created in Balsamiq, then output to multi-page Adobe PDF's for easy share-ability and feedback across on-site and offshore teams.

As part of my process, I'd also create fully responsive prototypes using frameworks like Bootstrap or Zurb Foundation, to showcase real HTML and CSS for demos, feedback, and reference for QA.

Solution: Delivering a multi-page PDF, with zipped HTML prototypes, that an offshore team made into new Drupal CMS templates. Adding comments in the final PDF's for annotating framework components, HTML elements, and CSS classes, I'd deliver to engineering the template assets and documentation, and we built the templates following mobile-first UX design patterns, and responsive design best practices. I'd coordinate weekly QA check-ins to ensure all business, technical, and design goals were being met.

Team 1 VP of business, 2 business leads, 1 product manager, 2 digital producers, 2 in-house developers, offshore development team.

Timeline: 2 days to define needs, 1 week of wireframes and prototypes with feedback, 1 month of development and QA.

  • Lead Designer
  • Wireframes
  • PDF comment annotations
  • Visual Design
  • Rapid Responsive Prototypes
  • Layout
  • HTML 5
  • CSS 3

Article Template Whiteboarding 01 - Ideation

Article Template Whiteboarding 02 - Expanding Use Cases

Article Template Whiteboarding 03 - Labeling

Template PDF with Annotations

See the full annotated PDF in a new window. Depending on browser and reader, you may have to download file to view "comments" for HTML and CSS annotations.

Responsive Prototype

See the full prototype in HTML and CSS based on Zurb Foundation

Developed Desktop Template


AAA Online Garage Wireframe and User Flow

Leading the wireframe, and user flow planning for AAA Northern California's new feature Online Garage. Identified in business requirements 3 possible user groups, and designed the most efficient flow to account for all 3 groups. Here is an overview covering all flows, and below are flows for registered AAA members, and non AAA members.

  • Balsamiq
  • InVision
  • Illustrator
  • Presentation to Stakeholders

Design/Development Interactive, Dynamic Google Map with JavaScript, HTML, PHP, and MySQL - Live Example Below

Utilizing PHP and MySQL to create a dynamic array of JavaScript objects into Google Maps APIv3. Dynamically pulling criteria such as market name, season, time, location, and social media links, then appending to JavaScript to be displayed in an HTML info window. Additional logic included selecting markets by zip code, season, day of the week, available produce, and market producers.

  • Design and Development
  • Icon Design
  • Typography
  • Usability Testing
  • Programming
  • PHP
  • MySQL
  • JavaScript
  • HTML
  • CSS

Live Example: Interactive Google Map

Today's Simulated Date: March 28

open market icon - Open Market

closed market icon - Closed Market

Note: development license only. Upgrading from the Google Maps APIv2 to APIv3, I created an interactive map for PCFMA. Implemented PHP and MySQL to create a dynamic array of JavaScript objects containing all the data. This example is hard-coded in JavaScript with an assumed current date in March to show the open and closed season examples.

  • Dynamic PHP/MySQL Queries
  • Database Management
  • PHP
  • MySQL
  • JavaScript
  • Google Maps APIv3

Pure PHP and JS
Code Samples on GitHub


Multimedia Visual Design

Utopia iPad Magazine Article

Created using Adobe Digital Publishing Suite. Designed layout, typography, font baseline, custom icons / illustrations, and interaction design. Supplied with content including video, article copy, and links, combined all into a package for publishing.

  • InDesign
  • Adobe Digital Publishing Suite (DPS)
  • Icon Design
  • Typography
  • Layout and Grid
  • After Effects

2.5D Motion Graphic

Utilizing Cinema 4D built-into After Effects, a "2.5D" effect can be made, bridging the gap between our 3D world and the 2D screen world.

  • After Effects
  • 12 Principles of Animation
  • Adobe Illustrator
  • Cinema 4D

Sacramento Zoo Coloring Contest Poster

As part of my many-hats work for the farmers' market, I would create 11 x 17 tabloid size posters to advertise special market events. This poster and accompanying handout (see full picture for example) was one of my favorites because I was able to put my illustration skills to good use for a good cause.

  • Illustrator
  • Graphic Design
  • Typography
  • Art Direction
  • Illustration

"Viva Von Tease" Painting

Commissioned for Dark Friday's "Murder, Mystery Mayhem" event. Drawing inspiration from the event's film noir theme, and edgy art style of Frank Miller, I made this painting in ink and acrylic on canvas. I used Photoshop and Illustrator the plan the figure-ground reversal, inter-penetration outline, and minimized shape forms.

  • Ink and Paint on Canvas
  • Illustration
  • Photoshop
  • Illustrator

Be well, do good work, and keep in touch.

- Garrison Keillor