Website Relaunch
OnPath Federal Credit Union is a mid-size financial institution based out of Southern Louisiana that has been assisting its members since 1961. Having gone through a rebranding in 2016, the company is trying to modernize its appearance and increase its digital representation.
Role
UX Designer
Tools
Figma
Team
UX/UI Designer
Graphic Designer
Copywriter
Developer
Duration
24 weeks
How Does a 60+ year-old Credit Union redesign its website to look brand new?
OnPath’s current site had been updated last in 2016 and lacked consistent upkeep, resulting in various issues for users.
Primary Challenges:
-
Reorganizing page layouts to improve the visual hierarchy, enhance communication, improve user experience, and drive audience engagement.
-
Updating the branding identity to ensure consistency and create a seamless experience.
Solution
After a series of audits to see the depth of the issues, I worked with the marketing department to
-
Clarify Major Actions for users
-
Elevate Branding to a more modern look.
-
Restructure Visual hierarchy on product pages
Navigation was also tackled and can be read in this case study.
Design Process
My team began by
-
Conducting a series of Stakeholder Interviews to see what Business Goals to prioritize.
-
We released User Feedback Surveys in order to identify pain points and potential for improvements in the site to gain a deeper understanding of how users typically use the site.
-
While gathering feedback, we also conducted a Comparative Analysis of competitors on a national scale to study their layouts and hierarchy of information.
-
Then we studied the SEO traffic to cross-reference information from users based on what Google Analytics told us.
Business Goals
-
Increase lead generation
-
Increase Sitewide Conversions
-
Improve Search Engine Generation
UX Goals
-
Reorganizing the Site Map
-
Clarifying Navigation
-
Improving visual
-
Updating the Branding.
What were people saying?
Well How Do People Use Our Site?
With all the data we had gathered, my team got started in making plans and visualizations for our ideal solution, focusing first on how users interact with the site.
Layout: The Old
There were a few problems with the page layouts:
-
Lack of CTA
-
Unstructured Information
-
Endless Scrolling
-
etc
Layout: The New
So I took the time to come up with a few options for page layouts and even made sure to do some AB testing to confirm the effectiveness.
The final layout decision included:
-
Prominent CTA
-
Clear Visual Hierarchy in Typography
-
Effective Usage of White Space
and plenty more.
Style Guide
A common user and stakeholder complaint was that the branding on the site was inconsistent. Unifying the branding meant focusing on creating graphics that used the signature black and white images with dynamic characters that "popped" out of the frame.
Establishing a Style Guide became imperative to ensure that future designers followed an established look and feel for the site.
Actions
-
Existing Brand Colors were used and tested for contrast, then paired based on their passing. A11y was used in figma to test contrast for AA accessibility standards
-
A library for different elements was created with set naming conventions, usage considerations, and editing guidelines for future graphics.
-
Templates for pages based on their purpose that could be copied and reused, primarily for landing pages.
This also prompted conversations in the marketing department about a maintenance pipeline to ensure there aren't duplicate pages and that other departments update information correctly.
Design System and Documentation
A problem in the previous site was the lack of consistency in new pages. Anyone in the marketing department could create a new page but there was no set documentation on page layout, visual hierarchy, and required modules.
To ensure future site updates would follow the existing style, regardless of the person working on the page, I created a series of design documentation in Figma to ensure consistency.
-
Typography: Previously, Montserrat was used regularly, unless Lato or Open Sans was used, without real rhyme or reason. Primary headings use Montserrat, Paragraphs are in Lato, and every other heading uses Open Sans.
-
Colors: There were set brand colors already used in the brand, but those colors were not clearly labeled for usage. Now there is a set primary and secondary color with designated accent colors.
-
Buttons: Buttons were clearly defined on a primary, secondary, and special use basis.
-
Iconography: Since this site was being built in Hubspot, they had a set provider, FontAwesome, which provided all necessary icons.
-
Forms/Feilds: These are set by Hubspots theme with some variations decided by my team.
-
Custom Graphics: Since the graphics were such a large portion of this redesign, I made sure to leave a section dedicated to how to duplicate the look with small/medium/large sized squares.
Outcomes
Overall, Stakeholders were very excited with the changes, particularly on the updated visual hierarchy, clean navigation, and updated branding.
Our team was able to accomplish our goals, with our main hiccup being that certain design features needed to be amended to reduce development time in Hubspot's CMS. Taking time to focus on research proved to be vital in determining the most important features to focus in on during early design decisions.
