Redesigning a Bank Loyalty Site
This project was a redesign for a Bank Loyalty Platform that we host on a web application. On the platform, users can earn additional points or cash back by shopping through the links provided. The client had done heuristic analysis on the whole loyalty experience to discover critical issues and therefore requested a redesign.
UX, UI, Client Management, HTML Prototyper
Graphics Designer, Jr UX Designer, Copyrighter, Account Manager, 2 Developers
8 weeks for design
2 weeks for HTML
Goal: Redesign the site to make it more usable and intuitive: reducing user friction and increasing engagement.
Client performed heuristic analysis and noticed various issues. Their designers made suggestions for the site
High Level Requirements
We collaborated with suggestions using UX best practices and our expertise to develop requirements
We created wires based on the agreed upon requirements after consulting developers
We proposed a 10 user, 2 week usability study, iterated on the design, increasing perceived value and fixing the IA.
Client was very happy with the design and it improved the relationship with client, 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 finer details of the experience to ensure top quality including accessibility.
High Level Requirements
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 for the redesign 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 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 mandated by the client (we did do sketches on the side). We also agreed we could change the requirements if needed.
Initial Grayscale Wires
We performed competitive analysis of major e-commerece 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 short 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 our opinion and heuristic analysis. The client agreed.
Because of the short time, we proposed to use everyone's social network for usability test participants. 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 & identified various issues with the new site, but most interesting was the user's false perception of the program, which we fixed by on-boarding users throughout the experience.
We presented the findings and designs to the executive team who were very excited about the risks we avoided in this short study.
Note: The requirements did change due to the usability testing.
We followed the branding guidelines as closely as possible, taking the wires and applying color, but we were flexible enough in order to meet the new requirements. We collaborated with the client's product manager on things that did not meet their guidelines entirely.
We wrote out functional specifications that were implied in the final visual design. 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 implemented additional analytics to show in more detail which features are being used and which are not. This will help us in our next redesign.
We successfully implemented all designed features and are now waiting to launch the product. We added analytics to help us for the next redesign.