The problem

The client’s microsite was out of date. It was not responsive and not inline with the newly published brand guidelines.

Design guidelines

  • Must align to the new brand guidelines
  • Design needs to be responsive across desktop, laptop, tablet and mobile
  • Design must use existing text and be mindful of different languages

Wire-framing

I read through all the current content to make sure the user journeys worked well. I noticed that the old microsite had a complicated form to complete which would work better if different users had different forms. I collaborated with the project manager and developers and we agreed it was possible to improve the forms.

Design

I followed the guidelines to improve the design. Here are some design features I added to the design:

  • I spaced out the content to let it breathe, but not so much that the user would have to scroll a lot.
  • Used the logo graphic in the header to create a unique shape for the photo to fit in.
  • Added the gradients to the headers and main call to action blocks to make them stand out. This gradient gave the design a more futuristic feel that I was looking for.
  • At the client’s request I added ‘pops’ of bright colours, such as orange, to reflect Spain being a vibrant country. I used the colours from the secondary colour palette.
  • I followed accessibility guidelines.

Prototype

Once I finished all the pages, I created a prototype in Adobe XD. This enabled me to show the final designs to the client, and allowed the client to test the pages in their own time.

The lines show the user journeys
The complete connected prototype

Conclusion

Once the developers had created the new microsite design, and I tested it for bugs, it was ready to give to the client.

Overall, the new design increased the time users spent on the website and sign-ups went up.