ION Brand refresh

Bringing an institute into the modern age

I was part of the team that refreshed the design and brand for the Institute for Optimum Nutrition (ION), at all touchpoints, in a 30 month project.

Background

ION was founded in 1984 and was the first to teach the subject of nutritional therapy in the UK.

Being the pioneer, they focussed on ensuring their curriculum, sales team and administration team were of the highest quality - helping them to grow and become stable quickly.

Unfortunately, during this growth, good design and design processes often took a back-seat. This led to issues such as “designing in silos”, lack of consistency and cohesion between items and departments, difficulty in taking ownership and responsibility of items, low computer proficiency among staff, and the vast majority of work being commissioned externally. This resulted in a negative feedback loop.

ClientION
RoleRedesign lead, UX lead, processes lead, researcher, training lead
Output mediumPrint & Digital

The task and my contribution

The task was to refresh the brand design to give a professional, cohesive result. Items should be flexible and allow any member of staff to produce their required collateral easily, with digital items fitting within current, or launching, platforms.

Processes should be put in place to allow efficient, well-budgeted production.

Customers should be presented with a confident, distinctive, leader of the industry.

I was chosen to lead the refresh of the brand, lead the UX design stage, provide the training to staff afterwards, and lead the production of internal design system processes.

The project was represented across the organisation, with key personnel involved being:

Phase 1 - Foundations and project management

Constraints

The redesign was to happen during an intense period of change for ION, during which staff, procedures, courses and a university partnership were also happening. This meant:

The logo was to remain
The financial budget was minimal and limited to printing essential assets only (no print finishing, minimal ‘giveaways’, etc)
The launch was to be staggered over a 30-month period
The design should allow select documents to be able to be reproduced by anyone, in Office 365, and be printed on office printers
Items to be approved from charity trustees, senior management and relevant department leads
Certain platforms (e.g. website, video production team, etc) had predefined templates and set type of pages, APIs, etc which the redesign should fit

Working process

For 30 months this would be the primary design project, and one that would influence and change the organisation at every department (internally and externally).bIt would require the core group to work in an iterative and collaborative manner with a multitude of people and entities.

The project was managed using the SCRUM methodology, with goals being categorised and sprints occurring to achieve them.

Having been at the organisation for a few years I knew the current design had stumbling blocks and that there were user needs to be met and experiences to be improved. For this reason, I advocated for the use of design thinking and human centred design during the project.

To form the basis of our solution we would use design thinking to learn about our stakeholders needs, which would help us build the foundations of the redesign (e.g. new department colours, concepts, typefaces, etc).

We would present certain aspects to these stakeholders, and use human centred design to gather their feedback. This would refine our solutions so we could improve the experience and overcome any issues, proving particularly useful for assets such the website, emails, newsletters, prospectus and trade show booths.

Timescale

The projects timetable was:

Phase 2 - Research

Old design

Since its inception up till 2015, all external assets were contracted out and most internal assets were handled by admin staff and lecturers. External assets include the prospectus, magazine, part of the website, video and marketing paraphernalia. Internal assets include student timetables, contracts, course information, building signage, and handbooks.

This resulted in wild, inconsistent, and ineffective items being produced:

Finding out the issues with current design

The projects broad aim was to refresh the brand design, however the root goal was to find out why the current brand design had gone stale and why it was difficult to implement. To help understand this I circulated a survey amongst the staff, sending it to:

All internal staff (44 members – 14 corporate and 30 teaching)
Part-time lecturers (15 members)
External consultants (3 members)

Conclusions were:

Reliance on one internal designer for student-related assets
Some marketing assets sent to contractors, normally as urgent commissions
Departments working in silos
Assets requiring multiple (and often unnecessary) revisions
Lack of IT knowledge amongst staff and lecturers
Lack of software amongst staff and lecturers
No knowledge base to understand design rules
No reference library to understand brand design
Lack of long-term planning

I then circulated a different survey amongst a small selection of (main course) students, and the responses received stated:

"Weird colours being used” (Some documents had a range of colours)
Typefaces are different document to document
“Fonts are sometimes hard to read – more when dyslexic”
“Looks old” (Referred to marketing materials)
“Materials for screens look like copies of print” (Not interactive)
CNM look better (Praise of competition)
Spelling mistakes

Finding the illness to work out the cure

Having had these responses it became clear the issue was much deeper than originally anticipated and our work on the “design process” had to be widened.

