Whispering Woodland
Hiber3D is a cutting-edge game engine designed to support the creation of high-end, immersive games that are playable on any device through the browser. My task was to create the design for their website and establish a new design system, including logos and branding colors.
- Digital Design
- Research
- UX
- Art Direction
The Goal
Are you on the lookout a game engine? With numerous options on the market, including big names like Unity and Unreal Engine, it can be challenging to gain recognition. During this project, we aimed to position Hiber3D prominently in the market through its digital presence. The goal was to create a website that not only showcased all the engine's capabilities but also sparked interest in the product, making Hiber3D a considerable option among its competitors.
Starting in the research phase, I focused on understanding our target audiences and mapping out their needs. This involved collaborating with the Head of Product and Head of Marketing to identify our two primary target audiences: Developers of Digital Experiences and Project Managers & Initiators. To gain insights, I conducted interviews with users from both groups and supplemented this with data from articles and case studies. This combination of primary and secondary research provided a comprehensive understanding of our target audiences, while also being effective given our tight deadline.
Research
Strategy
With insights gained from researching the target audiences, we defined a clear site purpose: to showcase Hiber3D's capabilities and spark interest in the product. This ensured that all design choices aligned with the site’s primary goal, while also creating a cohesive and effective user experience. In collaboration with a data scientist, we established several success metrics based on our defined purpose. These metrics focused on visits to key touchpoints, such as the features page and documentation. Additionally, we aimed to achieve a specific percentage of returning users, indicating sustained curiosity and interest in our product. These metrics also provided a foundation for future site evaluation and improvement.
A natural part of my process involves researching existing solutions to similar problems. This helps me identifying successful concepts that can be adapted or improved upon. During this project, I focused on how other companies positioned their game engines and engaged their target audiences. By extending my research even further, looking at developer platforms such as next.js, vercel, gsap etc., I got an even broader reference. During this phase I tend to collect inspiration on more specific solutions and gain some thoughts on the manner of the design.
Secondary Research
Effect Mapping
In this project effect mapping proved to be a powerful tool for prioritizing user needs. By weighting the needs of our target audiences and connecting them to specific features, we ensured that the final product addressed the most critical requirements effectively. This lay the ground for our informational architecture and hierarchies.
The Effect Map, created in Miro.
The next step was to create a desired user journey. Based on the insights gained from our research, I developed a user journey map. This artifact highlighted both gain-points and pain-points, providing a clear picture of potential challenges and opportunities for improvement. Additionally, it served as a valuable tool for early-stage discussions with stakeholders.
User Journey
The User Journey Map, created in FigJam.
Wireframes
Before diving into the design, I created wireframes for the main screens. These wireframes were good in discussions with stakeholders, ensuring that all requirements and content were aligned before proceeding to the design phase. It also made sure that we had an intuitive and natural userflow.
The wireframes were also tested on three users from our target audience to verify that the information architecture and user flow felt intuitive. After the testing a few iterations were made based on the newly gained insights, including removing the entire product page due to big overlaps in content.
To achieve our goal, we needed a design that looked professional while maintaining a sense of creativity and rebellion. In a market where blue is frequently used, I chose to work with a blueish purple, also known as blurple. This color choice aligned with Hiber3D's vision and mission, making it both interesting and innovative.
Based on this primary color, I developed a custom grayscale palette. By setting a brand black derived from the primary color and adjusting the opacity to create the grayscale, we ensured design consistency. This approach prevented any colors from feeling stark or out of place and allowed our brand color to be used for actions without neutral elements appearing out of place or distracting.
Colours
Typography
I chose the font Geist to blend modern aesthetics with readability. Its distinctive yet professional look aligns perfectly with Hiber3D's brand identity, reinforcing their commitment to innovation and reliability. This versatile typeface works seamlessly across various devices and screen sizes, ensuring a consistent experience throughout the website.
Brand essentials such as a new logo, favicon and an engine loading screen were also created. Following the new brand guidelines.
We decided to keep it simple with the logo design, due to the tight deadline. If there would have been more time, this is one of the parts I would have loved to put more thought and effort into.
Logo
Design System
In addition to colours, typography, and logos, buttons and icons were also created as part of the design system. The entire design system was set up as styles and components in Figma, ensuring consistency across all design elements and streamlining the design process.
For the main navigation of the Hiber3D website, we prioritised clarity and ease of use. The information architecture is based on user needs and their prioritisation in the effect map. Alongside the home page, the main navigation provides both target audiences with options that fulfil their primary needs. It also aligns strongly with the site’s purpose by giving users quick access to an overview of all the product features.
Main Navigation
Home Page
For the home page design, we focused on creating a visually engaging and intuitive user experience while presenting relevant information effectively. The hero section features an eye-catching video showcasing various in-engine experiences, accompanied by a compelling tagline and a strong call to action.
Key design choices include a well-structured layout that provides an overview of all engine capabilities. Additionally, we incorporated multiple ways to explore the product through examples, demos and articles. To build social proof, we added a carousel highlighting previous collaborators. These elements work together to create a dynamic and informative home page that draws users in and encourages them to learn more about Hiber3D.
For the developer page design, we focused on creating a resource-rich and user-friendly experience tailored to the needs of developers. The hero section features a clean, professional layout with a concise introduction and a direct link to the documentation, inviting developers to dive into Hiber3D’s tools and resources.
Key design choices include an organized structure that highlights essential resources such as documentation, tutorials, and the latest news about the engine. We also incorporated interactive elements, such as code samples and live demos, to provide hands-on learning opportunities. To foster a sense of community and support, we added a section promoting the developer Discord, ensuring developers have access to real-time collaboration and assistance.
Developers
Features
For the features page design, we aimed to create an informative experience that clearly communicates the powerful capabilities of Hiber3D. Our primary design choice was to adopt a minimalistic layout that provides users with a clear and concise overview. This approach makes it easy for users to navigate and understand the extensive range of the engine's capabilities.
Users can easily open each feature module with a single click, revealing detailed descriptions, high-quality visuals, and interactive elements such as videos and demos to showcase the feature in action. This design ensures that users can quickly grasp the full potential of Hiber3D while engaging with the content in an intuitive and visually appealing manner.
For the supporting pages, such as About, News, and FAQ, we aimed to maintain a consistent design language while ensuring each page effectively served its specific purpose.
- News Page: We opted for a simple, chronological layout with clear headings and summary snippets, making it easy for users to scan and find articles of interest.
- FAQ Page: Designed for clarity and ease of use, the FAQ page features a well-organized layout with expandable sections for each question. This allows users to quickly find answers without feeling overwhelmed by information.
- About Page and Future Supporting Pages: We created a versatile page layout that can be used for the About page and any future supporting pages. This layout includes a hero image with a heading and the option to add a call to action. The page can be populated using various components created for other pages or with simple text content.