GAYLE
BARTON
Sr. User Experience Designer
Sr. Product Designer
Digital Design Manager
CHASE MyHOME
Chase is the U.S. consumer and commercial banking business of JPMorgan Chase & Co. (NYSE: JPM), a leading financial services firm based in the United States with assets of $3.8 trillion and operations worldwide.
Department: Home lending, Chase MyHome
Chase MyHome is a home buying experience for chase customers where they can:
-
See how much you can afford and download customized conditional approval letters.
-
Look at homes, compare mortgages and see current rates.
-
Apply for the loan within a multi step digital experience, helped along with customers pre-filled information.
-
Submit your loan application without ever meeting a loan officer.
DESIGN TOOLS
Sketch
InVision
Freehand
PROJECT MANAGMENT TOOLS
Jira
Confluence
UX TECHNIQUES
Use Cases
HI-FI Clickable Prototypes
DESIGN THINKING
Started the non-linear process that contains five phases:
Empathize
THE GOAL
Take existing native (iOS and Android) user journeys, use cases and build out a desktop, responsive digital experience.
MY ROLE
As the Senior User Experience Designer for Chase MyHome team, I lead designs through ideation to the approval process and delivery of assets to the development team. I presented updates and proposed designs within a team that was across disciplines, product lines, and roles.
DESIGN STRATEGY & VISUAL LANGUAGE
I was tasked with using the JP Morgan Salt Design System (MDS) and oversaw the creation of a clickable desktop prototype in Sketch/InVision. I standardized screen sizes for desktop (extra-large), iPad (horizontal/vertical), and mobile, aligning them to a 12-column grid system. I frequently referred to the design system's website for guidelines.
Taxonomy
I set up a standardized file naming convention to improve file sharing, making it significantly easier to link InVision screens for prototyping. Additionally, I implemented version control for artboards in the review process, ensuring smooth coordination of design reviews and approvals from the design system, product, UX, and development teams.
Define
USER FLOW
I began by working with existing user flows and use cases from the native app experience. Because new content couldn't incur additional costs, I focused on ensuring consistency with the current design. While restructuring the desktop experience, I adapted user flows to maximize the larger screen space and collaborated with the team through Sketch Freehand sessions to explore and translate design concepts. As designs evolved, we recognized the need for additional content, which led us to expand our team to include a content strategist. New content required careful review by both the product team and legal to ensure compliance. Leveraging the established native (iOS and Android) user journeys, I built a cohesive site navigation structure to support the expanded desktop experience.
DOCUMENTATION
Planning and leading assignment allocation of features. I designed the largest feature, the Dashboard/Overview page. Delegated designs to the other junior designers
Leading progress screen with status report
Prioritized work with the team into Small, Medium, Large, and Xtra Large Work efforts.
Feature 2 Dashboard/Overview and it's 12 use cases
Leading workload and MVP allocation
Ideate
VISUAL THINKING ON PAPER
DASHBOARD/OVERVIEW PAGE CHALLENGE: The native app lead the user through the experience with visual clues. But how did I recreate the step-by-step on Desktop?.
Using "Design Thinking" methodology, I revisited the native mobile app designs to empathize with the user and continuously define their needs throughout ideation. I focused on sketching ways to guide users through each step while allowing them autonomy to move at their own pace and explore sections freely. For instance, if users already know their buying power, they could skip that step and go directly to browsing homes. In the native app, I noted the use of color, disabled states, and graphic checkmarks to visually indicate completed sections, which I planned to integrate as visual cues for user progress.
Hi-Fi Wire frames
USE CASE: User views the various features within the dashboard prior to starting the application.
Top messaging changes and the illustration changes when user goes to different features within the experience.
ILLUSTRATIONS
I use the image styling from an existing animation. I use Adobe Illustrator to add a few elements into the SVG illustrations. Had to track down the JP Morgan marketing approval process. I prepared the image assets for the development team.
Test
ADA SPECS
Created a ADA specs document that followed WCAG guidelines that appropriate to UX/UI Design:
-
Made sure that content, when presented to the user, conveys essentially the same function or purpose as auditory or visual content.
-
Ensured that text and graphics are understandable when viewed without color.
-
Ensure that tables have necessary markup to be transformed by accessible browsers and other user agents
-
Ensure that the user interface follows principles of accessible design: device-independent access to functionality, keyboard operability, self-voicing, etc.
-
Use features that enable activation of page elements via a variety of input devices.
-
Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly.
-
Use W3C technologies (according to specification) and follow accessibility guidelines. Where it is not possible to use a W3C technology, or doing so results in material that does not transform gracefully, provide an alternative version of the content that is accessible.
-
Provide context and orientation information to help users understand complex pages or elements.
-
Provide clear and consistent navigation mechanisms -- orientation information, navigation bars, a site map, etc. -- to increase the likelihood that a person will find what they are looking for at a site.
-
Ensure that documents are clear and simple so they may be more easily understood
RESULTS
Delivered all the design assets and users flows 2 sprints (4 weeks) ahead of schedule.
Continuing on
Chase serves more than 66 million American households and 5 million small businesses with a broad range of financial services, including personal banking, credit cards, mortgages, auto financing, investment advice, small business loans and payment processing. It gives me great pleasure that since my departure, the Chase My Home is still a service Chase provides for their customers. I can still see my designs and illustrations still working today.