Working with the Business Manager, Marketing & Comms Manager, and Dean, I wanted to identify the “illness” that was causing these “symptoms”, and which would inform the redesign. We settled on:

Helpfully prior to the redesign ION management had conducted all-staff meetings, workshops and strategy days to help position the brand going forward.

As a result ION had developed a new mission statement:

“Educate and enthuse, instilling optimum nutrition as the foundation of health for all”

And a new vision statement:

“Optimum nutrition throughout life”

As well as this, I came up with a tagline that alluded to ION’s heritage and gravitas, which would be used on most marketing assets:

“The home of nutritional therapy education since 1984”

Items to address

We then decided the redesign should include:

Updated colour palette
Updated typefaces
Updated internal document assets
Updated external assets
New digital presence
New video style
Training for staff

Competitors

The redesign would come at a unique time in ION’s history.

The previous year, the governing body for nutritional education (called BANT) had decreed that courses should now be delivered to the equivalent of a BSc (or higher) degree course standard. This meant that as well as it’s traditional competitors, ION would also vie for students against universities. Lastly, ION also faced competition from online-learning institutes.

Most of these competitors were either more widespread (CNM), better established (University of Westminster) or more flexible with student learning (CNELM).

Phase 3 - Design structure and concepts

External v. Internal design

During the research phase I successfully advocated to treat the external and internal designs as separate entities, with the internal design being greatly simplified. (This is discussed in depth later).

Items were sorted into the two styles. The external style:

And the internal style:

Departments as colour

The first step to the redesign was to give each ION department it’s own colour. This would enable the internal stakeholders to take ownership of their assets, and for external stakeholders it would ease recognition and identifying which team of ION an asset comes from.

Suggestions and opinions for the new hues were taken from the entire internal staff team (44 members) before they were refined by the CEO, Business manager, Dean, Marketing & Comms manager, other designer, and I.

There five departments were:

Education / Main courses (Degree, NTDC, SAC)
CPD courses (1-to-3-day short courses)
Magazine / Newsletter
Clinic
Alumni

They were given the following distinct colours:

Education / Main courses was coloured green as this hue is most associated by people with nutrition and health. The hue was shaded in a softer colour than the previous iteration (which was an RGB version outside the CMYK print range) to make it less harsh, more inviting, and let it easily complement other hues
CPD courses was coloured orange as this hue grabs attention and is considered exciting. We use this hue to make users feel invigorated and excited to book onto a course
Magazine / Newsletter was coloured in a sandy brown hue as it was quite neutral and warm. We felt this would give users a feeling of reliability, which is important when delivering news, comment or opinions
Clinic was coloured in a teal blue as this hue is calming. We felt this would give a tranquil feeling, is not “in your face”, and is seen throughout in nature
Alumni was coloured in a navy-blue hue as this was seen as a “statement” colour. We wanted to use this hue to convey graduates having authority, gravitas, and knowledge in the nutrition
To compliment these colours there are two base colours, a “bone white” and a “slate black”

Logo in colour

Due to the prohibitive cost, it was decided by the Trustees and CEO that a new logo could not be commissioned. The logo was however quite dated, having been commissioned in early 2000s, with the gradient colourisation being difficult to implement accurately across print assets.

To freshen up the logo it was decided:

The current, gradient, variation would become the “official logo” and be used in important documents (such as degree or diploma certificates, letters to business or students, and fillings with regulators, partners, etc)
A single colour “main logo” would be produced and used for all external assets (such as the prospectus, on the website, in email, etc). In the first instance it would use the ION green hue, and if there was a colour clash it would revert to the ION black or ION white
For internal assets, the “main logo” would be coloured in ION black to save money on printer ink
Each department would get their own “reversed” single colour logo to use on department specific marketing materials (such as video idents, CPD certificates, graduation paraphernalia, etc)

New typefaces

ION’s previous typeface used for marketing purposes was Bliss by Jeremy Tankard. Problems arose due to only having two licences (one for the external design agency and one for the internal designer) and none made available for internal staff (mainly due to budget constraints).

This meant typeface usage was inconsistent across the organisation. This meant staff would also end up inaccessible fonts, which were a problem to a subset of our users, such as dyslexic users or those with poor eyesight.

