HAUS

Mekanism

Professional Services & Self-Promotion / Nominee

HAUS

Professional Services & Self-Promotion

Nominee

"The bar is constantly being raised for what can be achieved on the web, and while that means the work may be challenging at times, we're always eager and willing to rise to that challenge." HAUS

Q: Can you describe your project and the concept behind it?

A: Full-service independent agency, Mekanism, approached Haus to redesign its site. To showcase the agency’s robust client portfolio, along with its mission to combine soul and science, Haus focused on the essence of Mekanism’s playful personality and data-driven insights. The result is a visually rich, easily navigable experience — fitting of Mekanism’s legacy.

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

A: We created fairly detailed Figma prototypes that showed a lot of interaction, animations, and transitions — mainly to sell through design concepts to the client, but also to make sure that our UX approach was sound in thinking through how the average user would navigate the site.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: Mekanism's previous site wasn't very maintainable or expressive, and they wanted more control. So we selected Contentful as our CMS and connected every piece of visible content to it. We also designed and developed an invite-only data insights platform called "Ground Control". Client access can be granted via Contentful. All the reports, including powerful data visualizations, can be managed via the backend.

When did you experience a breakthrough or an "a-ha" moment during this project?

For us the 'a-ha' moment was really about leaning into Mekanism's core mantra about soul and science – we wanted to bring enough playfulness through the design and animation that the site felt alive and interesting, but enough structure and hierarchy that users could navigate the site easily and find whatever they're looking for.

Watch

Q: What web technologies, tools, and resources did you use to develop this?

A: Mekanism is built using headless architecture with Contentful powering the backend API, and Next.js powering the user-facing application. We make heavy use of Framer Motion for animation and D3 for all data visualizations.

Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We try to stay aligned in the initial phases of the project around what we want the site experience to be like. This means IA/UX staying in sync with design and development with the goal to minimize the need for omissions or compromises down the road. There are of course always trade-offs that we work through as a team to find the best way of meeting performance and optimization goals while still keeping the creative flair.

Q: How did the final product meet or exceed your expectations?

A: Designing and developing another agency's online presence is always a delicate task, so we really wanted to make sure that we had Mekanism's buy in on every aspect of the site. The response we got from them and from the community at large has been overwhelmingly positive. And while no project is without its challenges, we're thrilled with how the site turned out.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: In our opinion there's never been a more exciting time to make digital experiences. The past few years have taught us all the importance of connection — and the internet allows us to facilitate that in all new ways. The bar is constantly being raised for what can be achieved on the web, and while that means the work may be challenging at times, we're always eager and willing to rise to that challenge.