(all releases)
Please note that the current online version of the Int4 website was developed by a different team. The MVP version I worked on dates back to the first half of 2020, with the second release following in the latter half of that year. Undertaking this project at the height of the pandemic presented unique challenges, requiring a fully remote approach to bring the project to completion.
Leading the rebranding and website redesign for Int4, a specialist in SAP integration testing solutions, I embarked on a multifaceted mission. The goal was to align their digital presence with their sophisticated suite of services, enhancing brand perception and user engagement.
I tackled the intricate task of making Int4’s advanced SAP solutions accessible and engaging. The project was not just a visual upgrade but a strategic shift in the digital experience to increase user engagement and conversion rates.
My involvement spanned the entire project lifecycle:
Key objectives of the project included:
My analysis revealed that most competitors’ websites were overly technical and confusing for business clients, with navigation complexities and a lack of clear conversion paths. In response, I focused on building trust and clarity in our MVP. I aimed to demystify our solutions, clearly outline the sales and implementation process, and shift from an outdated 2000s website style. The second release prioritized showcasing our products and services, moving company-related sections to the background.
Int4’s standout feature was its innovative approach, accelerating the complete testing cycle by 99.7%. A unique aspect was Int4 IFTT’s suite of modules for automating test case scenario creation. These insights guided the project’s direction, emphasizing our unique value proposition in the market.
With limited resources, I independently led the UX process, garnering insights from team consultations. The team helped me understand the industry and company’s approach, guiding the project’s stylistic direction.
I embraced a mobile-first design, incorporated Atomic Design principles, and experimented with neumorphism before it gained popularity. Animated elements using Lottie and HTML5, as well as 3D renders, were key in enhancing user engagement.
For SEO, we targeted a unique phrase, handled by an external firm. My focus was on aligning the website’s design and content strategy with these SEO efforts, ensuring an optimized online presence.
A key insight from my research was Int4’s commitment to educating the industry. This guided our content strategy, emphasizing the company’s thought leadership. We proudly highlighted the presence of two SAP Mentors within our team and our contributions to SAP knowledge through our own course offerings and numerous books authored by our team members. This educational aspect was not just a part of our identity but a unique selling point that set us apart in the market.
Incorporating this educational focus, the website was designed to showcase these achievements prominently. This not only bolstered our brand image as industry leaders but also provided valuable resources to our clients and partners. By aligning the website’s content strategy with this educational mission, we created a platform that was informative, engaging, and reflective of Int4’s core values.
In the early stages, I immersed myself in a creative brainstorming process, drawing inspiration from Int4’s innovative approach in the SAP space. This involved exploring various design themes that could encapsulate both the technical sophistication and the educational ethos of Int4.
My vision for the Int4 website was to create a digital space that resonated with both technical experts and business clients. I aimed for a design that balanced professional elegance with educational clarity, reflecting Int4’s commitment to leading and informing the SAP community.
Early prototyping was instrumental in bringing this vision to life. I focused on creating a user-centric design, ensuring the navigation and layout fostered an intuitive and informative user journey.
Stakeholder feedback was essential in refining our concept. We utilized Adobe XD for sharing wireframes and collecting real-time comments, ensuring our design met both user needs and business goals effectively. This approach fostered a collaborative and iterative design process.
The culmination of this process was a concept that not only elevated Int4’s digital presence but also set a new standard in how SAP solutions can be presented online. The final design was a testament to the fusion of innovation, education, and user experience.
We started by identifying our target user groups and creating personas for each business case. Pain points, jobs to be done, and value propositions were mapped out, leading to a user story map that laid the foundation for the initial sitemap and wireframe creation.
Each wireframe was crafted to tell a story relevant to the SAP specialist’s challenges, showcasing how Int4’s software could address these issues. Our aim was to create a compelling narrative leading to clear CTAs and simple forms, with options for a free software demo. This approach ensured a fluid user flow and extended user engagement.
Instead of external testing, we evaluated the site’s understandability across various knowledge levels within the SAP domain, ensuring that the intended actions were clear to all users.
Emphasizing mobile-first design, the website was crafted to be accessible and responsive, catering to diverse user needs and facilitating seamless interaction across different devices.
The journey of redefining Int4’s UI was an intricate blend of strategic planning, creative innovation, and meticulous execution. Central to this process was the revitalization of the color scheme, where a vibrant shade of blue was chosen for its strong associations with trust, reliability, and professionalism—qualities paramount in the IT sector. This choice was not just about aesthetics but about embedding the brand’s ethos into every pixel and interaction on the site.
From a multitude of colors to just three, the new logo emphasizes scalability and performs better in various sizes and negative space, aligning with modern design trends while maintaining the essence of Int4’s brand legacy. Proxima Nova, with its blend of classic and modernist touches, was the typographic anchor that balanced readability with character, particularly in a mobile-first context where clarity is key.
The prototyping phase was particularly exhilarating, allowing for the exploration of interactive elements that could bring the static designs to life. The use of advanced tools like Hype and Adobe Animate for the hero sections ensured that these animations were not only engaging but also lightweight, ensuring optimal performance across devices.
In crafting the UI, each component was designed to tell a part of Int4’s story, especially focusing on the challenges SAP specialists face and how Int4’s solutions can overcome them. The use of AnimaApp and Sketch facilitated the creation of prototypes that were not just visually accurate but also rich in interactivity. Features like dynamic sliders and scrolling-triggered animations in the hero section were more than just decorative—they were narrative tools that engaged users and guided them through the Int4 experience.
(use scroll on image)
Incorporating neumorphic elements served a dual purpose: they provided a subtle, tactile dimension to the UI and acted as secondary interactive cues. This design choice was particularly effective in sections like „You Might Also Be Interested In,” where the slight elevation invited user interaction without overshadowing primary CTAs.
The collaboration with the development team was a cornerstone of the UI design process. Regular updates and open lines of communication ensured that the transition from design to development was seamless. Tools like Zeplin and AnimaApp played crucial roles in this phase, ensuring that every detail in the design was translated accurately into the final product.
Reflecting on the Int4 project, I’ve garnered invaluable insights into the complexities of UI/UX design within the tech sector. Navigating the balance between technicality and user accessibility was a profound learning curve. The collaborative process with both the internal team and external developers underscored the importance of clear communication and adaptability. This project not only honed my design skills but also deepened my understanding of how design influences user interaction and business outcomes. It was a testament to the power of iterative design and the pivotal role of user feedback in shaping a product.
