Manage your account on the go

In 2015 Capital One released a brand new mobile app to help customers manage their account. Today the app is used by more than a million customers to view recent transactions, update account detials, and arrange payments. This case study is broken down into smaller challenges and what my role and input was to overcome those challenges and progress forward.

Product GoalsCreate a mobile app to allow customers to easily service their accounts, receive relevant information regarding account health and increase overall engagement with Capital One.

    Results Achieved
  • • Shipped both an iOS and Android app within 6 months, earlier than anticipated.
  • • Advocated for and implemented a human centred design culture.
  • • Influenced the product roadmap to cater for user needs rather than business oriented requirements.
    Skills Displayed
  • Product concept
  • Product roadmap
  • Accessibility
  • Interaction design
  • Visual design
  • Icon design

Execute an information re-architecture of the existing apps

The existing app allowed customers to view their previous transactions, account balance and next payment date, but fundamentally failed to help customers make a payment and navigate the app in a meaningful way.

Our goal was to allow customers to make a payment via the app as well as update the Information architecture (IA) to help customers easily see and browse to the content that they need.

Actions I Took

  • • Implemented a process to be able to conduct user interviews in-house.
  • • Gathered user needs and use cases first hand.
  • • Analysed existing IA's from direct competitors.
  • • Created multiple options of potential IA's, reviewed with internal stakeholders and customers, further iterated and refined with engineers and product owner.

The Outcome

  • • A diagram of the existing IA of the application, suitable to be expanded to meet future features and requirements.

Create an experience which respects platform norms and conventions

Roughly one third of customers had an Android device, however initial appetite from the business to create a native Android application was low. It was thought this would slow down development, and add additional unnecessary risk and complexity.

My partners in Engineering were becoming increasingly demotivated by the notion of a hybrid app, with heavy usage of non-native elements for the Android platform.

Essentially, Product was happy to progress with a subpar solution for Android, however Engineering wasn't bought in to the idea.

Actions I Took

  • • Conducted user interviews to hear first-hand what customers thoughts and expectations included.
  • • Studied and became a subject matter expert of Material Design by Google and how through its adoption we'd be able to create a consistent experience, even across platforms.
  • • Gathered and analysed customer device usage statistics to get buy in and reassure Product counterparts with regards to my design decisions.

The Outcome

  • • Became the first financial services app on the Google Play store to launch with Material Design principles.

Apply an appropriate brand style for the app

The existing Capital One brand guidelines and assets were created and optimised to work for print and the web, but not for mobile applications.

The challenge was to modernise the existing standards, suggest improvements, and execute on these recommendations.

Actions I Took

  • • Worked with the existing brand colour palette to find appropriate uses of colours throughout the apps.
  • • Collected and studied multiple font options, considering how this could also work with feature icons, line icons, and imagery.
  • • Collaborate with the existing Brand team to ensure buy in and build a long term relationship.

Improve the accessibility of the app

The app was put forward for accessibility review as part of the usual Capital One quality process and had come back non-compliant, particularly with regards to colour contrast. Product counterparts were also reluctant to make any large noticeable changes to the UI with fears of causing customer confusion and uncertainty.

The challenge was to modernise the existing standards, suggest improvements, and execute on these recommendations.

Actions I Took

  • • Deconstructed the colours and their usage criteria within the app, looking for similar hues from the enterprise colour scheme.
  • • Once appropriate replacement shades were found, I compared the foreground and background colours to make sure they passed at least a WCAG 2 AA rating.
  • • Implemented the new colours closely with partners in Engineering and Quality Assurance to quickly address the non-compliant colour accessibility issue, whilst minimising UI change.

The Outcome

  • • The app is now compliant with WGAC 2 AA rating.
  • • A rooted attitude within the product development team that a user with accessibility tools enabaled shouldn't be treated as a second class citizen.

My Design Process

  • • Understand the initial purpose of the feature
  • • Review existing solutions from both direct and non-direct competitors
  • • Create a vision piece to act as a stake in the ground, and gold standard solution
  • • Distribute a user process diagram, to be shared with wider business stakeholders and gauge any concerns or recommendations
  • • Regularly review concepts with users to gain insights and make any required adjustments
  • • Work closely with partners within Product and Engineering to ensure buy-in and alignment from day 1

My process is based of the teachings and methods of Jesse James Garrett from The Elements of User Experience. The process is broken into 5 phases.

Phase 1: Strategy

The earliest stage of product or feature development, attempting to understand the needs of the user and business. Methods such as data analysis, direct and non-direct competitor landscaping, and user research, etc are used.

  • • What are the users actual needs?
    • — Conduct research session with users, using a range of methods such as 1:1 interviews, ethnographic research, diary studies, etc.
  • • How does this align with the business or product aims?
    • — Conduct workshops and interviews with key stakeholders to gather further understanding of business opportunities and implications.

Phase 2: Scope

Working as a team of designs, engineers and produt owners, we discount and prioritise solutions, looking to specify the functional and content requirements and define the scope.

• How can our product or platform actually solve this problem?

  • — Work closely with partners in engineering and product to understand technical limitations and business opportunities/risks to prioritise potential solutions.

Phase 3: Structure

At this stage, the concept transitions from being less abstract towards more concrete.

• Information Architecture

  • — The core structure of where features, tools and information are held, and how the user can access it from within the product. Methods such as tree-testing or card sorting are used to verify or influence this structure.
• User Flow
  • — The process of mapping out the journey throughout the product to help the user complete the task. To further verfiy this, methods such as objective based testing are used during user research.

Phase 4: Skeleton

The objective during this phase is to fines the interface or tangible design. Multiple iterations might be done at a low-fidelity or greyscale to demonstrate the intent of a particular layout or element. The main focus is to further refine and optimise the information, interface and interaction design. Guerilla testing methods can be used to access the usability of particular interactions.

Phase 5: Surface

The final phase looks to refine the presentation layer of the product with a particular focus on typography, colour and animations. The purpose of this phase is to present the product in a form which aligns with the company brand, product, value and purpose in a concise and cohesive way.

Host ideation sessions with the development team

Methods Used

  • • Storyboarding
  • • Crazy 8's
  • • Mindmapping
  • • Role playing
  • • "Yes and"
  • • Information Architecture mapping

Use multiple techniques to create high-fidelity mockups

Methods Used

  • • Produce redline & spec documents
  • • Create interactive prototypes

Community Work

In early 2014, Capital One found itself in a place of change. Waterfall was quickly becoming dated, and Agile adoption was growing rapidly. The mobile app was said to be the flagship product showcasing the new, quicker, leaner, more agile way of working. Capital One was relatively unknown, particularly amongst the technology sector. The challenge was to be able to grow the reputation.

Actions I Took

  • • Worked the HR and Engineering to form a group of advocates, and create a process allowing Engineers to easily speak at events and conferences.
  • • Influenced key stakeholders in Engineering to use a portion of their budget to sponsor and attend student hackathons, suggesting this would help grow the graduate pipeline years down the line (I was right.)

The Outcome

  • • Attended multiple student hackathons, part of the Major League Hacking circuit representing Capital One.
  • • Influenced the strategy Capital One took with regards to attending events.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential and proprietary information. The information in this case study is my own and does not necessarily reflect the views of Capital One.