Dev Center
Creative Direction, UX/UI and User Research
A user-centered site for product managers and engineers to start building with Discover Bank's growing suite of APIs.
Overview
As both a bank and credit card institution Discover manages a growing suite of payment and security APIs, but they needed a platform to make these APIs accessible to small and medium sized product organizations.
Discover engaged Fahreneheit 212 with this brief along with a core concern. They held a belief that this segment of consumers, the more agile entrepreneurs, product managers and engineers, tend to be a bit skeptical of enterprise level tech.
Key Questions
What are the primary concerns when shopping around for potential API options?
Who researches APIs and who is making the decisions to actually sign a contract?
What is the right level of presentation layer between browsing through the API suite and diving in to the details of documentation?
Co-creation Workshop
To get the most out of our research we held co-creation workshops with small groups of developers in San Francisco. During these sessions we facillatated open discussions about work life & daily experience and conducted more focused breakout sessions to better understand core needs, motivations and tension points related to expectations for API websites. After two days of workshops we synthesized our data into 5 core personas, mapping user needs across the stages of Knapp's Relationship model.
Research Insights
Engineers go straight into technical documentation to validate feasibility, while managers are more concerned with process and price.
Ease of access is a primary concern and it must feel simple begin implementation.
In order to earn trust Discover needs to demonstrate clear use cases and show how the APIs are being used by other companies.
Design
Sprints
To kick off the design process, we explored variations around the theme of sectioning content for the 2 primary personas: users (engineers) and choosers (product managers, entrepreneurs). In these early rounds, grayscale wireframes tested in remote sessions were an excellent way to shape our content strategy and continually validate our designs with our audience. We used a GV inspired test & learn cycle and iterated all the way to our final tech handoff.
After testing, we learned that engineers don’t mind a brief introduction and all users benefited from clearly illustrated features & use cases. This empowered us to drop one of our ingoing assumptions about the audiences and reduce the complexity of our design approach.
Visual
Strategy
To collaborate with stakeholders, a mix of business leads and marketing staff, I approached visual design in a strategic manner guideding them towards an approach that would feel fresh to our tech-savy audience while still grounded in Discover’s brand.
Ultimately it became a balancing act between a clean rationalist aesthetic and a creative spark brought to life with animations, illustration, iconography and an extended color pallet.
Sparking Creativity
The key illustration style came to life in a background video on the home page.
Technical Structure
We set out to create an underlying strucutre that put clarity and functionality first. Crisp type hiearchy, balanced negative space, key colors and geometic forms all come together to optimize legibility and easy comprehension.
Style
Guide
To ensure the extensibility of our designs and help with final implementation we created an easy to navigate style guide for our development and brand partners at Discover.
With the launch of the Dev Center, Discover is honoring our commitment to providing the right solutions to improve efficiency for our customers. The simple integration empowers those customers with access to valuable digital services to better inform decisions and ultimately their business.
— Amy Parsons, SVP Head of Global Commerce, Discover