Reshaping Digital Checkouts

Web • IOS • Wireframes • Flowcharts • User Interface • Animation • Prototyping

Summary

Chase Developer Center

The Developer Center is a platform for developers to securely integrate their digital checkout solutions with Chase. As a financial institution designer, people expect interactive experiences and real-time payments in everything they do.

Problem Statement

How might Chase differentiate itself in the fast-paced financial services industry and compete with agile start-ups?

Who are we solving for?

I looked at software developers who want to upgrade their company's payment systems.

Early business goals

• Add popular payment methods (Apple Pay, Google Pay, or Chase Pay) to checkout flow with ease

• Provide a simple process to add, process, and experiment with payments

• Focus on small business initiatives and align with their brand

• Shift from a product-oriented approach to an experiential one

• Bridge payment systems with analytical applications

Early Challenges

• No universal solutions for adding a payment system

• Ready-made solutions are widely accepted but not easily understood

• Integration of the right payment API is crucial for the success

• Increasing demand for interactive experiences in all aspects of life

Phase One: Why are customers utilizing competitor products

To better understand the product's standing, I conducted interviews with small business users who utilize our competitors and explored forums for reviews. It quickly became evident that Chase was lagging, both in terms of user-friendliness and its outdated system.

Interview Finding:

• Setting up a Payment API is very linear, and gets complicated quickly

• Key product details are hard to find

• Apis can get complicated really quickly, so it is important to create straightforward documentation

• It’s time-consuming and potentially expensive to figure out which product is needed for your company

Interview Assumptions:

• Users want fast and easy product setups.

• Product details should be clear and scannable.

• Users prefer straightforward documentation to learn more about the product.

• Without simple details and explanations, it's difficult to determine which API is the right choice.

Phase Two: Defining success with user surveys

To design effectively, I first needed to define success and understand the user. We surveyed 50 small business users who were either using a payment system or looking to switch to one.

User flow

The Design Process included creating a User Flow. This is just one of many possible user flows that was created to ensure a seamless user experience.

Visual Design

The site uses bright, fun colors with blue as the primary link color and dark grey for text. Other colors are used for emphasis to maintain a fun and on-brand feel.

Wireframes

I start creating rough drafts and basic layouts by sketching, white-boarding, and making wireframes.

Great! Now that we have a basic structure and hierarchy, it's time to move on to user testing.

User Testing

We tested our assumptions with 8 users using a basic paper prototype to validate the concept.

I used low-fidelity wireframes to test the initial flow and gathered feedback on the content of the landing page, the product matrix, and the descriptions on the product detail page.

Further testing and refinement

I tested the design further and refined it through three rounds of testing using increasingly higher-fidelity prototypes. Each round included 6 to 8 user sessions lasting 60 minutes, using an Invision prototype.

Landing page

The second landing page iteration was too whimsical and didn't convey the right message for the brand. The navigation was moved to the top of the page to make it more accessible.

The final landing page aimed to create a consistent and branded experience. To achieve this, I updated the iconography to convey a more technical feel.

Products page

The initial products page lacked hierarchy and required a lot of attention..

The third iteration of the products page is cleaner and has better hierarchy. Each category has a title and a different layout to differentiate it from others in the same group. This makes it easier to scan and find the right payment solution.

Support page

Users wanted more specific support for setting up the product rather than general support. Based on this feedback, I asked users about the most complicated parts of the API set-up and created small informational blurbs to support these topics.

Final Product

Now it's time to apply the branding and user testing to the project

Chase Developer Center (before login)

Before login

The overview page provides users with enough information about the product before login. The navigation is centered and precise for easy page-to-page access.

Chase Developer center (after login)

After login

After signing in for a Dev Center account, the user gains access to the actual products. The focus of this stage is on highlighting the products and their documentation. The user is more interested in implementing the solution at this point than exploring additional products.

Mobile screens

Conclusion

I designed for a big financial company competing with small payment startups, which was complicated. Small companies have an edge because they move quickly, but dealing with company politics was a challenge. Through this project, I learned to value good research practices, make assumptions while being open to change, and prioritize inclusion and accessibility in design from the beginning.

If you're interested, I can provide more details and examples of this project. I'm always happy to chat about design!

Credits

Sena Hubler
Senior UX Researcher extraordinaire

Deborah Foley
Design Manager with endless energy