IntegratED
Brand identity and Website revamp for the IntegratED schooling group. The clients focus is working with and for excluded school children, naturally my goal was to present IntegratED as an inclusive & professional group with a collaborative goal.
Click here to view the full prototype website design.
/ Web Design & Branding
Branding
Alongside website development a key factor for this project was designing IntegratED's brand identity. Liaison with the client reflected that it was vital to appear as an inclusive and connected group of individuals.
The process of logo development involved various discussions with members of the IntegratED team, and naturally this led to a constant evolution of ideas. (examples of development can be found below)
After presenting several evolved logo concepts that fit the IntegratED criteria, the clients were excited to continue with the 'honeycomb' abstract which can be seen below.
With the client also eager to appear modern and vibrant, fitting typography and a colour palette were selected to reinforce the brand goals.
Guidelines
It was vital to convey the brand identity with written and visual communication. Therefore, brand guidelines were created to show the do's and don'ts for usage of the IntegratED brand.
All of this information was shared with the client so that they can easily understand how to demonstrate themselves through print and web.
The website was developed with content in-mind, therefore we knew that the clients would eventually upload and tweak images throughout the site.
An image size guide was created to easily demonstrate the dimensions that are used for all website content blocks. This will act as a very useful tool to ensure image consistency throughout IntegratED's future.
Illustrations & Iconography
The client had expressed excitement for the inclusion of simple and modern illustrations to appear in website headers.
With this in-mind I was tasked with creating illustrations to demonstrate school scenarios for each page. These illustrations were built using the 'humaaans' template as a base.
However, after discussion with the client heavy tweaks were made to the template to ensure that the; hairstyles, uniforms, character poses, and supporting components fit the clients needs. Additionally an abstract shape was used to help define elements.
Alongside the illustrations, flowing line icons were created for use throughout the website. (Some examples of icons and their hover states are found below)
UX & UI Design
The most important aspect of this project was the new IntegratED website. With the brand in-mind, the website and its several pages were designed to reflect the client and their goals.
Alongside another UX designer I designed all of the necessary pages with consistent elements to reinforce the brand. Whereas supporting elements were also edited and designed, such as; logos, images, and icons.
This website design was created and prototyped using the Sketch UX Software.
Click here to view the full prototype website design.
Developer Hand-off
After the UX / UI design was signed off with a happy client it was important to ensure our developers had all the necessary tools at their disposal to bring the website design to life.
For me this meant stripping back all of the components we had designed to their simplest forms. I then labelled text / colour styles, and also presented dimensions for all images throughout the design.
This was then uploaded to the Marvelapp software where developers can view specific details such as padding or margins. (as shown on the images below)
With a sympli account you can view these components for yourself here.
Summary
The website redesign and brand identity were created for the IntegratED group to fit specific needs / goals. Constant communication with the client help to ensure this process was as smooth as possible and ultimately benefit the excluded children it set out to help.
To note, this project was constantly evolving due to input from the many stakeholders of the IntegratED group. We eventually headed in a different direction than I have presented here, which involved a focus on flowing lines. This new version of the IntegratED website can be found here. This version of the website also involved a similar process as outlined above however with a different set of illustrations (also designed by me).