by Nick Fitzgerald
Websites in a time of lockdown - How three companies achieved one goal
This was somewhat of a new experience for me. Usually, at me&you, we would take time to get to know our client’s business, their competitors and the general goals and ambitions for their website. Armed with this knowledge, we would create sitemaps and customer journeys before knuckling down and planning out a Wireframe - this is a bare bones layout, usually designed in shades of black and grey, to highlight where key items would sit on various pages. Once the Wireframes are signed off, the bland greyscale of the site gets a facelift and we start to introduce colours, imagery, icons and generally any other design touches we feel the site needs.
For this project however, a great chunk of research, initial planning and goals had already been completed by BCarm and Sleeping Giant Media (SGM). Heck, BCarm even had sitemaps, user flows tying into SGM’s great SEO research and even wireframes! So what was left for me&you to do? Read on dear friend and I shall tell you ;)
Changing mindset
BCarm are by no means a mysterious business to us. We updated their whole brand and have completed various other design jobs for them over the last few years, so the background information of what their business is about was already clear in our minds. Couple this with their clear ambition for their website and the excellent SEO research conducted by Sleeping Giant Media, and there was an even clearer picture of what needed to be done.
The first thing I started with was reviewing everything that had been created so far. Combing through the wireframes and technical research, I created a document that challenged their decisions and suggested solutions to the potential problems. Following this, it was a simple case of jumping on a video call (let’s be honest, it’s our lives now!) and discussing these points with the BCarm team.
Armed with even more information and having BCarm’s agreement with the document created, I proceeded to create my own wireframes based on the initial concepts BCarm had designed, but with my own knowledge from reviewing their documentation.
It was then time for three worlds to combine! That sounds more dramatic than it was – I had a video call with BCarm and Sleeping Giant Media. The purpose of this was to ensure I hadn’t undermined SGM’s findings so that the proposed SEO plan knitted well with the overall UX design I had created. This whole conversation was a great learning experience for me, as the team at SGM gave great insight to what would need changing from an SEO perspective - something I wouldn’t always have access to on web design jobs. We came away from this meeting with amendments and I implemented these into my wireframes.
Prototypes & Design Systems
Now let's jump forward to the part I enjoy the most, the UI or the fleshing out of the site. As the wireframes had been signed off by all parties, it was time to make the site come to life! I think people are fairly familiar with brand guidelines and for this part of the project, I devised a very similar concept - a design system. You may have heard this term thrown around before and it basically takes existing brand guidelines, but expands them for a digital application.
You can view the design system below.
The purpose of the design system is to keep a record of the core elements of the site. This includes logos, colours, button styles and various blocks that may be found within the site. Websites have a lot of recurring blocks on various pages, so being able to show what specific sections look like in isolation as well as in conjunction with an initial homepage layout helps all parties involved to understand how the site will fit together. It is also easier when it comes to feedback as you are changing specific blocks rather than a whole page at a time. The beauty of a design system is once it is complete, anyone can work from it and utilise its various elements - just like using brand guidelines. This creates a much more efficient work flow. I prototype websites in Adobe Xd and this means that the design system ‘blocks’ link to a newly created document. As one block is updated, any instance of that block on the new document gets instantly updated across the entire document.
Let me explain that further. If you had 100 buttons over the entire prototype and a few weeks down the line you decided you wanted your button colour and shape changed, you simply change the values in the design system and BAM all buttons update at once!
I built the design system in conjunction with a homepage layout so that we could all see how the various elements would work together on a page. Once the design system and initial homepage layout were signed off, it was a case of fleshing out the rest of the site utilising the already designed blocks of the design system.
The last piece of the puzzle was to output a development link of the full prototype for BCarm’s in-house developers to start coding the site. I then provided any additional support they needed with UX queries and suggestions of how they could make the site more interesting. BCarm has a nice suite of icons that we designed for them (not that I’m biased!) and we decided these would look great if they were animated. Working closely with BCarm’s developers, I created the animations and output them in a way that means they scale based on the size of the device they are being viewed on. This ensures the animations always look crisp on any display and adds an extra level of interest as you scroll through the site.
So what have I taken away from this experience?
- We can slot into any project no matter how far along it seems to be
- Collaboration works seamlessly when all parties have great communication
- Video calls are essential to our daily working lives at the moment!
- Design systems are an incredibly valuable tool and you should use one for your next web project
- Utilise the technology you have to really bring your design to life and make feedback simple and constructive
- I sure do love web design!