F10 is a global innovation ecosystem. Their mission is to unite tech startups with big business to shape the future of banking and insurance. F10’s founding sponsor is SIX, a global financial infrastructure provider and operator of the Swiss and Spanish stock exchanges.
The challenge for them in the start of August 2020 was the launch of a new platform and a full rebranding before the opening of their new branch in Madrid, all of that in just 4 weeks(!). They contacted Catch for the above, and I worked on the project as product designer in charge of the UI Delivery and the new branding identity.
The process

The project being done fully remotely was another challenge on top of the very tight timeline, which meant we had to stay connected at Catch, between strategists, product managers, designers and engineers, through daily stand ups and regular catch-ups via Slack and Google Meet. ​​​​​​​
We also had to maintain a high level of collaboration with F10, using multiple weekly showcases to exchange and have everybody feedback quickly on the solutions offered.

In the first step in the process, we used Mural during our Experience Workshops to collaborate on segmenting F10's core audience and defining the user needs. We architected the site to reflect the collaborative ecosystem created by their 3 core audiences: Start Ups, Corporates and Investors.
While the audience pulls together to create this ecosystem, each audience is distinct and required its own distinct space to explain the value proposition:

➔ Corporates - Innovate your company
➔ Start-Ups - Boost your venture
➔ Investors - Maximise your impact
Rebranding 🚀

The first step in pushing the brand further was to rethink the logo. Our key challenge was to make F10 stand out as a reliable and well-established incubator company, while highlighting a dynamic “startup” appeal.

After initial concepting, we agreed on moving towards a bolder, more colourful and playful look, using different shapes and colours to showcase F10’s diverse range of expertise - with startups, investors and corporates - as well as its growing number of locations around the world - Zurich, Singapore and now Madrid.

We wanted to keep the original rocket 🚀 as a symbol, since it cleverly represents F10’s role as a startup incubator. We refined its look to match with the new direction the branding was heading.
The new logo was then delivered with branding guidelines, animations and icons to set the tone for the future of F10’s platforms and communication. 
Introducing motion

An important part of any rebranding job, and that we wanted to achieve despite the overall tight timeline on this project, is motion design. I was very excited to take this on, with the challenge to try to bring to life this new brand in under 2 full days.

The idea here was to create a small, looping animation that could be used on the website, social medial, advertising, and help communicate F10's dynamism and youth throughout every digital medium. Focusing on the rocket icon from the logo, I decided to work on its rotation, to highlight the company's speed and versatility, while showcasing in a pop and fun way the new F10's colours, to achieve a result both bold and efficient. I then created a small sting video for F10 to reveal their new identity on social media and internally.
A new platform

In addition the the rebranding of F10, the other main challenge was to rethink the entire F10 website. After completing the Experience Workshops with them and having a better understanding of the audience, their expectations and their needs; we started working on a sitemap and began the production of wireframes.

To once again accomodate with the 4 weeks window in which the website had to be delivered, we really focused on a component-based user interface, to minimize the time spent on production and maximise efficiency.
With that in mind and the wireframes completed, it was time to start on the user interface production, which we achieved while being in constant communication with F10, to showcase, feedback and exchange as often as we could. 

We wanted a very clear and message-driven feel to the whole website, with the strong colours, icons and animations popping up to highlight specific areas, call to actions or images. Thanks to the fantastic reactivity from F10, we achieved the delivery of all user interfaces in about 5 days (!), helping them communicate straight away with all their audience, and giving us a solid foundation for future work and improvements of the website.
To help us create the designs in a quick and efficient way, we relied heavily on our design system, creating versatile components and strict guidelines to maintain consistency across the website.

This proved to be a big help when starting the development phase. To move the project quickly, we needed a web platform that facilitates rapid development, yet provides an enterprise level, scalable foundation for growth. We decided to go with Webflow, a low-code platform. It allowed the client and the Experience Design team at Catch to test and feedback in-browser, which helped a lot with the pace of the project and made the collaborative sessions much more easier.
What's next?

I could not be happier with the way this project turned out in what seemed like an impossible timeline at first. 
We now have a solid, "MVP style" platform and experience, which leaves lots of opportunities for the future of F10's collaboration with Catch, from developing the design system we created to push the user interfaces further, to possibly work with F10's startups to help with their own products user experience...
Back to Top