Responses by Sebastián Martínez, head of design, and Pablo Picart, design director, ++hellohello.
Background: The purpose of HiKeys is to bring creativity, design and playfulness into the realm of learning new abilities for the team. The site served as an opportunity to experiment with tools and technologies while crafting a product and some content that intersect with areas we’re passionate about, such as music and industrial design.
Design core: The site’s core features include a highly interactive product demo, 3-D modeling and fluid animations that guide the user journey as well as a clean, modern design that emphasizes usability. Stylistically, it blends minimalism with dynamic visual elements to maintain both simplicity and engagement.
Favorite details: The 3-D interactive product demo stands out as a highlight. It provides an immersive way for users to explore HiKeys’s features without overwhelming them with technical details. Additionally, the animations are finely tuned to be both functional and delightful, creating a polished user experience of which we’re very proud.
Challenges: Balancing high 3-D interactivity and lighting with performance was one of the most challenging aspects. Ensuring smooth animations and responsive behavior across devices required close collaboration between design and development.
New lessons: We gained deeper insights into optimizing 3-D modeling and animations for performance and managing cross-functional collaboration. It was also an excellent opportunity to explore how storytelling can elevate a technical product.
Navigation structure: The navigation was designed to be intuitive and user-friendly with a clear focus on guiding users through the product’s story. Key sections are easily accessible and visually tied to HiKeys’s 3-D model, ensuring users can quickly find what they need while being subtly encouraged to explore deeper.
Technology: Beyond the core technologies used for each tool, we pushed the limits of two platforms to see what they were truly capable of: Framer and Spline.