THE CHALLENGE
THE SOLUTION
Navy Federal Credit Union called us in with a pretty specific issue with their site. They had all the right elements and the articles that their clients were requesting, yet the experience was too frustrating due to the clutter of the design.
Collecting information from the client as well as field testing the current model, we shaped our understanding about the persona / user–Millenials, Military spouses and active service members. These users were seeking content around their future investments, auto loans, savings and more life insights… but the current site was confusing. Simply, we helped create a more direct path from the credit union members to the answers they sought.
THE WORK
As we began the process of troubleshooting the existing NFCU site, a map and plan was built once the direction was established. First task was to reflow the content hub, called MakingCents.
Tools: InVision, Illustrator, Photoshop
With our overall direction nailed down, the design / style and library of elements were finalized–followed by a more robust approach to the wires and flow of the site.
Final components and icons.
Tools: Illustrator
Building out the Wireframes is shown above in three stages:
1. Hand drawn sketches on iPad using Procreate app for basic placement and visual feel.
2. Collaborative wires built out to spec using InVision.
3. Final concept and approved Photoshop comps.
Tools: Procreate, InVision, Illustrator, Photoshop
The process of planning out the UX and building the comps to solidify the final project took six months. Over that time dozens of comps were built to visualize and approve the areas of Home Page, Content Hub, Article Type, Statistical Feature Page as well as tools such as Flash Cards, Scrubbers (user-activated animation), Quiz, Key Takeaway sections.
Tools: Photoshop, Illustrator, InVision
Starting with the Primary Topic page, the design features a strong headline and title area featuring a branded blue graphic behind that gives a nod to the Making Cents bug logo which is used to call out the Podcast features throughout the site. This top area showcases the article options offered in the Savings & Budgeting area.
Just below the menu above, this inset card allows viewers to easily choose ways to “Get Started” and offers “Guides” to assist in finding budget advice that is most-requested yet had been somewhat difficult to find before.
Bringing out a full standalone area for main Featured Content was a must. Users needed a way to understand not only where to find new articles, but notice when they were uploaded and available for consumption. Also, it allows the page to breath enough while enticing further exploration.
Tools: Photoshop, Illustrator
Client: NFCU
Creative Direction: Nathan Spoor
UX Lead: Nathan Long
Agency: PACE Communications
We see the area selected for announcing the NFCU podcast MakingCents, which was also chosen as the name for this valuable user education portion of the main website. Also featured are ways to interact with accredited counselors and Key Takeaways which give users helpful tips for understanding their path to financial freedom or strength.