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.
The two key goals for this project were:
- Website to show case studies, encourage innovators to bring their research to MICRA and attract investment and licensing enquiries from third parties.
- Communications Portal system via which MICRA could send information to innovators, investors and licensees securely.
Building from Home for the First Time
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 user journeys. It took some time to get our heads around the complexity, but once we understood the services and the target market, the project could run smoothly.
Sharing Designs with Clients
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. From this we created a unique brand design system, which provided all the components we would need for the website. 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.
3 User Types
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.
- Innovator – Researchers whose work has led to the creation of a new product or service
- Investor – Third parties looking to contribute to the development of new products or services for returns later on
- Licensee – Third parties looking to secure a license to sell a patented product or service developed through MICRA.
Clear User Journeys
These User Types are distinct audiences, with varying situations, knowledge and needs. As such, the user journeys needed to be as simple and clear as possible.
We decided to use a similar structure to our previous project with BCUAdvantage, and funnel users based on their goal.
A dropdown menu offers options reading:
- I want to Innovate
- I want to Invest
- I want to License
This active copy is at once consistent across the site and distinct from one another, directing users to the relevant pages straight away. The phrase ‘I want to’ immediately encourages the user to commit to their goals, cementing MICRA as an organisation that has already helped them.
Navy & Red
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, the red accent is used sparingly to give more contrast to CTAs and important information in the website.
The home page features a prominent ‘Enquire Now’ button. It’s a real win for us that the chosen shade of red creates attention, allowing this button to be easy to see without seeming overbearing.
Iconic Design
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.
Animation
To soften the impact of our red buttons, we introduced subtle animations and micro-interactions. On hover, an arrow appears encouraging users to click through. These little interactions bring the site to life and help people find their way through the user journeys.
Multi-step Form
To ensure the user journey ends in enquiries, we’ve created a bespoke multi-step form which triggers different fields based on user type. 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.
Clear User Journeys for Technology Transfer
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 spite of challenges.
