Capital One Android & iOS App

In 2015 Capital One released a brand new mobile app to help customers manage their account. Today the app is used by nearly 1 million customers to view transactions, make payments.

This case study is broadly broken down into smaller challenges and what my role and input was to overcome the challenges and progress forward.

Product Goals

Create 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.
  • • Evangelised and implemented a 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, user process diagram, accessibility, usability, interaction design, visual design, icon design


Syeef always takes the time to listen and take into consideration comments about the designs. His attention to detail also serves him well and ensures consistency across designs. He also makes a very good effort to communicate with the Nottingham team, considering he’s based in London.Romain Francez - iOS Engineer, Capital One

Great work this year despite often being under resource challenges and having to deliver solutions you consider to be a compromise. This shows maturity and pragmatism whilst retaining your positivity.Jack Stanton - Product Owner, Capital One

It is so easy to use and keep an eye in my spending and paying off what I need to pay. I would recommend this app and capital one every time Android User

So much easier I can now control both accounts... Love it iOS User

Since the update this has been even better to use. It's fast & has all the features you need to handle your account effortlessly! Great job Capital One! Android User

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 Outcomes

  • • 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 Outcomes

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

I summarised my learnings and gave a presentation at Mobile Notts, a meetup of mobile developers and designers in Nottingham. It was shortly after Google had announced Material Design and the community wasn't sure how to adopt and integrate it into their applications.



Thanks Syeef, thought the material talk was good tonight, thank you. And you handled my 'prescriptive' with great integrity - I wasn't having a go - I'm having guilt pangs in case it felt like that! you should do more presenting btw - very relaxed yet assured. An attendee of the meetup

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 Outcomes

  • • 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.

This was presentation I was invited to share at Android Summit in McLean, VA, USA discussing the journey we took to help raise Android as a first class citizen within Capital One.



'Ridiculously connected’ is a phrase that comes to mind when I think about Syeef. He has expertly consulted on event marketing and developer relations for the past year. Side of desk, he passionately led and established Capital One as a leader amongst the UK hackathon circuit, creating slick talk and demo slides, staffing, and bolstering our Brand by advising on our the holistic presence at said events. I was particularly impressed with Syeef’s ability to help speakers communicate complex ideas with very simple and lovable designs. I am proud to have him on my team and as a representative of our Brand. I hope to work with Sy for years to come! Amanda Aschenbrenner - Talent Brand Marketing, Capital One

Let's have a chance to learn more about each other.
Drop me an email, and let's grab a coffee. :D

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.