Overview

Civic Guides

The Civic guides were created to facilitate a more seamless transition as we merge 400K members into Civic. These guides teach users step-by-step how to perform tasks such as making a transfer or setting up two-factor authentication.

2023 - 2024
UX/UI Designer
Civic FCU

Our challenge

We needed a place for these new members to go so they could learn how to use the mobile app and online banking. We found that 52% did not use online or mobile banking every month, conducting most business in branches. This branch network is replaced by a substantially smaller network, highlighting the need to create how-to-guides. Some of the questions we posed included:

  • How large will this resource be?
  • How will users navigate to the guide they’re looking for?
  • Do users get rewards or badges for completing them?
  • Do we structure similar guides as courses to be completed?

Our goals

  • Create a learning resource for new members transitioning to digital banking
  • Identify the guides that would be most valuble to members
  • Find out how members want to consume the information

Solution

I started by researching similar financial institutions and companies that had learning sites to get an idea of how we wanted to build.

We determined we wanted simple, step-by-step lessons for both mobile and desktop. We also planned on eventually adding videos for most lessons. I wireframed the landing page first. I landed on tabs for navigation with cards that housed the guides. Initially, I designed the cards to be courses, and each course had 3-5 lessons grouped. You would jump into a course and complete the lessons. This became problematic as users would have trouble finding a specific lesson, so I made each lesson clickable so you didn’t have to jump into a course to find it.

Initial card
After interation

Testing

While this work was going on, our credit union was hosting summits across the state. We saw a perfect opportunity to do some moderated useability testing with actual members. Once the wireframe was approved, I began prototyping so we could test and gather feedback.

One of the biggest pieces of feedback we received was the hero and intro copy for the categories pushed the cards down and users had trouble locating them.

Tested iteration
After usability testing