We’re really excited to be launching our new website, it’s been something we’ve been working on for a while. Following our rebrand earlier this year, our creative team have been working hard to bring it to life and really show off our brand voice and style. Think vibrant colors, gradients, smooth isometric illustrations, and curves.

Producing the new website has been a challenge for everyone involved, and the whole process from redesign to build has taught us a lot. We had high expectations going in for what was to be delivered. We feel the end results speak for themselves, and have really tied our brand and vision together.

Goals

We had many goals with the new website:

  • Creating something to reflect our platforms maturity.
  • Align our visual identity with our new logo.
  • Present clear, concise messaging.
  • Use a more modern technology stack that is flexible and easy to support.
  • Enable more members of the team to contribute to website changes.

Design challenges

With any website refresh comes a list of challenges we had to face to get the design just right.

  • Maintaining high standards whilst retaining the vision of the founders.
  • Illustrating different aspects of Moltin.
  • Getting the first impression right of the hero section.
  • Appropriate use of color and gradients to aid legibility.
  • Team bandwidth, maintaining development of our other products (i.e. the dashboard).
  • Changing the messaging to appeal to a wider audience - not just developers, but designers and store owners.
  • Adding finishing touches to make the site flow.
Website finishing touches

Adding the finishing touches

Technical side

We use a wide range of colors and gradients as well as straight lines and curves to reflect the look and feel of our brand and keep from being generic and too bland.

The site is designed around these pre-built blocks, where each block can be easily reused and repurposed. This means new pages can be designed, built and added to the site quickly, even by our non-technical team members. In other words: not only have we done a complete redesign of the site, we’ve also rebuilt all aspects of its underlying structure from scratch.

Technical goals

Our existing site was built on a traditional CMS stack, including an SQL database. One of the main technical goals here was to rid ourselves of the costs associated with hosting, the technical maintenance needed over time, and to speed up response times for people viewing the site.

We took the decision to “Flat-File” the website, and Jekyll was the software we decided to move forward with. Not only does it speed up the loading time of the site, but it also enables us to build new pages and blog posts quicker than before. It also enables transparency for the team as every change is in GitHub and gives us full control of every aspect of the site, something a traditional CMS does not provide.

Technical challenges

TL:DR: We did magic to it.

Jekyll, in reality, is not built out of the box to support the kind of structure we envisioned. One of the biggest challenges for the site was to make it as easy as possible for our non-technical team members to update. This meant a lot of thought had to go into how we create pre-defined blocks allowing us to insert images, text and other content using front matter. By doing this, we avoided having to exclusively add HTML to create the content blocks unless these are custom. What we have done might be stretching Jekyll a bit further than what a standard Jekyll site would need, but it gives us a lot of structure and flexibility at the same time.

Another challenge was to make sure that the code examples used throughout the site could be updated from one place only. We solved this, in part, by using Jekyll’s inbuilt collections, allowing us to group all of our languages in one folder. Additionally, we added a lot of code to the languages’ front matter, thus making it accessible to other pages.

Summary

We hope you enjoy the new site as much as we do. Please feel free to share it and send us any feedback, comments or suggestions. We’d love to hear what you think!

If you haven’t already, don’t forget to sign up for our newsletter (you’ll find the link in the website footer) to get the latest Moltin updates on a monthly basis!

What’s next?

Next up, updates to accounts and documentation to bring these systems in-line with our new brand identity, stay tuned.

Damian Parker-Kidd

Written by Damian Parker-Kidd - UI Designer @ Moltin