To alleviate these issues (in consultation with the CEO, Dean, and Business Manager) it was decided we would use open-source typefaces that were accessibility friendly. We would implement a style that used a serif typeface for the heading text and a sans serif typeface for the body text to increase contrast.

We settled on “Calibri (Regular)” for the body text. As well as satisfying the above criteria, as a bonus, it was the default Office 365 typeface, meaning staff would automatically be on the correct brand typeface.

For heading text, we would use “Kepler” by Robert Slimbach and as a fall-back use “Times New Roman”.

Concepts

To achieve “simplicity and distinctiveness”, the redesign was built around three concepts, that can be used individually, as a pair, or all three – with the asset and situation determining the outcome:

The strip
Two bold, flexible, rectangular header areas which hold important information. The top rectangle is in the department colour, and the lower rectangle is in the ION black or white.

Layering
A repeated text base layer, a texture layer, an image, and finally a border. The text base is optional, the texture layer adds richness to the asset, the image is stock imagery or proprietary, and the border helps to frame everything together.

Snap-to-edge
To ensure eyes travel across the whole asset. This is mainly used to hold the logo and the call-to-action / address passage at the bottom of the asset.

Phase 4 - Internal vs. External design

Internal design

With this redesign we wanted to ensure that all assts produced are consistent and in line with brand guidelines no matter the author. This meant producing a solution that could be implemented by people who are not versed in design, using platforms that are not best-suited for optimal design.

To do this I suggested using the “Swiss cheese model for risk analysis” approach. This model tries to minimise risk by layering a variety of defences next to each other.

Our “risk” was inconsistent and sub standardly designed assets, so to overcome this, I ensured:

The internal assets only utilise “the strip” from the three design concepts (reducing complexity)
The internal assets were produced in Microsoft Office 365 (increasing compatibility)
The internal assets (where possible) all have document templates (increasing familiarity)
The internal assets are only printed on regular office printers and are small in file size (increasing convenience)

Working with the other designer we then produced base documents for a variety of student documents and digital elements for the LMS, which included:

Student timetables
Student timetables (landscape)
Fee documents
Handbooks
Consent forms
Questionnaires
Feedback form

I also used this internal style to inform the design of a variety of other assets. For example, the wayfinding for the office was based on “the strip” concept and simple, single-colour iconography.

External design

External designs utilised all three concepts, with the “layering” concept employing all four states (or sometimes without the text layer) depending on the asset.

Phase 5 – Training and codifying

Training

Training was provided to help internal stakeholders be comfortable with this design and be proud and excited to employ it. This was broken down into a few stages.

Stage 1 - All staff were enrolled onto Office 365 training by the business manager
Stage 2 – I gave a presentation on the importance of design. Elements explored were good design practices (e.g. text hierarchy), being accessible (e.g. red-green blindness), issues arising with poor design, comparison with competitors, vision of how we see this design influencing ION, previous results of good design (e.g. magazine success)
Stage 3 – I gave a presentation on new brand guidelines
Stage 4 – The other designer gave a presentation of new Office 365 templates
Stage 5 – help/guideline documents shared
Stage 6 - small workshop where exercises completed using new design

Brand guidelines

Brand guidelines were produced to codify the new design language, help make sense of it, and allow a quick, easy reference when producing from scratch. The guidelines were broken down into three sections, covering the visual aspects, written aspects, and examples.

Results

The redesign was considered a success based on statistical and anecdotal results. Assets and entities that provided numerical data showed an uptick in customer leads and conversions.

Examples include website daily active users going from 125 to 218, magazine subscribers increasing by 950%, CPD/short courses oversubscribing and requiring a waiting list, trade show visitors increasing by 65% on average, open event attendance increasing by 30%, and student numbers increasing.

Anecdotally the redesign has been complimented by fellow learning institutes and organisations (such as a Cancer Research department head asking our Business Manager at a trade show “the agency we used for the redesign”). Customers have been receptive, stating on feedback surveys it is “vibrant”, “makes me excited about food” and “stands out against competitors”. Students have been positive stating the LMS is “easier to follow”, the documents are “cleaner” and “easier to read” and “everything is more fluid”.

Lastly our internal stakeholders are more comfortable using the assets and everyone has embraced the redesign. Once the redesign was introduced, after nine weeks there were no slip-ups or fall-backs into any aspect of the old design.

The best success indication of this redesign was that 80% of the assets/documents needed for the degree course were produced solely by teaching staff, using the templates provided and referencing the brand guidelines.