Overview
Project Details
Project DescriptionUsing your rewards to pay yourself or your business back for a specific purchase can make it feel like you didn't even spend any real money on it, perfect for a guilt-free splurge. The Capital One "Cover Purchases" redemption for cash cards and "Cover Travel Purchases" for travel cards allow users to do just that. With this being one of our most popular redemption methods, it was time for some updates to modernize it. This project did so by making it more user friendly, having it match our current design systems, and especially making it more accessibility friendly.
Due to some delays in development, this release was split into two parts. The case study will be updated to reflect more changes when the 2nd part is released in March 2024. Want to learn more? Scroll down to learn more about how the updates improved our users' experience as well as the process I took to aide in its completion! |
Design Process
A popular feature needs an updateOur Cover Purchases redemption methods are some of the most popular ways to redeem rewards. Yet, it hasn't been updated in six years, leading to an outdated user interface causing unnecessary customer friction, looking out of date with our current design system, and worst of all, causing difficulties for users needing to use accessibility tools such as screen readers.
Given these issues and its popularity, especially with Small Business card holders, it was time to refresh Cover Purchases. |
|
|
Scoping out the workAs I wasn't the original designer of the various Cover Purchases, I analyzed the original designs and reviewed documentation relating to the customer journey and design decisions. My aim was to get a better understanding of how it compared to our current design system and what accessibility issues were flagged.
Based on accessibility reports and the review, I had four main priorities:
|
Making our designs more accessibleFirst and foremost, my priority was to make sure our designs were as accessible as possible. Our biggest changes included:
While improving accessibility, these changes helped inform what our UI modernization would look like, positively impacting all our customers. |
|
|
Modernizing the UINext, I wanted our feature to reduce user friction when redeeming their rewards while better presenting data for faster comprehension by:
|
Post-design reviews
Throughout the process, I held weekly meetings with my product partners for both sides to provide updates and ask any questions they had to make sure we were all aligned. I also shared my designs in critique sessions to get feedback from other designers.
Once the designs were complete, I ensured that all the designs were componentized for our central library and had proper auto-layout. The designs then went through our Experience Design review process, checking to make sure it aligned with Capital One standards and met all accessibility requirements.
Once the designs were complete, I ensured that all the designs were componentized for our central library and had proper auto-layout. The designs then went through our Experience Design review process, checking to make sure it aligned with Capital One standards and met all accessibility requirements.
Developer Handoff & Build QuestionsAs I got ready to handoff my designs for development, I made sure to create detailed annotations and held a few meetings to go over the designs with the developers live and understand what documentation would be helpful for them.
Throughout the process, I emphasized open communication with my tech team and made sure they felt comfortable asking me any questions they had about the designs. This enabled us to problem solve quickly to ensure the development could keep going. Our communication became critical as we learned about new constraints and a few mismatches between what was in the original designs and what was in production at the moment. |
Some unforeseen challenges
Development is never a perfect process. Beyond the mismatches, there were some other challenges that impacted our original development timeline.
One major roadblock that we faced was that while the web development was going well, the mobile team was facing some major roadblocks and capacity constraint. Due to this roadblock, product, design, and tech got together and made the decision to only release the updates to web, with mobile app updates to come sometime in the future (this date is still TBD).
Later, we had to make the hard decision to split the release into 2 parts as the other changes would delay the launch of this feature into early 2024. After some discussion, we recognized that the accessibility updates were a major priority for us and we didn't want those updates to be delayed.
One major roadblock that we faced was that while the web development was going well, the mobile team was facing some major roadblocks and capacity constraint. Due to this roadblock, product, design, and tech got together and made the decision to only release the updates to web, with mobile app updates to come sometime in the future (this date is still TBD).
Later, we had to make the hard decision to split the release into 2 parts as the other changes would delay the launch of this feature into early 2024. After some discussion, we recognized that the accessibility updates were a major priority for us and we didn't want those updates to be delayed.
Design QA
After almost a year since I designed the work, I was excited to design QA the build! This essential step helped ensure the customer experience going to production matched the experience I envisioned. Given our challenges, not everything was going to be exactly the same, but through our constant communication, we were able to deliver an experience that got as close as technically feasible. In QA, we discovered some minor errors related to spacing and text, but those were quickly corrected, and we were able to release!
New changes to a beloved feature
Main Changes
Accessibility Updates
Our features should be easy to use for all users. Updating Cover Purchases to do so was one of our biggest priorities. By ensuring all the information is always present and that our error messages are next to the error, it allows assistive devices to better read our feature and making it easier for the user. |
Transaction Table
The transaction table gives users a full picture of how they are using their rewards. By doing so, they can make sure they are making the right decision for their account. It also uses a familiar pattern for many people, especially small business owners. [Another major reason will be shared when Part 2 releases] |
Wait for Part 2 to hear about another big update!
When Part 2 releases in 2024, the final main change will be announced!
When Part 2 releases in 2024, the final main change will be announced!
Reflection
This was the first project I worked on from start to launch, giving me valuable experience not only on the design side of the work, but also how to better communicate and partner with the developers on the tech team building my designs. Working to understand the needs of my tech team let me tailor the documentation to their needs, ensuring a smooth hand off experience.
This project also taught me how to be flexible, proactive, and influential. There were a lot of bumps along the way and a part of my growth as a designer was navigating those ups and downs. Whether it was the fact that some of our design components weren't available yet on the developer side or that there were too many back-end complications to launch the mobile designs, these conversations and moments improved my ability as a designer. This led to a better understanding of other parts of the business and how different parts of the company come together to launch a new feature.
This project also taught me how to be flexible, proactive, and influential. There were a lot of bumps along the way and a part of my growth as a designer was navigating those ups and downs. Whether it was the fact that some of our design components weren't available yet on the developer side or that there were too many back-end complications to launch the mobile designs, these conversations and moments improved my ability as a designer. This led to a better understanding of other parts of the business and how different parts of the company come together to launch a new feature.