Merchant Rewards - Bank of America

Visual, Interaction, Lead Designer


Overview & goals

Merchant Rewards was a new credit card rewards program that was built for the mobile app and website. As a hybrid visual and interaction designer (as well as the project lead), I played a vital role in the conceptual and executional stages of the design process. Since Merchant Rewards was a brand new program, there were a lot of new requirements and rules to get familiar with. Our biggest goal was to entice our customers to enroll in the new program while also making it easy to understand.

Challenges

The biggest challenge was understanding the intricacies of the program and figuring out an experience that would communicate everything to the user. There were a lot of legal risks involved which users could easily miss, so it was a huge obstacle trying to balance a lot of instructional content while also keeping the interface clean and intuitive. The other major challenge was designing for a new rewards experience that was unique in some ways. Making it intuitive and simple would take a lot of user feedback and refinement.

 

Understanding and defining

The program required a lot of initial knowledge transfer, brainstorming and ideation sessions with the product team to really understand and define the experience. We organized a two-day workshop with all the stakeholders to gather all the necessary requirements, ideas and general input in order to make informed design decisions.

After the workshop, we had more than enough input which we began to synthesize and define into a general concept. We continued working with the product team to make sure we were moving in the right direction and not leaving out any important details. All of our findings and recommendations were then added to a final research document which was presented to design and product leadership. It was approved and praised for the amount of detail and understanding of the program.

 

Crafting the concept

Based on our understanding and definition of the program, we did some research on competitive analysis and also found similar examples of rewards programs that other companies were using. There wasn’t anything we found that was exactly like this new program, so the solution we’d need was somewhat unique.

We then began sketching out ideas and flows through many virtual white-board sessions. As the interaction designer, I sketched out a lot of wireframe flows and iterations to really think through all the possible solutions. I tried to step into the mind of the customer, and think about what they’d need to know in a very simple, introductory fashion. I came up with a lot of different approaches to the flow of the experience as well, and how that would figure into the ease and understanding of the program.

As one of two visual designers, we began adding hi-fidelity visuals to the wireframe concept.  Bank of America had just conceived a new design system which included specific guidelines around color, typography, iconography and other design components. The design system was implemented into the InVision prototyping tool and we were one of the first in the company to use it to design our screens. While some guidelines were necessary, there was still some creative freedom to add our own personal touch with illustrations and photography. After many rounds of reviewing hi-fidelity screens, we landed on a visual direction which we all thought blended well with the flow and functionality.

 

 User studies & refinement

Our user researcher led the team through a series of four qualitative user studies with our customers. As a team, we decided on a set of criteria we were looking for in customer prospects which could help us get the most valuable feedback on our designs. At the same time, we also wanted a wide array of customers across different demographics. While the customer recruitment process was running, we put together functioning prototypes of our concept and hosted them on our server for customers to interact with.

The first user study ran for one week, averaging around four to six customers per day. The user researcher moderated and led each customer through our experience getting their unbiased and honest opinions on it. The prototype was pre-loaded onto a mobile device and had a camera attached to it, so we could see exactly how the users were interacting with it. We could also see and hear their expressions and reactions to each screen.

After the first user study was complete, we gathered all the feedback and data and synthesized it to figure what succeeded and what failed. The first study was very humbling because what we thought was an intuitive experience did not perform well with our customers. Most were confused about what they were earning with the new rewards program and would not enroll.

The good thing was that we had three more studies to refine the concept and try to improve on the areas that were failing. With each new study and iteration, the feedback and understanding of the program progressed with our customers. By the end of our fourth study, we felt very good about the experience, and were ready to present our final designs to design leadership.

bigimage_merchrewards.png

 Outcome

Successfully executing the experience for both the mobile app and responsive web was a major task for a very thin design team. I led the team through many review sessions with our development team to walk them through the entire experience at a very granular level, including different customer scenarios, dynamic content and error messaging. It was a huge undertaking, working simultaneously with separate mobile and web dev teams, but we were able to deliver everything they needed to build pixel-perfect screens.

Overall, the stakeholders were all very impressed with the entire process we ran, in order to shape and evolve the program into a stellar mobile and web experience. The program is set to launch in the fall of 2020. The entire design team is very excited to see it go live.