Mobile Visual

The Mobile next project

Started in 2018, the Chase mobile design team, product and tech were asked to come up with the next generation of mobile banking. The goal was to support & guide customers on their financial journey beyond just transactional interactions, and for Chase to deepen the relationship with the customers by providing a differentiated mobile experience that remains relevant to customer’s expectations.

My ROle

💡 Visual concept development, 👩‍🎨 Icon & pattern creation, 👩‍💻 Rapid prototyping

I am one of the key designers working with designers across different lines of business, my work include research, design, build prototypes, and deliver design artifacts. I collaborate with the brand team to ensure that Mobile Next’s visual elements and voice and tone are aligned with the brand identity, and work with the Design System team to build and enhance new design components.

goals

• To give the Chase mobile a visual refresh.

• Design should convey the brand’s core design principle: Simple, Human, Unified, and Informed.

• Design should be simple and reduce cognitive load as products and feature evolve and expand at scale.

• Partner with brand team and ensure our design elements are in alignment with the brand’s voice and tone.

deliverables

The three designs below show how the visual evolved in different phases. To validate in production, we introduced changes incrementally into existing app before rolling to all customers. The first employee pilot started in April 2020, and customer rollout begins in June, 2020 (starting with 5%). We closely monitor and address feedback as we continue to rollout to more customers.

Design process -

Research and Explore

First we facilitated a design workshop for designers to gather inspirations and generate ideas. Designers shared examples from apps that evoke a particular style or concept that’s relevant to Chase. We brainstormed on what design elements ties into our four design principles: Informed, Human, Simple, and Unified and looked into current UI design trends and competitors references. The takeaway of this exercise was to learn about everyone’s thinking around design principles and gathered ideas into moodboards that could bring into visual design.

Early design explorations

“Think outside the box”

After many research on current trends, competitor analysis, I started sketching and exploring different color treatments, layouts, and components. I was told to think outside the box with no restrictions. The only constrain at the time was to incorporate the color from a color palette that the brand team was building on. I worked with them to test the digital color palette and incorporate the new color palette into the mobile UI.

First design and user testing

The first design direction was inspired by the data I received during research, I chose patterns that are commonly used in the modern fintech apps. I used gradients, soft colors, curves, rounded corners on tile to embody the current UI trend, and incorporated simple illustrations to create a fun and playful experience.

“Fallback” iterations

After presenting the first initial design concept to the stakeholders and senior leadership, I was told that the new design direction “doesn’t feel Chase”, “it is too playful”, and the tone of the design should be sophisticated, stable and secure. I then went back to sketching and iterating based on the direction I received. Another feedback i received is that the new design direction was too big of a jump to the current style. We realized that the new design need to evolve in a way that avoid disrupting the current user experience. Our solutions was to introduce changes incrementally into the current UI before rolling to all customers. I looked into existing patterns and components and apply the established design language to make the new designs sit well in the existing UI.

testing round 2

• Visual Design: Gather feedback on the color and imagery of the home screen, and employ a variety of usability tasks to see if/how the visual aesthetics impacts the user experience.

• Roll-up Balances: Understand if customers value displaying roll-up balances within their accounts.

• Swipe-CTA: Test the discoverability of the contextual swipe-CTA within the accounts module.

Header patterns

Meanwhile, a business decision of removing the background photography from the header was made and I started to explore different design for the header space. Our team collaborated with Chase brand team on creative explorations and aligned on tone of the pattern. I explored from using illustrations, financial patterns and symbols, to using imagery with potential solid overlay. I had regular check-ins with directors and stakeholders and iterated design direction based on feedbacks.

City Illustrations
As we moved away from the regions photography background, I wanted to keep the “human” and “personalized” design elements from our Brand’s core design principles, therefore I proposed a direction of creating major cityscape illustration to replace the photography. The familiar visualizations could be built upon previous positive signals that’s received form the region photography. Also, they can be easily updated and cut time in the creative process.

Personalized Illustration
Event/time-based illustrations and messages that changes based on season, sponsorship events, or holiday related, to express the personalized and human design principle.

Metaphor Texture
Explored various metaphors of patterns to convey strength and security, left to right from a honeycomb pattern, Chase logo, to complementary textures, this direction create visualization that embody a trusted environment.

Final Direction - Bokeh Texture
A simple, Chase branded texture was chosen for the final direction, based on the feedback we received from the interview session, the style fulfill the visual goal we wanted to achieved: sophisticated, stable, and secure.

UX icons

I also played a key role on the creation of the new set of informative, non-expressive, and high functional UX icons. I contributed on exploring design concept, establishing direction, and delivering designs.

New

• Built with grids and key lines in Illustrator to ensure size consistency.

• Unify esthetics through common forms, shapes, and line weight to promote visual harmony.

• Use easily recognizable objects to increase user identification & comprehension.

Final Design direction

• Simplify design and remove unnecessary visual noise to reduce cognitive load.

• Apply simple and Chase branded pattern and cohesive iconography set to achieve a branded house.

• Meets accessibility standards on font size, color contrast ratios and CTA affordances.

Results

We conducted a holistic survey with 300 Chase mobile user through UserZoom, below is the summary of the findings.