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 HCI. Leading intuitive & delightful design, while tying goals back to business KPI's.

My philosphy is design is 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.

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

Experience and Examples


UI / UX Design and Development

  • Responsive Sites
  • Apps
  • Wireframes and Prototypes
Explore Design and Dev

Multimedia Visual Design

  • Motion Graphics
  • Graphic Design
  • Screen Printing
  • Illustration
  • Branding and Identity
Explore Multimedia

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

― Don Norman, of NN/g

My Work


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

  • 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

  • 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

What are you waiting for?

Let's connect, collaborate and communicate

Just let me know you're following up from my site... And not a spam-bot

Full Résumé

The perfect overlap of technical-minded plus creative-minded that you're looking for. Experienced UI/UX and Product Designer, rooted in solid graphic design, with a splash of Front End Web Development experience.

My philosphy is design is 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.

Code Samples

This entire site was hand-coded. Do you like it? I hope so :)

Building on a customized Twitter Bootstrap foundation, I designed this site to be mobile-first with progressive enhancement.

I'm incorporating typography best practices to set type to be pixel-agnostic with rem, serving images in a responsive way with the Picturefill library, and semantically marking up the page with HTML5 tags like nav, article, and section.

Want to geek out?

I also have some jQuery, JavaScript and PHP code/programming samples on GitHub .

Pure Code Baby!

Examples include:

  • Enhancement to the Picturefill library that I implemented on my site, adding support for img-tag level classes, titles and id to enabling styling like img-responsive and img-circle with Twitter Bootstrap.
  • JSON-P GitHub.com repo search by keyword.
  • Proof of concept, jQuery and Bootstrap based simulated chat for a tech exercise.

Skills and Training:


UI / UX

  • User Centered Design
  • Analytics
  • Usability Studies
  • Accessibility / A11y
  • Personas
  • Taxonomy
  • Journey Maps
  • Wireframes
  • Mockups
  • Prototypes
  • Typography
  • Color Theory
  • Grid Systems
  • Responsive Web Design
  • Hybrid and Native Apps (iOS / Android)

Technical

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Git Version Control / GitHub

Tools & Software

  • Figma
  • Sketch
  • InVision
  • Zeplin
  • Adobe CC
  • Acrobat Pro
  • Autodesk Maya 3D
  • After Effects
  • Cinema 4D
  • Final Cut Pro

Experience:


Senior UX Architect, 2019 - 2021

U.S. Bank - San Francisco, CA

The fifth-largest bank in the United States, U.S. Bank is one of the country's most respected, innovative and successful financial institutions.

  • Principle designer for Zelle P2P cash transfer, increasing use 58% year-over-year
  • Redesigning ATM interface, optimizing flow and improving accessibility
  • Largest contributor to in-house design system outside of dedicated design system team
  • Delivering end-to-end UX artifacts, including user personas, wireframes, user flow diagrams, user interviews and usability sessions, versioned prototypes, and final hi-fi mockups
  • Mentoring and growing designers on the team
  • Developing team training

Senior UX Designer, 2017 - 2019

Roostify, Inc. - San Francisco, CA

Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Clients include Chase Bank, Guild Mortgage, and TD America.

  • Increasing overall efficiency by 30% of Roostify's clients through an improved digital application experience
  • Lead designer of major new features
  • Redesigning the entire architecture from a max of 2 borrowers to 4-plus on the same loan application, collaborating with engineering to touch every piece of code
  • Designer of Roostify Adapt - multiple branch/account management
  • Spearheading research, planning, and design for new loan flows for home equity applications
  • Responsible for every step of the design process - including mapping user flows, creating mockups and designing high-fidelity UIs across Roostify's websites and apps
  • Employing extensive experience and judgment to plan and accomplish Roostify's broader product and design goal
  • Collaborating with engineers and product managers
  • Mentoring and growing designers on the team
  • Developing team training

Senior UI UX Designer Developer, 2016

Vlocity, Inc. - San Francisco, CA

Vlocity is the first kind of company ushering in the next wave of Cloud Computing. Specifically, creating, from scratch - The Industry Cloud. The Industry Cloud is designed to meet the critical omni-channel sales, service and marketing drivers of the biggest brands on the globe.

Leading the UI and UX on multi-million dollar sales and services contracts with some of the biggest names in the Communication, Insurance, Health Insurance, and Public Sector industries, including Sky Italia, T-Mobile, and New York Life.

  • Leading the charge in creating compelling, high-fidelity, aesthetically pleasing product demonstrations that lead to revenue.
  • Working with head of department to prioritize the most compelling projects
  • Wireframing and prototyping proof of concepts to get rapid feedback and rapidly iterate upon
  • Working directly with C-Level clients and stakeholders to understand business needs and formulate user-centered solutions
  • Collaborating with sales consulting team members to understand customer requirements
  • Providing recommendations for solving critical use case scenario thru compelling UX
  • Developing process and system for cataloging library of UX assets for customer engagements
  • Interacting with product management and engineering on qualified projects
  • Establishing standards for demo assets
  • Developing team training
  • Providing design and development mentorship

