April 17, 2024

Introducing the new Z1 home

Our new website is an exercise of elegance and effectiveness built on Webflow that showcases the best digital products and how we craft them.

Clarisa Guerra

Clarisa Guerra

Lead Marketing at Z1

Introducing the new Z1 home

After months of hard work, we can proudly present what will be our home for the next stage. We say goodbye to our iconic purple palette and hello to black, white, and our clients' color exceptionality.

We work mainly with early-stage founders and business leaders. Restless and resilient entrepreneurs and intrapreneurs who rely on us to bring their precious ideas to life. And to do it the right way, as they and their users deserve. The way we would do it if we were to model our own product.

We thought about this redesign long ago. We knew we needed it, and it’s truly exciting to see it finally happen. Our previous website, launched in March 2019, didn’t properly reflect how we are a perfect fit for founders or how much our team has grown as excellent digital product crafters. It just didn’t show the simple yet meaningful process we follow, the real road we walk together toward the perfect digital experience.

Highlighting our process and our clients’ impact

When we got to work, we put what we wanted to improve on the table. Three main goals arose:

  • Better showcase our expertise: We aimed to display our powerful experience in turning initial ideas into tangible outcomes by primarily showing our work and creating dedicated portfolio pages highlighting our most beloved and impactful projects.
  • Improve in transparency and actionability: We wanted to be more open, interactive, and helpful. We longed to get into details to share our process, providing founders with practical insights and tools and empowering them to take action right away.
  • Cultivate connection: We are proud of the team we’ve built and the culture and values we’ve fostered over the years. We wanted everyone to get to know the people that make Z1 unique. Because we are “the kind of people you love working with”, as our clients testify.
Better showcase our expertise, improve in actionability and cultivate connection are our main goals with our new website.

Aesthetic evolution

Our new web design is intentionally direct. With a neat design focused on content and bear distractions. Black and white are the main colors, with shades of electric blue and grey.

We wanted it this way to keep the users focused and to give all the prominence to our process page, where we explain how we create digital products from zero to one step by step, and to our portfolio, where you can see our process in action and a burst of our products’ brandings. This way, it’s our clients who really shine on our new website, sticking to our promise to be a proxy for their purpose.

Focusing on the outcomes…

To showcase our work, we decided not only to create dedicated pages for each project but also to launch a reel that crowns our new website. We’ve built 150+ mobile and web apps from the ground up. Such a vast number is almost impossible to showcase for our small marketing team. This video is the way to put some of our most beloved works in front of our audience’s eyes.

It was hard to make the project selection, which finally included 62 products. The music we chose was a perfect ally to jump energetically from one to another. The track is called  ‘Nebulae,’ and it’s included in our Finnish neighbor Future Ark's last album, Encinitas. As the composer told us, this is a track that mixes flamenco beats with electronic from the nineties, a mix that lets you flow to unexpected places.

The track we chose for our reel is called Nebulae and was composed by Future Ark, a Finnish electronic musician based in Seville.

…and on the journey

To explain our process, we vertically split the page in two. On the left, you can see each one of the big steps we follow when creating digital products: Research and discovery, Product design, Product build, and Product launch.

For the right side of the screen, we designed an animation that evolves while scrolling up and down; A metaphor for how an idea turns into a tangible outcome, from the discovery phase, with different pieces and shapes at the beginning, to a perfect device based on Da Vinci’s perpetual motion machine concept for the product launch at the very end.

Every step of the process is actionable, and users can expand them and get more details of what to expect in each phase, along with downloading useful notion templates or Figma kits to start working on their ideas.

To make it more personal and connect with our audience in a more engaging way, we got our VP of Partnerships, Michelle Reid, to explain the process on video, so founders already get to know the person they’ll be speaking to first when getting in touch with us.

Making the most of Webflow

We built our new website on Webflow, which we use by default with our clients’ web pages. We admit it; we are Webflow advocates; we rely on its simplicity to create amazing experiences, its intuitive CMS management, which we’ve used for our team members and the blog, and its excellent performance, security, and Service Level Agreement.

Webflow is well known as a no-code tool, but you can add custom code, which lets you do some cool things that are more complex, such as what we did with our process page and its multiple animations, anchors, and interactions.

This web redesign represents a turning point in our journey as a digital studio. We still rely on honest partnerships and collaboration for growth and success, and we hope this new website serves as an effective way to convey it.