Floorigami
Crafting an Ecommerce Website for DIY Enthusiasts
Role / Service
Agency
Year
About
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.
Challenge
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.
Solution
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.
The Concept
With a comprehensive understanding of the product, I delved into crafting the site's aesthetic. One striking aspect was the product packaging. Given the distinct size of each item, they are shipped in uniform rectangular boxes. I envisioned users having an online experience reminiscent of unboxing and diving into a DIY project. For the homepage, I opted for a 3-column layout system. This layout was chosen to mimic the ratio of the items and provide a cohesive visual experience. Additionally, I included a Style section to demonstrate how users can create their own customized flooring with images and explanations from the same collection. To streamline information, I simplified the steps into three clean and easily scannable liner illustrations. Users can also access quick instructional videos in the same location as the steps.The client was enthusiastic about the approach; however, they expressed concerns about the potential development time associated with the 3-column scrolling feature. As a compromise, we decided to limit this feature to the homepage while maintaining a consistent look and feel throughout the entire site.
The Design
We maintain the current branding system and infuse it with a sense of joyfulness. Upholding the hierarchy of Swiss-style typography, we utilize red and dark navy as primary colors. Our iconography adopts a linear style. When selecting images, we focus on showcasing either the DIY process or the enjoyment of the space created. Lifestyle images exude a clean, relaxed, and warm tone, aligning with the desired aesthetic.
Component Library
Component-based design maintains the flexibility of an easily scalable development system. Through extensive research, wireframing, and sitemapping, we implement the design process. By adhering to a component-based approach, we streamline development, reducing time consumption and facilitating seamless maintenance in future phases.
Bring the DIY Experience to Live
We revamped the content flow for our e-commerce platform, integrating helpful guidelines throughout. Interactive features like the "How it Works" page and the "How many tiles do I need" module were added to improve user comprehension. Our focus on a smooth checkout process enables users to revisit and modify information before finalizing their purchase. Upon completion, users receive a confirmation message with a sneak peek of their package, elevating anticipation for their forthcoming DIY experience.
