Resources
Desirable Futures Branding Part 2 Website Design
10 June 2024
Case Study
Ken Tai
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.
Visit Site
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:
Enhance the brand identity through 3D animation.
Content Creation:
Utilize Midjourney to support visuals in the mock-up process.
Accessibility:
Leverage Framer's accessibility features to align with WCAG 2.1 guidelines.
Define the User Experience
Defined the target audience, user journey, information architecture and mock-up including the global navigation design.
Key Personas
Persona 1
A person who doesn't know anything about Desirable Futures.
Persona 2
A person who has heard about Desirable Futures through a community.
Persona 3
A person who knows about Desirable Futures and wants to learn more about its services.
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:
Similar to Figma's auto-layout (Flexbox in Webflow), this feature enabled easy creation of columns and alignment of items.
Assets Tab:
Like Figma, this feature allowed for storing components, text styles, colors, links, CMS items, and custom codes.
Accessibility:
Framer's accessibility features enabled setting accessibility components, tag, tab index, alt text, and ARIA labels.
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. While incorporating engaging interactions and 3D graphics, it is crucial to ensure product usability for as many people as possible by implementing accessibility components, especially for public websites.
Disability Key facts
According to the World Health Organization (WHO), an estimated 16% of the world's population (approximately 1.3 billion people) lives with some form of disability, underscoring the importance of providing user-friendly solutions.
Approximately 4.5% of the global population (over 350 million people) are colorblind, and around 43 million individuals are blind globally.
Accessibility Implementation
In this project, accessibility components were implemented using Framer's accessibility features:
Tag
Tab index (including dropdown menu items in the global navigation)
ARIA label
Alt text
Chrome accessibility checker extensions "Lighthouse" and "Wave" were used to ensure the screen reader functioned properly and in the right order.
Takeaways
Streamlining the Process
The latest platforms, such as Spline 3D, Framer, Midjourney, and Notion, were utilized to streamline and augment the quality of the outcomes.
Handover Process
The handover process involved exporting the original file and migrating the design file into the client's account. The client then tweaked the content, changed photos, and copy. When layout issues arose, support was provided to fix them, as the designer could not remain in the client's account indefinitely.
Conclusion
Overall, working on this project, including the logo creation and website design, was a great experience, leveraging cutting-edge tools and techniques to deliver a brand-consistent, accessible, and visually appealing website for Desirable Futures.