About the Client
As part of Matchstick Creative’s team, I redesigned Make CIC’s website—taking the project from initial wireframes and prototypes through to a fully launched, responsive website that reflects the organisation’s creative community values. Make CIC operate a suite of makerspaces across the Liverpool City Region. Their spaces enable people from all walks of life to share skills, make, fix and create.
Challenge
As a community-driven social enterprise, Make needed to create a new website that better supported their vision.
Their former website was difficult to manage and maintain, with issues around accessibility and navigation.
The goal was to produce a new, responsive website that was easily manageable and tailored to their target audiences.
Response
User Experience Workshops
Discovery Workshop
To further understand the challenges that Make needed to overcome and to create actionable next steps, we began with a Discovery Workshop. This interactive workshop allowed us to work collaboratively with the team at Make to establish clear priorities within their organisation which would help them in better understanding their community and how to communicate their personality. Using a range of discussion-led activities, the Discovery Workshop not only defined key business objectives, but also began to create correlations with user stories and perspectives, developing a shared vision in the transition to the next stage of the project.
Storyboarding Workshop
Using the initial data and insights that we collected from the primary workshop, we then delivered a Storyboarding Workshop. This supported Make in their milestones of providing a better experience for their community and allowed their values and personality to shine. Hosting this engaging session encouraged us to work collaboratively with Make to understand the journey of the user.
By discovering how our findings align with the needs of the user, we were able to reach clear solutions and outcomes. Utilising storyboards at this stage meant that we were able to map out the important components of the website, whilst gaining a more visual and dynamic knowledge of the user, providing both teams with a more complex understanding of the Make community and how to reflect their needs.
Customer Journey Mapping
Audience Personas
In the next phase, we focused on audiences; what do they expect when interacting with Make? How can we meet their needs? To do this, we made audience personas, representing the different types of users in the Make community. A range of factors are considered when creating both primary and secondary personas, including how often each distinct group may use the website, what they require from the website and what their goals, attitudes and concerns may be. This provided both our team and the team at Make a bigger picture view of their audiences, allowing us to gain an empathic understanding of the community.
Customer Journey Maps
After gaining a comprehensive understanding of Make’s audience, we needed to decipher how each group might move through the website and what they are aiming to achieve. This helped Make to develop clearer messaging alongside a value-led website experience. Customer journey maps helped us to clearly define and reach goals for many varied audiences that might interact with the website.
Wireframes
With a bunch of helpful information to hand, we were able to create insight-driven wireframes. These wireframes helped us to bring to life the desires, needs and goals for all of our different audiences. The wireframes provided us with a visual understanding of the pages and how this would develop functionality throughout the design stage.
Usability Testing
We carried out usability testing to ensure that the design process led to an improved user experience. We tested on various groups including members of Matchstick Creative and Make CIC teams, introducing all participants to the newly developed audience personas and evaluating how users interact with the model. This open, collaborative approach produced outstanding insights and results. We addressed the overall goal of defining clear priorities, audiences and creating an intuitive user experience.
Website Development
User Testing and Experience Research
In order to inform the design process and better understand the obstacles that Make needed to overcome, our experience team facilitated user testing and research. By hosting a series of interactive workshops and sessions, we were able to identify the needs and goals of Make’s diverse community of users. This allowed us to align the priorities of the organisation with the requirements of the user, creating actionable next steps for the design process. Through usability testing, our website development team were then able to begin creating a new website that prioritised audience and accessibility.
Collaborative Design
We used an open, collaborative approach to the website development stage of the project. This meant hosting regular check-ins with the team at Make to maintain a shared vision and consistent communication throughout. Implementing co-design in the project allowed both teams to use shared knowledge and experience to create a more innovative and organised process. Both teams were able to better articulate ideas and concepts, creating a strong cross-team bond.
We worked collectively to identify practical design plans that support the overall goals for the new website, maintaining a shared vision that prioritised the user and their needs. Combining the development and design team at this stage in the process led to improved creativity and a better understanding of our services and how they meet the needs of Make.
Website Design and Build
Make found their former website to be impractical and time consuming to manage. It didn’t target their specific audiences and wasn’t aligned with their brand vision. Applying our insights-driven user experience and Make’s brand identity, we were able to begin building the new website. Our template used Sage and Bedrock, which allowed us to move through the process in an efficient and developed way. These frameworks also permitted us to build better themes and carefully manage other elements of the website, including files and plug-ins. Not only did this tackle practicality issues, but also informed the content part of the build, creating more defined and purposeful components that were in line with the goals of Make and their community.
Content
On their previous website, Make found that they had to manually insert new content on each of the pages. We used a number of different techniques to make this easier on the new website, including using Advanced Custom Pro alongside a modern WordPress block API. This added extra content fields, helping us to work more quickly when building the website and also carefully tailor content editing processes.
A modular build was implemented to divide the website into smaller, visual blocks. This step prevented our design team from creating any repetition in coding. Each block was now of a more manageable size, allowing us to reduce any redundant content that was out of date or unaligned with the needs of the new website.
Adding the Gutenberg Editor in WordPress meant that Make could now visually add content and take control of managing their site. The use of content blocks led to better accessibility for the team at Make when editing and uploading content.
Photography
To effectively tell Make’s brand story of driving change across their communities, photography was going to play a key role in the website’s build and design. The old website prevented users from being able to click and enlarge or see any information about the images. When developing the new website, we used the Bootstrap framework to enable a more responsive design. The framework enabled us to add features such as image carousels and accordions, meaning images now provided more of a purpose, with the addition of accompanying text for context when images are enlarged.
To provide further interactive and bespoke elements, we added a search function for the whole website and social media feeds to supply fresh and engaging content. This was achieved through carefully selected code languages by our developers; such as PHP, HTML, CSS, Javascript and Laravel.
Plugins
Event Management
Make CIC offer a range of events and workshops across their multiple venues, but found it difficult to manage event listings on their previous website. By installing The Events Calendar software component to WordPress, we were able to establish clearer event listings and booking links that could be easily customised by the team at Make.
Search Engine Optimisation
Alongside ensuring clarity around the new website and its functions, we also wanted to ensure that the website and its content are easy to locate. In order to improve their online visibility, we installed SEO Framework, a plugin that helps to produce effective page descriptions and keywords.
Fully Custom Theme
Make wanted their new website to be easily manageable for their team, so that they could update and amend content whenever necessary. In the design phase, we created a fully custom theme using an HTML boilerplate. To ensure a future-proof, flexible website we created custom post types that enabled Make to update and manage residents, course teachers, case studies and locations.
Results
A customisable, responsive website that is manageable by Content Managers and Web Developers alike
An empowered team that has the ability to add, edit and update events, copy, images and content across the website.
Improved SEO by using the SEO framework plugin. We helped them to categorise their existing content for better usability
Targeted specific audiences by separating their locations into different pages
< Go back to the portfolio