Case Study: Archello – a platform for designers and architects

Olga Okhrimenko
Olga Okhrimenko Marketing Manager
6 minutes to read

This month, we have launched a project we take special pride in.

Archello is a global platform for designers and architects. It makes it easier to search and connect with manufacturers of various products and encourages communication among design professionals.

archello Case Study: Archello – a platform for designers and architects
Archello homepage

We started collaborating with Martijn Postmus – CEO of Archello – in 2013. Back in the day, Archello was a global platform that united 90K architect projects, 50K companies, and 100K subscribers.

The Archello project idea came after listing to our users, what drove them, what could we improve and how could we better help our target users faster and better communicate.

This led, after almost 2 years for designing and working together with our users to a completely new redesign and new tools for the architecture and design community.

The new Archello is revolutionary and we have a lot more tool coming up.

– Martijn Postmus

About Archello

Archello is a fascinating place to explore, even for those not particularly into design and architecture!

court-of-justice-1100x695-1 Case Study: Archello – a platform for designers and architects

The website showcases brands, projects, products, and events. All sections are connected and create a great experience for a continuous discovery of new architecture styles, products, projects, and brands.

Brands are filtered by type: designers, architects, manufacturers, contractors, floor and stair manufacturers, consultants, developers, and so on.

archello-brands-1100x562 Case Study: Archello – a platform for designers and architects
Brand categories

Brand page

Every brand has its individual page that features vital information about the brand like brand description, team, and contact details.

brand-page-1015x800 Case Study: Archello – a platform for designers and architects
Brand page

Dedicated tabs showcase the brand’s products and projects. If the products are used by other companies listed on Archello, there are links to their pages, too.

On this page, the brand may include the team members who have accounts with Archello and provide their office contact details.

Further on the page, all brand projects are displayed on the map, and the user can click the location to see what project has been done in that specific area.

map Case Study: Archello – a platform for designers and architects

 

Project page

Project page allows you to share the concept and vision, highlight the most outstanding features, and tell the story of the creation process.

project Case Study: Archello – a platform for designers and architects
Archello – project page
brand-page-products-1100x747 Case Study: Archello – a platform for designers and architects
Archello – brand’s products
project-page-3 Case Study: Archello – a platform for designers and architects
Archello – project page

Besides, the project page lists the manufacturers who have been involved in the project and the products used to bring it to life.

products-in-the-project Case Study: Archello – a platform for designers and architects

Product page

On the product page, the manufacturer displays a photo gallery with use cases. There is an option to contact the manufacturer and ask a question, request a price, documentation, or supplier list.

product-page-1-1100x753-1 Case Study: Archello – a platform for designers and architects
Archello – product page
product-request Case Study: Archello – a platform for designers and architects
Archello – product request popup

The product page has product specifications and a list of other products offered by the same manufacturer.

Project guide

You can choose to browse the brands and discover their projects through the brand pages or use a Project Guide tool in the upper navigation.

It has filters by project types which can be narrowed down further by location, industry, project status, and author.

project-guide-1-932x800 Case Study: Archello – a platform for designers and architects
Archello – project guide

Product selector

Just like with projects, users can browse products using the Product Selector tool in the main navigation.

product-selectorr Case Study: Archello – a platform for designers and architects
Archello – product selector

Product catalogue has many categories and nested subcategories, so it’s a real journey through the variety of ideas and concepts – don’t get lost 🙂

Events

Finally, there are events that can be filtered by country and date.

archello-events Case Study: Archello – a platform for designers and architects
Archello – events

And now it’s time to get technical and dive into the development details, which there are quite a few.

The challenge

A long time ago in a galaxy far far away Archello was built with Drupal 6. Back in the day, Drupal was a good solution and served its purpose well.

However, after its end of life announcement was made, together with Martijn we decided to move away from Drupal altogether and build a shiny new website with the Yii 2 PHP framework.

Drupal modules contain a lot of unnecessary functionality that slows down the core and make the website load much longer. Besides, extending the system to add new features takes much more time and effort than with Yii, and at times, specific components are impossible to implement with Drupal.

The solution

So, we rebuilt it all.

Our Yii2 developer, Alex Kokorev, was faced with one of the most exciting, yet challenging, tasks – build a new project architecture that ensured flexibility, expandability, and high system performance.

While our frontend developer, Ruslan Arshinnik, nailed the sleek look and feel of Archello by using the most suitable JavaScript libraries.

To import the content from Drupal to Yii, we created a custom console command. Overall, we’ve migrated a 1Gb database and 600Gb of files to the Amazon S3 server.

Server

The new Archello runs with Amazon S3 and uses Amazon Lambda, a serverless computing system that provides continuous scaling and lets you save on server management.

Images

Image performance is enhanced with Imgix. It’s an image processing CDN that serves optimised images quickly to any device. Archello is loaded with tons of images, so Imgix has a significant role in website speed and performance.

zaha-hadid-1100x630 Case Study: Archello – a platform for designers and architects

Social login

Allowing users to log in with Facebook, Twitter or Linkedin other social network is a matter of courtesy these days, improves conversion and merely is user-friendly – and Archello has this too.

Other third-party integrations

  • SendGrid for email marketing and management.
  • Google API for Google Maps, Place Autocomplete, ReCaptcha etc.).
  • Video API (Youtube and Vimeo).
  • GeoIP2 with MaxMind.

Frontend features

New Archello is very visually appealing.

Scrolling is accompanied by an easy and smooth slide-up and fade-in animations.

Archello_mob Case Study: Archello – a platform for designers and architects
Archello – mobile view

Galleries on the homepage and in the guides have zoom out and fade-in effects. Mobile users can enjoy light animations, while the grid to slider transformation has a nice 3D overflow effect on mobile and tablet.

On a Final Note

We’re delighted with the result!

And “we” means a great team that worked together and drove things forward: one frontend developer and one backend developer who worked full-time, and one project manager and a system administrator who worked part-time.

The new Archello is an art object itself, and we love every page, every small icon, and every pixel.

But this is not the end – Martijn plans to develop the platform further, and we’re excited to see how it will evolve.

The future Archello will have some amazing new functionalities we are designing now. As we always say, a website is never fully finished, always thinking of the next new thing our users can benefit from.

If you’re inspired by Archello and would like to build a great web platform of your own, drop us a line – let’s talk about it and do it!

4.6/5 - (56 votes)

Book a call With our strategist

What we will talk about:
  • you and your business needs;
  • current plans, ideas, and strategy;
  • possible solution to your business challenge.

Describe your business requirements in enough details so we could understand your goal better.

*If an NDA should come first, please let us know.