Overview

Desirable Futures is a cutting-edge consulting firm based in Australia, founded by three seasoned agile consultants with extensive experience in organizational development. After creating their logo, Mokujiro worked on the website design and development to kickstart their business activities.

The Requirements

The objective was to design and publish a website consistent with the brand identity established through the logo creation process.

This article walks through the website design, which was the second part of the branding work for Desirable Futures.

The Mission

The mission was to manage the end-to-end process efficiently and deliver a best-in-class website that enhances the brand identity, showcases their services to the target audience, and streamlines the process using the latest design trends while maintaining a balance between content, visuals, and accessibility.

The Key Challenges

• 3D Animation

• Content Creation

• Accessibility

Define the User Experience

Defined the target audience, user journey, information architecture and mock-up including the global navigation design.

Key Personas: Persona 1, Persona 2, Persona 3

Connected the Dots — The entry points, Desirable Futures' goals, and the personas' goals were connected to create a cohesive user experience.

Information Architecture — Desirable Futures provided the copy, and we defined the information hierarchy and connected the pages in the process.

Leveraging Framer Features

Framer is a powerful tool that streamlined the design process, allowing us to design and iterate directly within the Framer canvas.

The Framer Features Used Most: Layout - Stack, Assets Tab, Accessibility

3D Animation

As part of the brand identity, a 3D animation was built in the hero section using Spline 3D, which can import and edit 2D and 3D files in various formats, such as .fbx. The animation was exported from Spline and imported into the embedded section of Framer, with consideration for site performance.

Accessibility

With the revolution of AI and the transition towards Industry 5.0, inclusive design have become essential. Accessibility components were implemented using Framer's accessibility features: Tag, Tab index, ARIA label, Alt text.

Chrome accessibility checker extensions "Lighthouse" and "Wave" were used to ensure the screen reader functioned properly.

Takeaways

The latest platforms — Spline 3D, Framer, Midjourney, and Notion — were utilised to streamline and augment the quality of the outcomes. Overall, this was a great experience leveraging cutting-edge tools and techniques to deliver a brand-consistent, accessible, and visually appealing website for Desirable Futures.