This microsite was designed to guide a user through their first 90 days after receiving approval for a Citi card. The team’s objective was to empower new customers with helpful insights that enable them to know what’s next and how to optimize their digital account experience. We wanted to preempt any questions that a user would have and display informative details, like onboarding milestones, in an easy to consume way. Our initial ask was for a white label experience that could be skinned out for Citi partners in the future with particular focus on minimizing call center volume from new customers.
Creative Team - UX/UI Designer: Kara Konop ACD: James Guest CD: Michael Brandt Experience Lead: Rikki Spacey
We wanted to avoid strictly grouping content into FAQ-type categories like ‘Payments’ or ‘Rewards’. Instead, we decided to sort content into buckets that align with the milestones in the user’s onboarding journey. This approach helps the user avoid gaps in knowledge by creating a natural path for them to learn about the entire ecosystem. We also decided to approach our designs through a lens of flexible modules. That way, white label content could easily be removed for partners that it doesn’t apply to without effecting the overall structure of the page.
After several rounds of feedback from the client and a handful of iterations, we narrowed our design to an intuitive, informational site that introduces users to all of the benefits of their new card. We worked closely with the copy and content teams to make sure our messaging was supportive and confidence building for the user. We focused on visualizing the content for easy consumption through the use of instructional walk throughs.
The ‘What’s Next’ module is a crucial tool for a new user as the tabs provide a chronological timeline of important milestones and events to expect. This layout met Citi’s requirement for providing a customer with a to-do list upon receiving their new card. Links with arrow icons lead users to anchored pages on their card management site, known as Fusion, while links with modal icons open interactive, instructional content within the landing page.
This module features one of the first large interactive walkthroughs on the site. Upon clicking the ‘How to create your account online’ link, a step by step walkthrough opens in a modal to show the user how to create an online account. In future stages, this could be upgraded to an animated demo of the registration process.
In order to make the step by step instructions clear, we illustrated them in a style that is easy to navigate and understand. We chose to keep them greyscale so they could be used for multiple partner sites without needing to change the color to suit a company’s branding.
On desktop, all of the steps are listed out on one page and the user can click through them with the arrow buttons, with the image on the right updating as they go along.
We sprinkled subtle ‘quick tips’ throughout the landing page to provide users a bit more guidance throughout their journey. These can be updated in the future to address common user questions. Some of these are simple statements, while others open up instructional modals.
With this section, we are introducing the user to their online account on Fusion and encouraging them to pay their bill online. By using a mockup of the Fusion site, they can get a good look at what their dashboard will look like once they are logged in. If they click on the ‘How to pay your first bill’ link, another step by step modal will open, showing them exactly what steps to take.
The final element of this landing page is the ‘How to’ section. This functions as a library of instructional modals that are located throughout the site, but also feature some additional ones that the user may not have encountered yet. They contain instructions and answers for many key processes of managing a Citi card account. Additional modals can be added in future phases as Citi sees fit.
We tried out many different visual IDs before finding our final solution.