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.
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.
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 - 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%.
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.
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.
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.
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
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.
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.
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.
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.
See the full prototype in HTML and CSS based on Zurb Foundation
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.
Today's Simulated Date: March 28
- Open Market
- Closed Market
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.
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.
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.
"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.