AmpliFI Rewards
How might we create a modular, white-labeled rewards platform for thousands of small-midsized banks?
Team Description
Team of product designers alongside developers from Tandem developers and ampliFI developers. Stakeholders included CTO and Product Owners from ampliFI.
Design Task
Design and develop new, end-to-end, responsive user experience within ~6 months. Existing website is outdated and not accessible. Create a modular, white-labeled, experience that meets the business needs as well as the user needs.
Scope
10, 2-week sprints
Phase 1: Research, interviews, user journey defintiton and Landscape Analysis
Phase 2: Design and Implement new interface using existing backend technologies and up to date accessibility guidelines.
Hard Stop: November 2020
User Interviews
This process was normally held in person, where we would interview individuals at their place of work, however this was in the beginning of 2020, everything had to be completely remote.
We recorded every user interview and transcribed our findings with virtual postit notes. We interviewed mostly people at ampliFI and people who represented customer service to find pain points from the front end users.
From these notes we synthesized our findings into categories and “How Might We’s”. From there we created a timeline of features and capabilities for the project as a whole.
User Journeys
We found that the internal processes were much different than the external, so with that, we created two types of journey maps. I was in charge of these. The internal creates a flow chart for how all the processes interconnect while the external (cardholders) users are categorized by different use cases. I.e. Gaby Gift cards is a persona of a person primarily interested in redeeming points for gift cards.
From there we took notes from the interviews and identified pain points within each flow.
Landscape Analysis
The landscape analysis laid out several benchmark examples for us based on the different functionality we imagined working with in the upcoming sprints. We grouped the websites and mobile apps by feature but also included our insights from the interview process.
Sitemaps & Wireframes
The initial wireframes were basically made to give a general outline of the amount of work we would be taking on. These wireframes helped with site mapping and comparing the existing product to what the product could be with a more informed set of user flows.
Component Library
The component library was key to this project. Being a white labeled product, these components need to be customizable to all the individual banks we were serving. We decided to do that through the logo in the header as well as colors throughout the page.
Along with our basic atoms and molecules, we created complex and modular elements that were fully responsive and that met both user and business needs. This element helped banks advertise events as well as global product offerings in a 1-3 card orientation.
Within each of these components also lived interactions notes for the developers. The developers were with us every step of the way as well as we included them in our design process.
Iconography
We also designed and tested a series of custom icons for this project. We did some quantitative testing on the icons to find the most appropriate designs for the navigation we wanted. These icons were no ordinary icons though. They adjusted in color based on the bank brand colors AND tested against current WCAG accessibility standards. We did this by contrasting the banks existing primary and secondary colors against our white background interface If it didn’t comply with current AA accessibility, the colors reverted to the default neutral colors.
Design
The design was pretty minimal and clearcut. Based on criteria we filled in the content and created more components to put into the component library. Every component in the website was componentized (which was something I hadn’t experienced before).
The individual bank branding was incorporated throughout the design in small UI details within each of the componentized modules. Each bank had different amounts of offerings, so the main, iconic, navigation had toggles on the back end to turn off and on. One bank might have one header advertisements, only 5 main navigation items and 2 featured offerings. There were over 2000 different banks so this customization was very important.
In the end we implemented most of what we wanted up until November 2020. This site also doubled as an eCommerce platform so it was a marketing site, banking profile product as well as a place you could shop for rewards.
There was a lot of red tape, but our team navigated the complexities smoothly. This was a fun project that followed a process I’d like to follow in the future.
