Citicards.com is Citi’s main marketing site for the credit card line of business, netting $3billion+ annually. In 2017, after 4 years of leveraging a previous design, my ux team was presented a sub-navigation element that was causing users difficulty in proceeding through any conversion flow.
The business owners had a simple ask to redesign one small piece of a user’s journey, but while creating the initial journey map, my team quickly discovered that this small navigation piece wasn’t a simple fix. The usability woes of the website extended far beyond solving the initial ask. There were many aspects of a user’s journey contributing to frustration stemming from the dated site design.
A high concentration of users would come to the site and wish to compare cards but when presented with an empty cart upon clicking 'Compare Cards', users would either bounce or click 'View All Cards' as a second option. A redesign of this secondary navigation was requested based on user data, with the end goal of making it easier for users to jump into a acquisition flow. My team was not sure that this solution would solve the bigger problem of user frustration, so we took a step back and began asking questions around user intent.
When asked, users answered questions on their intent of clicking these CTA's, the resounding answer was 'I want to find cards so that I can either compare side-by-side and narrow my search' or 'I want to browse all card offerings.' No matter the stage of consideration, users found the site difficult to navigate and lacking the functionality they needed to make a decision. Mobile users were almost completely left in the dark when it came to comparing cards, as the experience only responded down to tablet. So the mobile experience instructed users to rotate their phones, but was still unusable on 65% of phones.
With our initial design thinking sessions, we developed a design and content strategy with which we were able to pitch to business and successfully expand the scope of the request and introduce to the roadmap a fully responsive MVP of the entire site. This effort included Product Listings, Product Description Pages, Side-by-Side Comparisons, Homepage and redesign of a few key adjacent pages that would also land users into the main experience flow. Creating the cohesive experience across platforms was important to our users, even though mobile was more commonly used for research and desktop for the actual conversion.
Along the way we've uncovered and escalated technical issues and restraints that weren't apparent to anyone prior to the larger effort, but will be improved alongside the experience design. We've also been able to drastically improve upon Citi's product team processes to think with accessibility and mobile mentality first. This wouldn't have been possible without collaborative design thinking sessions with our internal clients and stakeholders, including user testing results with every iteration and sharing ownership of the design process.
While this project started off as a small scale ask with a quick turn time, seeing the potential at the get go was due to effective design thinking and strategy up front, and was continually reinforced by leading the team with optimism in collaborative efforts. A low-hanging fruit is easy to write-off, but as we learned when you treat every task with importance, it will become even more valuable to the stakeholders, especially when you begin to see results.
Visual Design: Rob Karlovetz and Rolf Nelson
Producers: Magen Stewart + Michael Baynton
Architecture: Dave Anderson and Rolf Nelson
Copywriter: Mary Ridgway
Strategists: Lou Capone + Lauren Armstrong