How we made MADE
How MCEP got transformed into MADE, how the visual identity was born and how we used that to give their website a whole new look and purpose
Brief
Made approached us in February. They needed help creating:
- A new brand & visual identity
- A new website for teachers
MADE vision
“For the city to become a beacon for creative education, where the arts add magic to life experiences and learning. As a result, all children and young people will thrive and enjoy more choice in their lives. They will develop flexible creative skills that will help them to become thriving members of teams in a variety of cultural, educational and professional environments.”
Proposal
We responded with a 4-page proposal, showing similar work, our approach, and project costs.
Team
SIDE stands for Social Impact Digital Explorers. We focus on Social Impact. We call ourselves Digital Explorers because we see product development is fundamentally a process of exploration.
The team was made up of 3 people from SIDE and 3 people from MADE.
Tools
Below is a list of the tools we used throughout the project. We provide more context further down, depending on how we used the tool.
- Slack — for day-to-day communication
- Zoom — for video calls and meetings
- Miro — for planning, workshopping and creating collaboratively
- Google Docs & Sheets — for drafting and sharing content
- Figma — for creating the branding designing elements
- After Effects — for animating the logo
- Webflow — for building the website
- Jetboost — for making parts of the website filter dynamically
Process
Our method of working begins with Discovery, which feed into Design and Development. We mapped out what this journey would like over the course of the project. With the launch date being 5 July, we left ourselves wiggle room for challenges to arise and timelines to shift.
BRANDING
MADE knew exactly what kind of personality they wanted their new brand to embody. It was important for them to stand out as a “creative force with a colourful, expressive and positive energy”. Their primary audience was focused on educators but with a direct appeal to the young people of Manchester who would benefit from their services, and get connected to its culture and creativity.
The start of something new
To begin rebranding, we first needed a shiny new name. Working collaboratively with the MADE team we put our minds together for an explorative brainstorming session using Miro. Key words from prior work done by MADE with a brand consultant were extracted and inspiration from a youth panel discussion they had conducted was also included.
We ventured down many avenues drawing from Manchester specific imagery and history, to creativity focused names. Identifying patterns and relevant words we also investigated acronym based names.
5 possible names and visual directions from this intense exploration were shortlisted and presented to MADE’s working group for feedback.
The reactions and input from the working group were positive and insightful. All the names were well considered with the group — weighing its impact, positives and negatives. Ultimately MADE seemed to be highly favoured, so much so that it could stand on its own without the need for an acronym.
Some of the notable feedback from this session:
“I like the action orientation of MADE — sounds like an achievement”
“I like MADE — it’s like ‘Made in Manchester”
“I think the pros outweigh the cons for MADE — it is more arts focused than creativity but works well in lots of other ways”
MADE became the favourite because it is:
- Short and memorable
- Embodies the idea of creativity and activity
- Has huge scope for extensibility
Branding & Identity
The visual identity plays an important part in capturing the vibrancy and purpose of the organisation. This was considered alongside the renaming to make sure they really came together.
Our explorations revolved around the ideas of people, community, connection, simplicity and playfulness. Using Miro again, we looked at bold colours, simple shapes, clean imagery and of course, classic Manchester symbols and colours (hives, bees, etc).
With the new name finalised we shortlisted 3 possible visual directions which would suit it.
- Bauhaus — energetic and constructed from shapes (leans into the name)
- Typography — using type to express a ‘handmade’ feel
- Illustrations — playful and simple imagery to connect to audience
Discussing these directions with the MADE team, the bauhaus style was a clear winner. It moulded well with the new name as the bold colours and simple shapes could be seen as a metaphor for making and creativity, while also being playful and youthful.
Logo
The bauhaus visual exploration began with the basics: pencil and paper. After some initial ideas were drawn out we moved on to Figma to further develop the logo. Through feedback and development we decided on having outlined and solid black variations of the logos because of how effective and bold they were even without colour.
Logo animation
A logo animation to accompany MADE’s video resources was needed. Adobe After Effects was used to create the animation where many different motion compositions were explored.
We really played with the idea of MADE visually being made. The pink shapes appear in a scattered order first, followed by the purple shapes layering over them in the same fashion. This shows the construction of the logo but also the idea of how the creative process is not a linear one.
WEBSITE
Discovery
Research Synthesis & Information Architecture
The focus of the website is to be a hub of creative resources for Manchester educators. MADE had conducted surveys with teachers to better understand the kind of content teachers look for and use to ensure that they would be delivering relevant and useful resources.
From this research we were able to understand the most wanted content, the most used resources and the website requirements. We prioritised the key features and built an initial information architecture which got further developed in the website building process.
Inspiration analysis
We had collated a number of websites that focused on educational resources to look at inspiration for design. All of these sites were analysed and annotated which gave useful insight into how similar resources had been presented and laid out for the user.
Design
Wire framing
To wireframe, we needed to get an understanding of the website content — especially the resource library. We created a Google Sheet for the MADE team to fill in with the educator resources they had. This fleshed out the information to be presented and what the website could look like.
There was a mix of different types of resources which required some combing through and re-organising with the MADE team. This was important for structuring the CMS for the website build and also for providing an understandable and pleasant user experience. Content structuring really evolved through combining different resources into one, grouping similar resources into collections, and adding an ‘activity type’ tag for filtering the various types of content.
Visual Design
With the brand identity more solidified we experimented with how this could come through with the visual design for the website. We used Figma to create the designs, in which we explored the full colour pallet set for the brand and simple shapes — borrowing from the logo design.
Simplicity and clarity is the direction we took. Bold coloured shapes with a lot of white space and small coloured detailed elements in the information cards.
The other pages such as the Resource Library, Resource Page and Facilitators were kept simple and clean. The main focus of these pages were about the information and the content for the user therefore, in terms of styling, only the tinted colours of the brand were used.
Development
We use Webflow to build websites at SIDE Labs. It allows us to build through a visual editor, without having to write any code.
Website build
Site build ran from early May to late June. The site is built from 6 static pages and 1 dynamic page, known in Webflow as a CMS Collection Page. Jetboost has been used to dynamically filter the Resources and Events pages.
Videos are embedded onto resource pages, like this one, through the new MADE YouTube channel. The MADE Blog is created using Medium.
CMS structuring
The site contains 9 CMS Collections. The four main ones are Resources, Events, Partners and News. The most complex CMS Collection is the Resources Collection. It references 4 other Collections, pictured below.
We used Miro to plan out the CMS Collections before building in Webflow.
User testing
Towards the end of the build we conducted user tests with three educators, to see how well the site performed and where we could improve it. We asked some background questions then asked the educators to perform some tasks on the site, such as:
- Imagine that you’re looking for a poetry resource for a year 8 class, how would you go about finding a suitable resource? Please think out loud.
- Think of an upcoming class you’re teaching. Imagine you want to inject some creativity into this lesson, how would you look for something suitable? Please talk me through your thinking.
- You’re looking for someone to come in and deliver a creative class/workshop for you students, how would you look for this option?
We drew up a list of recommendations and talked things through with the MADE team. Some things were improvements to the website, others were changes to the resources themselves.
We have a list of things in a “Backlog” list on Trello to work through.
What’s next
The MADE partnership are now sharing and using the site. We’ll continue to monitor how the site is being used, and where we can improve things.
Depending on priorities, we’ll work through, and perhaps develop further, the “Backlog” list in Trello.
Final Reflections
Working on MADE has been such a great experience from start to finish, and I’ve had the opportunity to work on it literally every step of the way — from the proposal for the project to the delivery.
There’s been so much to learn and understand during this process. Working with new tools, navigating relationships and generally honing my skills and confidence as a young designer.
I particularly enjoyed creating the visual designs for the brand — it’s not everyday you get the brief to create something fun and bold and are actually allowed the space and freedom to carry that through. Understanding the bridge that connects visual design to implementation was also an interesting process — thinking in terms of CMS, UX and UI design within the actual build. Jumping through all the new webflow hoops in building the website was also exciting and I’m looking forward to applying this learning to other projects.
So much of what I’ve gained is definitely credited to the amazing team I was a part of. Both internally at SIDE where I had Noam (the boss man/ project lead) and Will (my manager) for feedback and guidance. But also Adam, Melissa and Tiffany from MADE who always came with clarity, positivity and trust and made the whole working relationship wonderful.
Working in such a collaborative way also made me reflect on how far openness, feedback and trust can take you on a project and understand what a good fit between client and agency really means.
Ultimately, it’s been an enriching learning experience in so many different ways and I’m excited to see what’s next.
