MICRA is a collaborative project bringing together 8 Universities in the Midlands to create the UK’s largest technology transfer ecosystem. The organisation’s services encompass new business incubation, investment procurement and product licensing. Being such a complex organisation, the original website for MICRA was not user-friendly. It was jumbled, difficult to navigate and overwhelming. The incoherent user journey led to potential clients losing interest and leaving the site. MICRA asked KIJO to simplify this maze of services into clear user journeys and create a new website that was engaging and easy to use. We also agreed to design new branding for MICRA to apply across their materials.
This web design project had clear goals. MICRA wanted a website which could display case studies and a contact form. They also needed to encourage innovators to continue their research at a MICRA facility, attract investment and draw licensing enquiries. The website we produced achieves this with three clear user journeys, a multi-step enquiry form and case study pages to which the organisation can add.
As part of our ongoing public sector portfolio, MICRA’s website is a key success for us. Most public sector organisations are, rightly, focused on function. They want their website users to be able to access the service they provide, and aren’t too interested in the aesthetics of web design, or flashy features.
However, public sector organisations such as MICRA often provide multiple services, aimed at various user types. Their websites can become overpopulated and difficult to navigate as a result. This leads to users feeling overwhelmed by options and leaving the page before they find what they need.
As we’ve shown before, functional websites for public sector organisations benefit from being engaging and easy to navigate. Websites which are aesthetically pleasing help people enjoy their interaction with the organisation, while clear user journeys direct them to the information most relevant to them.
We’re proud to share that the minimalist website we created for MICRA has been awarded Best UI, Best UX, Best Innovation and Special Kudos on CSS Design Awards, showing that public sector web design doesn’t have to be boring.
The main challenge in this project was one faced by many agencies worldwide: designing and building in lockdown. We completed this project in the first few weeks of the UK’s initial lockdown while learning to collaborate online. It was a relief to have so much of our workspace available online already, but strange to share designs over zoom.
We also had to untangle the workings of MICRA’s offering before we could begin to design each user journey. Once we understood the services and the target market, the project could run smoothly.
The design stage was smooth and efficient, thanks to our design system. We begin every project by creating a selection of mood boards, to give clients a choice of colour schemes and fonts. Then, we create a unique brand design system, which provides all the components we would need for the website. Using this structure meant the client came on the visual design journey with us.
Rather than sending over the files, our designer, Liam, talked the client through each stage of the design in a call. This helped keep the client engaged with the initial ideas, avoiding delays and difficult changes later on.
Designing User Journeys has to start with user types. Knowing the core target markets meant we could create clear navigation to the most relevant sections.
These User Types are distinct audiences, with varying situations, knowledge and needs. As such, we needed to make each user journey as simple and clear as possible.
Here, we decided to use a similar structure to our previous project with BCU Advantage. The website funnels users based on their individual goals.
To do this, we created a dropdown menu with options reading “I want to Innovate”, “I want to Invest”, and “I want to License”.
This copy is consistent across the site, helping signpost the right pathways. This directs users to the relevant pages straight away.
We use this active, first-person language because the phrase ‘I want to’ immediately encourages the user to commit to their goals. Because of this, selecting one of these options psychologically cements MICRA as a helpful organisation from the start.
MICRA came to us with a navy, white and red colour palette. We decided to deploy these colours in a way that would direct attention and make the customer journey really clear. To achieve this, we used the red accent sparingly, giving more contrast to CTAs and important information.
The home page uses the red shade to create a prominent ‘Enquire Now’ button. It’s a real win for us that the chosen shade of red creates attention towards button without seeming overbearing.
To add a visual guide to the separate funnels, we designed icons for each user type which are used throughout the website. These minimalist line-drawings are in-keeping with the navy and red colour scheme, and become brand assets for the organisation.
We wanted to create a header style that tied in with the existing MICRA brand, without being too bland. Rather than using just text, we introduced a red full stop at the end of each title. The result is visual impact in every header and a linguistic impact on each title, sounding snappy and forthright in their communications.
To soften the impact of our red buttons, we introduced subtle animations and micro-interactions. When a user hovers their mouse over a button, an arrow appears. This encourages users to click through. These little interactions bring the site to life and help people find their way through the user journeys.
To ensure the user journey ends in enquiries, we’ve created a bespoke multi-step form which triggers different fields based on user type. Multi-step forms allow users to see how many steps they will need to fill in, and feels more like a process than a single page. This means that, once a user has completed the first step, they are likely to continue until the enquiry is made. Humans enjoy completion, and the multi-step form helps this.
Split into four stages, users begin by selecting a service, using the same action copy and icons as throughout the website. Stage 2 offers a checklist of facilities, companies and technologies, tailored to the user type indicated at stage 1. This helps collect first-party data and tailor mailing lists for future use. Stage 3 offers a simple free text box for users to explain their interest, giving their details in stage 4.
Thanks to the clear user journeys and directive use of colour, MICRA now has a website that is easy to navigate from a user perspective. Our team has enjoyed the challenge of creating a simple interface for a complex organisation, putting to use the learnings of previous projects and testing out new internal workflows. Completing this web design project so smoothly felt like a real win in the beginning of lockdown, setting us up for a successful year in our newly remote agency.
