Neutopia – Alex Dale

Responsibilities

Product Design & Art Direction

Role

Product Designer

Neutopia is a learning experience platform built for modern ways of learning. During this project we worked closely with Founder & CEO, Jamie Engel, to ensure we articulated the company's vision in a way that was clear to our target users.

In 5 weeks we helped shape their key value proposition, crafted a new visual look & feel for the brand and created a component library for their marketing website.

We also established a strong design foundation that would inform and direct the product's future visual identity.

View the website

Laying down our design foundation

During the first week of the project we ran several workshops to understand how best to communicate what Neutopia is to its audience and how to approach our re-design. These workshops included UI Audits, Competitor Analysis, Sketching Sessions, Key Value Prop Refinements and a Branding Workshop.

Our first major shift from what existed already was to create 2 landing pages for B2B & Learners as the current website attempted to communicate to both on the homepage. This distinction set the tone for our approach as we focused our attention on our B2B audience.

Week 1 Timelapse

Qualitative research

Our user testing focused on our B2B segment. We spoke to 2 academics and 6 corporates (pictured on the left).

We found that they have to constantly innovate to gain fundraising, investment and to expand their business. Existing tech doesn’t empower their modern ways of working and It’s difficult for their organisations to reach people at scale.

Refining Our Key Value Proposition

Synthesising our user research allowed us to articulate our key value proposition in the right way:

"Neutopia is for purpose-driven organisations looking to accelerate their impact. Neutopia’s next-generation learning platform makes it easy to elevate their quality of education, build their communities and amplify their impact."

Elements from our component library

Design exploration & usability testing

Before getting into design execution, we developed 3 mood boards based on industry, colour palette and tone of voice. These had been brought into the user interviews for initial feedback.

With this and the client's input, we developed 3 hero panel concepts to share with users during usability testing, where we also shared a full version of our homepage based on what we felt was the right direction at the time.

Moodboards after review

Initial hero panel concepts

Finalising our visual direction

The findings from our usability testing then fed into the final visual direction for the homepage. The final version combined elements from hero panel concept's 1 and 3.

In addition, we then began to go much deeper into defining our colour palette, imagery system and copywriting tone of voice.

Our final homepage design for B2B

Breaking down the elements in our imagery system

Imagery System

Using a technique referred to as "hacking the subconscious", we created an imagery system that combined authentic imagery of people with abstract imagery that expressed important ideas.

The authentic imagery represented collaboration and working together whilst the abstract imagery could be used to make subconscious connections to themes and ideas like climate change or personal growth.

We then used a colour block to hold the elements together.

Typography & Colour Palette

When establishing our typography we identified that the DM Serif typeface gave a credible and editorial feel which felt relevant considering Neutopia is an education start-up. Overpass served as our functional typeface but its sharp ascenders & descenders brought another layer of personality.

Our colour palette initially used vibrant colours but it started to make the site feel too "tech" & "start-up". We desaturated these primary colours and added a supporting range of earthy colours that connect back to colour palettes of the 1960s, particularly those that were associated with the counter-culture era.