Hideki Aono Case Study · JPMC Performance
Hideki Aono logo

Case study · JPMC Investments · Performance

Scroll
Portrait of Hideki Aono

UI · UX · AI Designer

Hideki Aono

NYC based senior UI/UX, AI product, and visual designer for complex digital products, research & data driven UI, design systems, visual storytelling, and polished execution.

Work JPMorganChaseCurrent Logical Design Solutions · Fjord · Plus One
Experience

UI·UX·Service design·Design thinking·Strategy·Visual design (digital & print)

Skillsets

UI·UX (mobile & web)·Print·Photography·Video·Illustration

Industries

Finance·Pharma·Insurance·Consumer electronics·Healthcare·Telecom·Travel & Hospitality·Fashion·Media

Other interests

AI·Crypto·Robotics·Quantum·Blockchain

03Collaboration

Core partners

Build & shape

Product

  • Product roadmap
  • Brainstorming
  • PRD docs

Development

  • Brainstorming
  • Desk check
  • Product execution
  • Iteration

Content

  • User friendly language and intuitive, strategic design

Research

  • Workshops
  • Scripting
  • Readouts

Design / Design Leadership

  • Brainstorming
  • Refinement
  • Design iterations & considerations
  • Working with the design system
Compliance & sign off

Accessibility

  • Greenlines / redlines approvals
  • ADA compliance · Level 2 · AA

Legal

  • Approvals
  • Legal compliance

Stakeholders / Leadership

  • Approvals
  • For final product release

04Experience design · Double diamond framework

Design process activities

1

Exploration & research

Comparative / competitive analysis Market scan / desk research Audit / heuristic Existing sites research Interviews with users & stakeholders Understanding pain points and needs
2

Synthesis & systems setup

Personas / mindsets Mapping of users Northstar / journeys / roadmaps Use cases Mapping of priority capabilities and features Mapping of the best experience Design system Creation of reusable elements and components
3

Asset creation, handoff & iteration

Dev ready files / handoff Visual design (responsive) for dev Inspectable components Visual design / prototype elements User testing / iteration UI / UX iteration on design components Iteration of designs based on user feedback

Framing

Start with the why.

What are we trying to solve? and why?

Every engagement begins by pressure testing and clarifying the problem statement.

06Use case

Web & Hybrid

JPMC Investments:
Performance page

A web & hybrid experience that lets Chase investment
customers track and compare their portfolio's performance.

My role Lead UI designer end to end, from research to the launch.
MacBook on a desk showing the JPMC Investments performance page JPMC Investments performance on laptop and mobile Web & Hybrid

07Research · Comparative

Understanding the landscape and competition

Banks, financial institutions and fintechs, and how the market presents performance today.

Comparative research board: performance pages from Citi, Ally, Wells Fargo, Bank of America, Fidelity, Merrill, Charles Schwab, TD Ameritrade, E*Trade, Robinhood, Cash App, Titan and Coinbase

08Research · Components data analysis

Research on key components

Deep dive into how competitors present balances, performance charts, returns, and benchmark comparisons, identifying the patterns customers already understand.

Component level analysis board: balances, performance charts, returns and cash flow modules from competitor products

09Synthesis

From hypothesis to a prioritized feature list

01

Synthesis

Consolidate research findings into themes and opportunities.

02

Hypothesis

Frame what we believe will solve the customer problem.

03

Feature list

Prioritization for MVP.

Output · PRD (product requirement document)

10Iterations & collaboration

Designing in the open

01 Design workstream

Iterate

  • Research
  • Design iterations
  • Product feedback
  • Dev specs
02 Leadership buy in

Align

Continuous alignment with design and product leadership at every checkpoint.

03 Ship ready checks

Finalize

  • Finalize content
  • Legal compliance
  • Accessibility checks
  • Dev checks

11JPMC Performance · Jobs to be done

Framework of the page

Each module answers a customer question. Hover a question to see the module it maps to.

Full JPMC Investments Performance page: summary numbers, market value chart, cumulative returns versus indices, and returns by timeframe across accounts

12JPMC Performance · Launched Q1 2024

Launch and release

Live in production
Launched Chase page: track and compare your portfolio's performance, with Track and Compare feature highlights

Track

Track your gains, losses, contributions and withdrawals over time.

Compare

View performance versus indices such as the S&P 500, and even the Consumer Price Index to measure against inflation.

How to video on chase.com

Post launch

A few months later…

We measure the usage of the site and
the components + voice of the customer.

We reassess to iterate or move to next idea.

14Reflection

Challenges & learnings

Challenge

Many teams, many agendas

Working across multiple teams with different agendas and timing.

Solve

Align before the big room

Get ahead of larger meetings, build alignment ahead of time with each partner.

Thank you

Journey Maps + Blueprints Archetypes & Mindsets