Performance, consistency and flexibility: behind the scenes of the Aeries website relaunch
Feb 05, 2021

Aeries designers David and Zack recount the Aeries.com website redesign project and the challenges and pitfalls they encountered along the way.

David Lin-Clark and Zachary Guerrero

Performance, consistency and flexibility: behind the scenes of the Aeries website relaunch

You may have noticed that things look a little different around here! Well, the Aeries brand is evolving – and our website is evolving too.

Old aeries.com
New aeries.com

How we got here

The design team is excited to kick off this blog series where we give a glimpse into our process and explore the role of design at Aeries. But before we get ahead of ourselves, we need to give a little backstory on our old website.

The truth is, the old aeries.com was a complex monolith of systems we developed over the years, adding on modules like the International Space Station. That monolith served us very well until, well, it didn’t.

The old version of aeries.com that we were tasked with replacing was launched around 2012, with several smaller-scale refreshes taking place since that time. For the web, that’s a long time in terms of user experience.

By the time the 2010s were coming to a close, we had identified several problems that were impacting the Aeries team’s ability to manage content and keep the site up to date with the latest information.

For one thing, the whole site was built on an old and outdated part-custom, part-open-source content management system that was difficult to navigate and made it near impossible to identify which menu or submodule you needed to go to before you could change a certain element. People honestly and legitimately needed training to use this thing.

What’s worse, this content management system had no native support for providing our readers with a mobile-responsive layout. When we were looking at the analytics for aeries.com, we noted that a large majority of our visitors were using mobile devices.

Right then, we knew that implementing a mobile responsive design was one of the most impactful changes we were going to make as a part of this relaunch. That alone was worth starting from scratch.

So we discussed it with the team and were assigned the project! We were going to redesign the front-end of aeries.com, and relaunch it alongside a new back-end login system for my.aeries.com.

Scaling a design language

Now, just before that, rewinding to early to mid last year, our design team was busy trying to figure out how to create consistent beauty across all of the Aeries brand touchpoints.

We were thinking about our website, our marketing materials, our products, and any other user experiences that might present an opportunity to make our customers’ lives easier through better design.

One action we resolved to take was to begin to develop and document a proper design language, made up of all the fonts, colors, themes, assets, templates, style guides, and design patterns that might be put in front of Aeries customers, impacting their experience.

During that time, we began to create a foundation of resources that we would use to help guide the design decisions of future projects. We began the website relaunch project shortly thereafter, so it was one of our first opportunities to see if the design language worked in a practical context. 

Design language

The journey begins

Armed with the brand new design language we had just created, we felt more confident going in that we would intuitively know how to redesign each page. Despite that confidence, we quickly learned we had underestimated the size and scope of the website redesign project.

Between the two of us, we divided and conquered to produce well over 100 distinct mockups so each and every page on the old aeries.com had a design candidate proposal for the new website. That way, we could create and demo several pages per day (even with complex user interactions) all without ever needing to write any code. Even still, this step alone took a couple weeks.

One of the design philosophies we believe in is that it tends to be much less expensive over the long run when you have to throw away prototypes, wireframes or mockups you created when you compare it to the cost of having to throw out code you wrote.

So if we can, we like to start projects by pushing pixels around and facilitating discussion before we move on to any actual web development. That way we can select frameworks that will serve our design decisions, rather than selecting a framework first and compromising on design decisions later.

Thankfully, collaborative design tools are just getting better and better all the time. We found that implementing Figma into our workflow greatly sped up the process of creating pages and receiving quick internal feedback to continue iterating.

So we started with basic wireframes as conversation starters for colleagues, then later we turned those into high-fidelity interactive prototypes that our peers could even click on to preview the full website experience, right inside Figma.

Website wireframes

Time to code: a look at our modern web stack

Browsing the new site, a look behind the curtain will show some of the new modern technologies we’ve chosen in our effort to design a new Aeries homepage that is faster, easier to navigate, and enables us to more accurately reflect the Aeries brand.

We made these changes for the benefit of our readers, but most importantly for our designers and developers who will be creating content, building tools, and generally continuing to improve aeries.com over time.

In terms of our framework, we chose Gridsome, a modern static site generator, as the backbone of our project. We knew that this would be very robust and provide us with the key benefits we wanted out-of-the-box:

  • A huge boost in website performance thanks to local caching techniques and the PRPL pattern (average pageload speed went from over 1.7s to under .5s on average).
  • The ability to implement component-driven development with Vue.js, ensuring that just about any elements can be easily reused elsewhere around the site. 
  • Drop-in compatibility with the style guide libraries we had created, which were implemented in TailwindCSS.

We were stunned to see the early initial development benchmarks gave us a perfect score on a test page, a far cry from what our previous website’s homepage scored:

Old lighthouse benchmark
New lighthouse benchmark

But what’s next?

Redesigning the website is something the Aeries team has wanted to do for a long time, but a combination of issues, both in terms of design direction and back-end technicals ended up making the project much hairier than most of us expected it would be.

Right now, we’re taking this moment to celebrate having vanquished the behemoth that is our old website and replacing it with this new gleaming beacon of hope for things to come in the future. The whole company is excited about the step forward towards creating a more intuitive, robust platform for our users.

For us in the design team, there were a few hard-learned lessons we’ll be taking with us moving forward. 

Some notes to self from the design team

  • Prototyping is a crucial tool for any project where the design, user experience, or overall workflow is consequential at all.
  • The older an existing system is, the more likely it’ll be tougher to replace because of the other systems that depend on it.
  • Crucially, the performance of your website is directly correlated to the engagement on your website. People are more likely to stick around when they don’t have to wait for pages to load!

And of course, this is only the beginning. In the next few months, you can expect to hear more from us and we hope you’ll stop by from time to time to check in on the fruits of our labor!

Some exciting things for you to look forward to in the short term

  • More content about Aeries solutions, services and events.
  • Additional video content to supplement our existing pages.
  • Regular blog posts, and other glimpses into daily life at Aeries.
  • More text words from David and Zack?! 😱

P.S. – the design team lives on user feedback and would love to hear from you! If you have questions or thoughts on the new website, drop us a line at davidc@aeries.com or zachg@aeries.com.

Get the latest from Aeries

Subscribing to all topics
Subscribe