Lead UI/UX Designer, 2015 - 2016

AAA Northern California, Nevada & Utah - Emeryville, CA

Designing iterative improvements to a mobile-first website that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, SFDC, Sass, HTML5, and CSS3.

Leading the UX design of outstanding digital products and experiences with internal and external creative resources. Working hand in hand with the Digital Designer as two halves of a design team.

  • Leading UI/UX Design to serve 4.2 Million members
  • Managing 2 week project sprints in Agile with VersionOne and JIRA
  • Leading concept creation through the execution of complete customer facing designs
  • Creating wireframes, storyboards, user flows, process flows and site maps
  • Effectively communicating interaction design ideas
  • Leading design efforts end to end (design presentations, coordinating user testing, communicating around design practices)
  • Collaborating with product owners up to C-suite, brand/creative directors and designers, engineering leads and agency partners
  • Conceptualizing ideas that bring simplicity and user friendliness to complex roadblocks
  • Presenting and defending designs and key milestone deliverables to peers and executive level stakeholders
  • Using analytics to support the continuous improvement process
  • Establishing and promoting interaction design guidelines, best practices and standards
  • Overseeing usability testing

UI/UX Designer & Developer, 2009 - 2013

jpost-design - San Francisco Bay Area, CA

Leading web design and app development following the latest technology and standards, while incorporating tried and true traditional design skills and styles. Some specifics tied under non-disclosure agreements.

Focusing on HTML5, responsive design, and flat UI patterns inspired by the Bauhaus School and De Stijl Movement.

  • Industry Experience:
    • SaaS
    • Startups
    • eCommerce
    • Advertising
    • Higher Education
    • Revenue Management
    • Non-Profit industries
  • Previous clients
    • Cost Plus World Market, Oakland CA
    • The Creative Group, Oakland CA
    • UC Berkeley Center for Executive Education, Berkeley CA
    • Vitamin T / Aquent, San Francisco CA
    • Model N, Redwood City
    • BrightRoll, San Francisco, CA
    • Pacific Coast Farmer's Market Association, Concord, CA
    • Crazy Shirts, Honolulu, HI
    • University of Hawaii, Honolulu, HI
  • UI/UX
    • Wireframes
    • Design Patterns
    • Taxonomy
    • User Flows
    • Google Analytics
    • Quantitative and qualitative usability studies
  • Interaction Design
    • jQuery / JavaScript animations
    • Performance optimization
    • Rich Media Integration
  • Responsive Web Design
    • Designing mobile first with progressive enhancement support
    • Frameworks: Twitter Bootstrap, Zurb Foundation
    • Responsive images with picturefill and noscript fall-back
  • App Development
    • Geolocation support employing HTML5 Geolocation API and Google Maps API
    • Audio and Video HTML5 integration, with cross-support for h.264, ogv, and shockwave-flash fall-back
  • Email Marketing
    • HTML email design and coding
    • Increased house/retention list by 22,000 clients with dynamic vs static processes
    • Email campaign management
    • Campaign integration with HubSpot, Pardot, Salesforce CRM
    • Prospect database management
    • Prospect flow documentation and analytics
  • Graphic Design
    • Developing brands' visual guidelines
    • Masking and compositing designs utilizing Illustrator, InDesign and Photoshop
    • Producing print media small and large, including postcards, booklets, posters, and 20-foot vinyl banners
    • Generating digital media for the web, social media, and digital ads
  • Environmental Design
    • Planning exhibitions for the University of Hawaii Art Gallery and Commons Gallery
    • Prototyping 2D and 3D scale mock-ups
    • Evaluating user interaction, pace and flow
    • Managing teams from 10 to 28 people
    • Cataloging and photography of artworks
    • Arranging, installation and lighting of artworks
    • Constructing custom display cases, shelving and frames
    • Coordinating drop-off and pickup of artwork

Education:


Web and Document Accessibility

Deque University - Online

  • Certified in WCAG and ADA requirements for web and document accessibility

BA Design and Applied Arts

University of Hawaii at Manoa - Honolulu, HI

  • Award - Outstanding Electronic Arts
  • President of 650 Students in Hale Wainani - Hawaiian translation: "House of Beautiful Water"
  • Breadth and depth of "new" and "traditional" processes and styles
  • Creating a "little piece of SoHo" in the commons gallery for the department head of Graphic Design

AS Digital Media Production and Animation

Leeward Community College - Pearl City, HI

  • Award - Associate of Sciences Degree Valedictorian
  • Certificate of Competency in Web Design
  • Certificate of Competency in Desktop Publishing
  • Certificate of Competency in Motion Graphics

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

- Garrison Keillor