Overview
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.
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:
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.
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.