Redesigning a Bank Loyalty Site
The goal of a bank loyalty program is to drive consumers to spend more with a certain credit card, creating a habit that makes their card the “top of wallet”. Users can earn additional points or cash back by shopping through our loyalty site. For example: a user could earn 10% cash back by shopping at a certain retailer.
The project started after the client did heuristic analysis of the entire experience and wanted to fix certain issues, together with a bucket list of previously identified issues.
UX, UI, Client Management, HTML Prototyper
Graphics Designer, Jr UX Designer, Copywriter, Account Manager, 2 Developers
8 weeks for design
2 weeks for HTML Prototype
Goal: Redesign the site to make it more usable and intuitive: reducing user friction, increasing engagement and perceived value.
Client performed heuristic analysis and made suggestions for the site
We collaborated on the suggestions using UX best practices, competitive analysis, and our internal expertise to develop requirements
We created wires based on the agreed upon requirements considering technical feasibility and experience impact
We proposed a 10 user, 2 week usability study, iterated on the design, increasing perceived value and optimizing the IA
Client was very happy with the design relationship with client improved, leading to other opportunities
We wrote the specs using the results from the usability testing and best practices, continuing the theme of max perceived value.
I provided an HTML prototype, worked with the developers on the implementation the experience to ensure top quality, including accessibility.
The client performed heuristic analysis, identified areas of opportunity and came up with a list of requirements for the redesign. We went through the list with the client to understand each request deeply. Most requests were concerned with the mobile experience and navigation. Our intention was to increase the program's apparent value and to make it more usable.
Over multiple sessions, we finessed the requirements based on: technical feasibility, impact on the user experience, competitive analysis, our internal expertise and the time-line requested. Although it is not ideal to decide upon requirements before design, we had to use this process as it was comfortable for the client (we did sketches on the side). We agreed the requirements could change if needed.
Initial Grayscale Wires
We used our competitive analysis of major e-commerce sites and other loyalty sites to get a feel for what users were expecting and created the wires. We then took the requirements and decided to wire frame the screens that were most critical: what was changing and what was in the user's critical path.
Once the wires for desktop and mobile were completed and approved, we proposed a small usability test to ensure that the design was actually better than the new site. We explained how risky it would be to only base the design on heuristic analysis and our opinions, the client agreed.
Because of the limited budget and project deadline, we proposed to use everyone's social network for usability test participants with varying levels of technical and banking confidence. We quickly created an email that was sent out and scheduled the participants.
The test consisted of 4 rounds:
- Round 1: Desktop
- Round 2: Mobile with findings from round 1
- Round 3: Desktop with findings from round 1,2
- Round 4: Mobile with findings from round 1,2,3
By staggering the usability tests like this were able to test both mobile and desktop in a short amount of time. We fixed and identified various issues with the new site, but the most interesting finding was users’ false perception of the program, which we fixed by adding onboarding at various touch points.
As expected, the requirements did change due to the usability testing. We presented the findings and designs to the executive team who were very excited about the design and risks avoided.
We followed the branding guidelines and toolkit, taking the wires and applying color. We collaborated with the client's product manager on things that did not meet their guidelines entirely but helped create a stronger visual hierarchy.
We wrote functional spec based on final visual design and usability testing. We took great care to leave them generic enough that that could be interpreted in more than one way should we uncover more technical feasibility issues during the build (we always do).
I created an HTML prototype that the developers could use for their implementation. Once it was coded, I worked closely with the developers ensuring the design not only met the functional specs, but had the intended outcome of the redesign, and met all accessibility standards.
We successfully implemented all designed features and are now waiting to launch the product. We added analytics to help inform further changes.
The process could have been made better if there was more collaboration between the parties in charge of doing heuristic analysis and the design team at Affinity.
- Usability Testing
We should have also involved developers in the usability testing to get more buy-in about the “complicated” technical challenges in meeting today’s consumer expectations for e-commerce sorting, searching and filtering.
- Selling Design
In cases when requirements were being confused by developers and the client, we could have created additional clickable prototypes or user flows to increase clarity.