The wind of change in Merixstudio first blew a few years ago but we started the whole process of redesigning our brand only in 2017. We knew then that our key visuals and the website of that time neither correspond with our current performance nor show the full potential of Merixstudio. We were looking for a way to cohesively and clearly communicate our core values, goals, and identity. It took us almost two years to find it and make the ambitious concepts become reality. During this time a lot of people have been involved in the project and every stakeholder had their own goals and priorities. The complexity of the process required a flexible approach in project management and, at the same time, careful watching of fulfilling the fundamental assumptions. An experienced Product Owner, Maciej, gathered all the requirements, managed a very demanding change control, and kept everything in check the whole time. The team he was working with was self-organizing, highly motivated, and knowing the needs of the project and the client inside out.
Design magnetism
Behind the idea of a new CI was a variety of Merixstudio services.
We needed a concept that would express the dual nature of our software house’s performance: creative in product design and technical in software development.
These two sides of our business are seemingly contradictory but also perfectly complementary. They differ but they supplement, they create a push-pull dance. To find the right metaphor, we drew inspiration from mathematics, geometry, and physics. The ideas for the key visual included collision of galaxies and motion vectors. In the end, we decided to focus on the phenomenon of magnetism. Additionally, an interactive animation was our very first concept for the website’s main banner and the rest of the work was done around this fancy feature.
The whole visual identity and its particular elements were based on the idea of dualism and magnetism. We build our color scheme on two mainstays: black & white expressing the technology side and vibrant leading color – orange – to emphasize the creative aspect. This rule also applied to our typography and the fonts we chose – geometrical Pontiac and more humanistic in typeface Fira Sans. The extreme challenge for the author of our redesign, Paweł, was to make this theme show in all graphics and have them harmonize with each other. This is why when you browse the site you can feel the mix of two worlds: moderate minimalistic items and colorful, natural photos of our employees, thin lines taken straight from technical drawing and extraordinary composition, restrained formulas and graphs, as well as fancy animations.
What’s inside? Discover the website
To thoroughly discover the designs, main features, and hidden nooks of our website, it may take a while, but all the information is served in a friendly and appealing way. The first page (which was published as the last one) is probably the most interesting for our clients – that's Why Merix. The comprehensive presentation of Merixstudio's main strengths and values comes in the form of eye-catching graphics and animations. Filled to the brim with diverse content it contains almost all kinds of file types but thanks to a simplistic design the user doesn’t feel overwhelmed.
If you would like to know more about our company, check out the About us section. You’ll find there our key values and Merix own, special approach, achievements, client’s testimonials, and of course, our marvelous team captured in a new photo session (full-color this time!). A fun fact is that we kept the size of Merixstudio's people pictures proportional to their height in real life.
In separate sites, we introduce a full range of our services and extensive case studies showing our projects in great detail, including information about what the challenge was and how we’ve managed to deal with it, what tech-stack we employed, and design examples.
As a company that puts emphasis on the value of knowledge-sharing, we couldn’t have missed the blog, which we've been running for over seven years now. For all this time we created a massive collection of posts for entrepreneurs, software developers, and other IT people searching for valuable articles, insights, and inspirations.
Last but not least comes Careers, a site for those who would like to join Merixstudio and take part in outstanding projects we run. A compelling radar animation opens the list of the latest job offers shown in a clear and transparent way. You’ll also find here subsites with tons of information about how we work and what you have to do to become a part of the team.
Design struggles on the front
The ambitious and sophisticated designs posed a huge challenge for our JavaScript engineers to translate the mockups into code. These concerns mostly attractive but also advanced animations and the transitions between elements. Do you enjoy our interactive magnet on the homepage? Well, that’s probably Oskar’s – the main author of the magic happening at the front of our website – favorite. Providing this 3D object the high performance, required a maximal optimization of the browser. To achieve that, we moved the computing for the magnet to the separate thread (WebWorker). We’ve implemented the same solution in all the animations that used Canvas and also engaged some other worth mentioning tools like GSAP and ScrollMagic. The other design issue was the extraordinary arrangement of the elements on the grid. The BEM methodology helped us here to create generic components for which it’s easy to override basic styles.
Another significant challenge was to build a smart and scalable JavaScript code due to the implementation of static HTML views and smooth transitions with AJAX. The answer was BarbaJS to manage the queries and views as well as Webpack for building the bundles for single views and providing their automatic dynamic imports. To boost the website’s performance, we split the code (also because of HTTP2) and used Lazy Loading, so the browser is not overload with the content that is not visible yet. We also strived to reduce the number of external libraries and used only the ones carefully selected in terms of optimization and size. For our devs, this approach resulted in relying on our own, customized solutions created mostly in pure JavaScript.
What’s the BACK-bone of our website?
On the backend side of our website, we bet on a dead cert: our favorite, battle-tested combination of Python (3 of course) and Django. A huge amount of content and components made us search for solutions to easily manage the data without compromising the performance of the website. We decided to use AWS S3 and CloudFront to cut the loading time and ensure the quick loading of the styles. And not only the amount of content but also its diversification became a challenge for our engineers, headed by Mikołaj, one of our best Python Developers. They needed to adjust respective sites to their particular purposes as well as assure they will be intuitive and easy to configure by the users mostly from marketing, HR and Sales teams. This issue applied above all to our blog which is frequently updated and requires a whole range of text formatting to make the posts eye-catching and easy to scan. What other tech solutions did we choose to provide smooth and reliable work on the backend? PostgreSQL, Celery, Celery Beat, Flower, Redis, Memcached, RabbitMQ, Docker and GitLab.
Revamping our website wasn't an easy taks. In total, we spent a few thousand hours on making our ambitious concepts become reality but we're sure the end result was worth every minute of our work. The client's warm opinions we gathered after launch seem to prove that.
So if you also share a positive impression about our redesign process and you're looking for an experienced, creative team to design and develop your digital product - check our other projects and feel free to ask us any question!