Product Design & Art Direction
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.
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
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."
Components from our design system
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.
Here is our final homepage:
Breaking down the elements in our 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 represented ideas. We then used a colour block to hold them together. This technique
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.
Using our imagery system, we created an abstraction of the Neutopia product feature set as well for a 'How it Works' section on the site.
Copyright © 2020 Alex Dale