Jack Henry Website
A Solution-Focused Website with a Distinctive Brand
Role: Product Design / Art Direction
Agency: Sagepath Reply
Time: 2022 — 2023
The Client
Jack Henry is an esteemed S&P 500 company catering to approximately 8,500 clients nationwide. Specializing in financial technology solutions and payment processing services, their primary clientele comprises community banks and credit unions. Jack Henry assists regional banks and credit unions in mitigating risk, fulfilling regulatory requirements, and enhancing their online banking services.
Seeking to consolidate their various brands into a unified entity, Jack Henry approached us for guidance in rebranding and redesigning their website.
-
Jack Henry faced the challenge of managing four overlapping and conflicting brands, each with its own product-centric website. The primary challenge was to create a unified platform that seamlessly integrates all brands while maintaining a consistent and unique design.
-
We started by developing a new branding strategy for Jack Henry, emphasizing a warm, human-centered approach aligned with their "connect possibilities" brand positioning. This branding was blended with an innovative, high-tech feel to reflect Jack Henry's cutting-edge solutions.
To support this unified approach, we created a comprehensive digital design guideline and component guide. These resources provide clear directives for maintaining brand consistency and design integrity in future phases, ensuring the platform can evolve seamlessly while staying true to the new branding.
Concept Phase
We developed two distinct design concepts for the homepage and navigation:
Concept 1: People-First Approach
Heavy use of photography and circular elements
Rounded edges for UI elements
Solid color shapes harmonizing with the overall design
Concept 2: Ambient Gradient Approach
Heavy use of ambient gradients
Custom branded illustrations instead of relying on photography
Circles limited to UI elements, with custom illustrations and linear elements layered over photography
The client appreciated both navigation explorations and favored Concept 1 for its people-first emphasis. However, they wanted to incorporate elements from both concepts. This collaborative feedback led to a refined design that blended the strengths of each direction.
UX and Content Strategy
Given the consolidation from three separate platforms, reorganizing the vast amount of content presented a significant challenge. Effective site mapping was essential to enhance the user experience. We carefully restructured the content to ensure logical flow and easy navigation, helping users find information quickly and efficiently.
Design Implementation
Based on extensive UX wireframing and research, we implemented a design featuring circular shapes for images and subtle gradients in strategic areas. Linear elements guided users through content sections, ensuring a seamless visual flow that enhanced engagement.
Enhanced Navigation
We revamped navigation with intuitive, question-based categories like "Who We Serve" and "What We Offer." A drawer-style menu improved accessibility, featuring related reading sections with engaging imagery to promote user interaction and content exploration.
Web Guidelines
Guidelines emphasized accessibility and brand consistency through a balanced serif (Financier) and sans-serif (Gellix) font combination. Gellix was chosen for readability in UI elements and body text. Clear color contrast and ergonomic touch targets were implemented to enhance usability and task efficiency.
Component Library
All designs were component-based, facilitating flexibility and consistency across the platform. This approach streamlined development and ensured cohesive design implementation.
Blog Integration
We created dedicated blogs for each brand under the Jack Henry umbrella, maintaining individual branding while adhering to the unified component guide. Quick access to the main Jack Henry site from each blog ensured seamless navigation and consistent user experience.
Results
The client is ecstatic with the outcomes, particularly since the site is aimed at fostering increased business engagement. The inclusion of a prominent "contact us" link, guiding users to fill out a form, has proven highly effective. Following the site's launch, we have received positive data indicating favorable results.
