New Website and Brochure launches

Since the beginning, we've always wanted Element Softworks to be at the forefront of innovation and inspiration. That always was one of our core values, and today, with the release of our new branding, we finally feel true to our values again.

Our last website was released at the end of of 2017, and especially in this industry, a website is never done. Bringing on board two new employees this summer who specialise in graphic design meant we were able to focus heavily on the user experience and graphics side of the website. With that in mind, we decided to rebuild our website and branding from the ground up using new technologies and techniques that we have learnt in the past 2 years (since the last site).

In this article we're going to guide you through our process of planning, designing and coding our website, and at the same time compare this with how we build websites for our clients.

Step One: Research and Needs

The first step we have with any client is to first work out do they already have an existing website or branding? - because we did, it meant this saved us a lot of time during this process. Getting a direction of where the client currently is, gives us a stage to build off of when trying to find out which direction they want their brand and online presence to go in.

Like with us (as a client for a change), most clients have a good expectation of where they need to get - our job is to help them understand and execute how they can get there. Building up a requirements document provides clarity and purpose to what we're doing for the client and allows them to approve the planned work before they've financially committed to anything.

Example of our branded SVG work

Planning out a website in advance helps everyone further down in the process to quickly and confidently make assets and code. Like for example, building flat-style custom branded SVG graphics.

Step Two: Wireframe and Site Map

After the client is has signed off on our requirements document, we can begin the site map and wireframe stage. The site map usually is quite easy to build at this stage because it's the outline of the main requirements. Factoring in the client's design goals and our own outlined style that we have proposed for each project, we now start building a wireframe of each page.

Being an agency, we know what our site visitors expect when going to our site and we already had pages in place from the previous site to help decide the start of our wireframes. Our biggest changes came from carefully going through 2 years worth of analytics and SEO data to see what pages didn't get hits, what pages drove a lot of traffic and where our bounce rate changes.

The main feedback we got from asking clients, friends and strangers about our website (a balanced group of people helps build a true opinion of your product) was we had too many tabs on our navigation. Which meant the main pages we wanted potential clients to focus on the most, was being lost against the number of secondary pages.

Differences in the old navbar and new navbars

In our new design, we had a heavy focus on only portraying important information, like cutting down the navbar to the bare essentials.

Step Three: Design

This step is always the most drastic because it's the key process that brings people's ideas to fruition. Our goto process is using Adobe XD for building of the designs because it a great tool to prototype designs quickly to clients. And on the other end, it has features for developers to easily pull coding/config snippets or images straight out of specific areas of the design (which would otherwise need a designer to liaise through). In our workflow, it's a perfect bridge between the client/designer/developer collaboration.

Developing is always the most time-consuming process in terms of producing results, that's why we try to get all decisions and changes squeezed out in the beginning. With the deeper into the steps we go, the less major changes there should be. This gives both value to the customer (because we can action and prototype changes quickly) and to us (because we're not wasting time doing something, that an earlier process could have done more efficiently).

Changes between the old and new homepage hero settings

The main design and UX changes we identified and actioned:

  • Problem: We didn't advertise exactly how we could benefit the client, rather we talked about ourselves all the time in a bid to get people to become familiar with our brand as seen above.
  • Solution: Our wording is now more direct to the client, we decided to grow our brand identity through a vibrant colour scheme (which matched our existing branding - yellow/grey/white).
  • Problem: Our old site relied heavily on photography, whereas we could better utilise that space to showcase more of our talents.
  • Solution: The new site focuses on a strong branding design with SVGs being used on each page (some with animations) to show off our design skills.
  • Problem: People viewed our site and then... just left.
  • Solution: Having interested visitors is great, but if you don't direct/funnel them into becoming a client then you're wasting leads and money. We placed strong and relevant CTAs on every page and increased our analytic monitoring to find where people were clicking away. Finally, we placed a live chat on our site for customers to easily contact us so we can keep them interested.
  • Problem: We didn't focus enough on mobile.
  • Solution: In hindsight, most of our traffic was coming from mobile. With our new site built, we plan to market heavily on social (where people primarily use mobile). We had to design mobile-first this time and keep our attention on mobile for any bugs. First impressions matter and any mistakes, especially as a web agency, will deter customers.

Adobe XD vs the final design

On the left is the Adobe XD design vs the final developed version on the right.

Step Four: Develop and Deploy

Finally, we're into development, this step involves coding the website in the desired codebase that was selected in the first stage, this, however, can change slightly if requirements are constantly evolving. The standard for us is coding in modern frontend frameworks like React.js or Vue.js. This site (including the blog and portfolio) was built in Gridsome, a Vue.js framework for building static based website, developed with JAMstack in mind.

All of our websites are built to be 100% responsive and fast, we take a great deal of care in ensuring a high level of user experience is maintained throughout, we can also track your site through analytics and screen monitoring to ensure your site is working as expected.

We usually deploy all of our client's websites for them, our go-to is using Netlify or Heroku as it allows automatic CI deployments. We protect all of our client's domains through CloudFlare which deploys your site around the world to 180 datacentres. Meaning even if we deploy your server to London, someone in North American could load your site on their 50+ data centres in that continent. They also offer cool features like email obfuscation and can protect your website against a 30Tbps DDoS attack.

For larger websites, we have the infrastructure set up for large scale deployment. We have experience in a range of databases, however, for this website, we didn't need to use one as it's a static website (requires no server).

The final step is security, all of our sites only serve HTTPS connections using the highest level of encryption available through SSL certificates, matched to our client's website depending on how heavy duty they need their protection. We also run HTTP/2 and TLS1.3 where available.

Services we offer

Take a look around our site and give us your honest feedback! Bonus points if you can spot any mistakes or bugs that our QA team missed. We're always ready to take on new projects big or small - so what are you waiting for?

We've also released our Brochure today as well - but we'll talk in more detail about that in another post!

Thank you for taking the time to read our first post on our new site and please do follow us on Instagram, Facebook and LinkedIn to keep up to date with our progress.