CASE STUDY
MATILLION
WEB UI
OVERVIEW
The Matillion website UI rebrand was a comprehensive effort aimed at modernizing the platform's look and feel, using the honeycomb icon of the Matillion logo as a key design element. This honeycomb shape was integrated throughout the UI to create a cohesive and structured layout, enhancing the visual storytelling across the site. Masonry played an essential role in organizing the content flow, ensuring that technical diagrams and data points were visually clear yet engaging. Each diagram was custom-illustrated to maintain brand consistency, while animations brought the UI to life, offering a dynamic experience. The interplay of animations and clean, illustrated elements created a seamless, visually captivating interface that balanced function with creativity. This rebrand successfully elevated Matillion's digital presence, aligning the visual experience with the brand's innovative ethos.
SCOPE
The Matillion website rebrand aimed to modernize the user interface, improving user experience while maintaining brand identity. Key elements included integrating the honeycomb logo across the site, custom illustrations for technical diagrams, and introducing animations to enhance visual storytelling.
CHALLENGE
The primary challenge was balancing creativity with functionality, ensuring the design remained engaging without overwhelming users. Integrating animated elements and maintaining consistency with the Matillion brand while modernizing outdated elements was critical.
APPROACH
We leveraged the honeycomb logo as a core design element, organizing the UI using a Masonry grid structure. Custom illustrations were crafted for all technical diagrams, and animations were strategically implemented to guide users through a smooth visual narrative, ensuring a seamless experience.
IMPACT
The rebrand successfully elevated Matillion's online presence, offering a cohesive, modern design that improved usability and engagement. The new UI reflected the brand’s innovation, resulting in a more visually appealing and user-friendly website.
STEP 1:
In rebranding Matillion’s website UI, the first step was to assess the existing design elements and identify areas in need of modernization. We focused on refining the overall visual identity, using the honeycomb logo as a foundational design element. This hexagonal shape became a unifying feature across the UI, tying together various components for a cohesive look. We also aimed to improve the overall layout and readability, opting for a modern, clean interface that embraced whitespace while enhancing the use of Matillion’s brand colors.
STEP 2:
The next step involved custom illustrations, particularly for the technical diagrams, to create visual consistency throughout the site. These diagrams needed to communicate complex information in a user-friendly manner, so we custom-designed each one to match the rebrand while ensuring clarity. The challenge here was to make technical content feel engaging without overwhelming the user. Each illustration was carefully aligned with Matillion’s new visual style, integrating seamlessly with the honeycomb grid that underpinned the layout.
STEP 3:
To enhance the user experience, we introduced animations that would guide users through the website’s visual narrative. Instead of using heavy animations that could slow down the interface, we took a more subtle approach, animating elements like transitions between sections and interactive components. These animations worked in harmony with the custom illustrations, giving the website a dynamic feel without overwhelming the user. This approach also helped highlight key areas of the site, keeping the design both functional and aesthetically pleasing.
STEP 4:
Finally, we focused on the technical performance and usability of the site. After the visual and animated elements were in place, we conducted extensive testing to ensure the animations didn’t affect loading times or navigation. By applying a Masonry grid structure, we optimized the layout for various devices, ensuring responsiveness across desktops, tablets, and mobile devices. The rebrand resulted in a polished, modernized site that maintained Matillion’s brand integrity while significantly enhancing user engagement and overall experience.
Custom Made Illustrations and Diagrams by our Visual Designer.
Custom Made Illustrations and Diagrams by our Visual Designer.
Custom Made Illustrations and Diagrams by our Visual Designer.
Custom Made Illustrations and Diagrams by our Visual Designer.
Custom Made Illustrations and Diagrams by our Visual Designer.
VIEW MY OTHER PRODUCT CASE STUDIES
