Branding as a Service | Wesley van den Brink

Context

A brand is an association in the thinking of the customer, where consistency creates trust and ensures a higher conversion rate. The desire for every (large) organisation: a single source of truth for all their branding needs.

Do you have brand guidelines? Where are they kept? Do you have the ability to share them easily with different audiences? And how about versioning and source files?

During my graduation internship at Allyourmedia I worked on the foundation for a Branding as a Service solution in which the client can maintain, centralise and manage their corporate identity.

The Challenge

PROBLEM

Brand identity communication, management and consistency is difficult to handle next to our daily work activities. Clients, partners and third parties of Allyourmedia are experiencing these problems. Without a central location it's extremely difficult to provide everyone with the right principles.

NEED

There is a need for organisation-wide communication of brand guidelines. Central provision of supplies. Make the handling and workflow with regard to corporate identity development more efficient.

Design Thinking Process

Design Thinking 101 - nngroup.com

The methodelogy that perfectly fits for defining problems based on human needs. During my graduation internship I followed this methodology in a non-linear, iterative process. This allowed me to challenge assumptions, redefine problems and create solutions to prototype and test. I worked through the five stages: empathise, define, ideate, prototype and test. Experience how the five iterations went and to what end result it has led.

Desk Research

Literature study

I researched the subject by conducting a literature study, benchmark creation and design pattern search. This resulted in a good preparation for the interviews and card sorting session.
‍
A corporate identity is the whole set of shapes, texts, images and colours, both online and offline, with which you stand out from other providers. It influences how people think about you.

Which elements make up a corporate identity? I have investigated and documented this in tables. Talking about: brand, logo, typography, colours, tone of voice, iconography, illustrations, imagery.

Benchmark creation

In the Benchmark Creation I investigated other providers of Software as a Service products based on the four steps (intro, revenue model, brand content and functions). It allows me to learn from them: What can one do and what can't the other do?

Information obtained from the following providers:
Bynder, Frontify, Sabern, Brandpad, Comrads, Brandware, Smart FMS, Patternlab, Huge, Fabricator, AssetBank, Gelato, Swivle, Filecamp, Pinca Media Manager, and SmallWorlders.

Interviews

I have conducted semi-structured interviews with partners, agencies and a freelancer. With this I have gone into the topic to gain insight in the motivations, thoughts and attitudes of an individual. I was looking for answers to the following main questions:

Corporate identity

What is your Unique Selling Point?
How are you getting started?
How do you deliver this?
How will this be delivered to you?
What is your most pleasant experience?

concistency

How do you guarantee the quality?
What actions do you take into account?
What feelings does this give rise to?
What would you like to improve?

workflow

Do you have a structured process?
How do you make the process dynamic?
Is it always the same?
Where do you see room for improvements?
What makes it for you easily shareable?

brand portal

How do you gather/save guidelines?
How do you get access?
Experience with online stored guidelines?
Are you willing to pay for that?
How important is an online storage for you?

Card sorting

The purpose of the Card Sorting session with Allyourmedia was to divide the obtained insights into categories. I facilitated this session with them, because they are also a good representation of the target group. This session gave me an insight into what needs to be done where and why.

Personas

Writing a persona provides in-depth knowledge of the target group. A persona helps me understand them better. What are their characteristics, goals, needs, questions and fears?

I have combined existing knowledge within the company with the new knowledge obtained from user research. As a result, I have developed three personas: client, partner and third party.

GOALS & needs

Corporate identities are organic and dynamic
Transmitting the same message within a brand identity.
Growing in the identity of the customer.
Optimise unnecessary manual activities.
Realise strong (visual) identities.
Brand guidelines and rules are well known throughout the organisation.
Ready-to-use delivery.
Safe and secure.

frustrations

Not communicated organisation-wide.
Incorrect interpretations
Wild-growth arising within the brand.
Minimal contact moments.
There is too little control on delivery and the use of the corporate identity.
PDF format handbook.

User Journeys

client

The buyer of a new corporate identity or a redesign of the current corporate identity. The client will come into contact with the application when a new corporate identity or redesign is delivered from Allyourmedia or a partner of Allyourmedia that acts as a reseller of the Software as a Service application.

Actions:

Delivery brand identity.
Communicating identity throughout the organisation.
Ask for files.
Outsourcing new expression.
Checking new expression.

Feelings and thinkings:

Enthusiasm and happy.
But how? Communication in which way?
Insecure and stressed.
Are we in control?
Where are the source files?
Did I forget something?

partner

The target segment 'partner' is a company that will act as a reseller of the Software as a Service application. The company has the possibility to offer the application to its own customers.

Actions:

Request from customer.
Briefing
Introduction
Budget
Sketches
Production
Delivery

Feelings and thinkings:

Curious and enthusiastic.
Do I spend my time efficiently? Is this going to be an assignment?
Is it a long term customer?
Do we want to build this and connect our brand to it?
Uncertainty and stressed.
Is everything complete? Is the brand identity manual clear?
Do they use it correctly as described?

third party

These companies/people are supplied with existing business identities for which new expressions need to be developed. This is a form of outsourcing. The third party will come into contact with the application when he/she receives an existing business identity.

Actions:

Request new assignment.
Briefing
Budget
Delivery components
Contact for other files
Delivery of files
Check delivery
Approval delivery

Feelings and thinkings:

Enthusiastic
Questions
Uncertainty
Is the briefing clear enough? Is it a long-term client?
How many hours are needed?
Do I have all necessities?
Where are the other files?
Irritation
Licences? Why don't I get everything?
Does it meet the guidelines?
Happy and hesitant.

Mindmapping

A mind map has helped me get my thoughts in order and makes me think about all aspects of the subject. Visually, I have an overview of all the main and side issues. Exploring, defining and brainstorming made it possible for me to draw up a concept.

Concept

The Branding as a Service application is an organic and dynamic environment where your brand start developing itself and will continue to live. Improve and maximise the brand consistency through centralisation, updates, shareable assets, and guidelines. You will always have the right principles at hand.

A new expression is definitively incorporated in the environment if it has been approved by someone who is taking responsibility and control. This results in preventing proliferation.

Users can access the platform via login or a link. Set up by the administrator who grants access, maintains and manages it.

Sketches & Wireframes

I went through these phases iteratively, because the extensive research had given me enough insight and based on Product Quality Review sessions and Usability Testing I could improve the designs. I like the continuous development flow, because it makes me a person who delivers quality.

During my internship I made an incredible amount of sketches and wireframes. I will highlight the most important aspects within the application and the different iterations they have endured. For each aspect I will summarise the sketches and wireframes realised.

At the end of each iteration there is a link available to the prototype with more details.

Iteration 1

navigation

Brand components are essential, because these contain the guidelines and rules regarding the corporate identity. In the brand components the guidelines and rules for the brand, logo, use of color, typography, tone of voice, photography, illustrations, iconography, digital, audio, video and print are handled.

edit mode

The sketches below are based on the editing mode of the application. I have chosen for a inline-editing method. This is very user-friendly, because the user retrieves direct feedback from the actions taken.

In the Product Quality Review session I received feedback from experts and users that it would be helpful if predefined patterns were available for adding guidelines.

View prototype (iteration 1)

Iteration 2

navigation

In this variation sketch I moved the settings button to the top of the navigation tree. This means that the settings button is always visible to the administrator, even if the guidelines navigation is unfolded.

edit mode (empty)

When an administrator is logged in, all brand component pages are displayed - even if the pages are empty. This is because the administrator has to navigate to a page, then switch from 'view' to 'edit' mode. The users - without admin rights - do not get to see the empty pages in the navigation tree.

edit mode (layouts)

From the first Product Quality Review session I have found that adding a new section should be easier. It is better to focus on standard layouts that can be applied within a text, image or video section. Instead of having the administrator compile manual grids, basic layouts are predefined and hyragies are properly categorized by mobile.

edit mode (sections)

A created section must be able to be modified by the administrator and must be user friendly. Thanks to the new sketches, the user can immediately see how it will be displayed.

upload source files

In the interviews, users from the various target group segments indicated that they often have to chase after the necessary files when working on a new assignment. The Branding as a Service application should change this, because users must not have to pick up logos and fonts from Google and colour pick them from a corporate identity manual. The users should have access to the source files - the basic foundations - within the visual identity of a company and use those source files to carry out an assignment.

View prototype (iteration 2)

Iteration 3

edit mode (layouts)

I received feedback from the second Product Quality Review session about the usability and technical feasibility of choosing and changing a section layout.

The application should support the administrator in thinking up, selecting and adding a section title. This helps the administrator to perform the task of adding a new section within a brand component page.

Thanks to the title suggestions, the administrator directly a kind of checklist from which can be deduced which content can be placed within a brand component page.

This all will reduce the cognitive load of the user.

upload source files

The administrator can upload, view, modify, and delete files. In addition, the administrator has to deal with the same design pattern - the 'save & close' button - that is used in the 'edit section layout' lightbox.

download source files

A dropdown allows users to download the source files. A user selects the required files and clicks on download after which they are downloaded to the user's computer. The dropdown is displayed when there are downloads within the section, otherwise not. The user gets feedback on the number of selected files. The text also shows how many files there are in a section's dropdown.

View prototype (iteration 3)

Iteration 4

I take into account the steps that need to be made within the login process. The form should be kept as short as possible. Steps should be divided into multiple screens. The form should prevent errors by the user's input behavior and the first input field should be autofocused when opened, because users are then guided to the starting point of the login form.

dashboard

The dashboard is the face of the Branding as a Service application, so it needs to be well structured. The dashboard needs to be kept simple and give information on the questions users have.

The sketches of the dashboard are based on a logged in user with management rights within the application.

edit mode (layouts)

In the third Product Quality Review session I experienced that selecting and filtering a layout is considered uncomfortable. According to the experts, the way in which it is filtered is not correct. I have come up with a new idea for this functionality. The title suggestions are based on the brand component page in which the section is created. It seems smart to me to show layouts that are based on the selected title suggestion.

add elements

Users have bathed in the basic principles of the brand. So, for example, the colors and typography.

View prototype (iteration 4)

Final iteration

Edit mode (section title)

In both the Usability Test and the Product Quality Review session I received feedback about choosing or creating a title for a new section. In the Usability Test a participant had the question if he could enter a title manually instead of having to choose from the suggestion titles. I noticed that the participant overlooked the 'or something else...' functionality within the lightbox. Afterwards, the participant indicated that it is better if there is a 'custom title' or something else, so that users know that in addition to the title suggestions, a custom title can also be entered.

add section button

Based on the feedback obtained, I made two new sketches for adding and moving a section within a brand component page. The sketches are shown below.

View prototype (final iteration)

Reviews & Testing

product quality reviews

I used the Product Quality Review method to check whether the design solutions, in the form of wireframes, meet the requirements drawn up on the grounds of the research. I obtained feedback from the experts within the Allyourmedia team on the technical feasibility of the functionalities, usability guidelines and design patterns applied in the Branding as a Service application. These experts have knowledge and skills of UI & UX Design, technical development and experience with users, customers and use cases.

Using the Product Quality Review method, I used and executed the Getting the Design Right method. After presenting the design solutions in a Product Quality Review session, I returned to the sketch table to analyse the obtained feedback and sketch new ideas, wireframes and prototype. Because of this I am iterating and further developing multiple ideas of design solutions and functionalities within the application.

By conducting four Product Quality Review sessions I developed a user-friendly and technically feasible prototype that meets the requirements list within the scope of the graduation project concept. For example, I used the 'Form follows Function' principle which means that the design of the application results from or is based on the intended functionalities within the scope of the graduation project.

usability testing

I tested the Branding as a Service application prototype with five task scenarios. This provided new insights from the target group and these experiences are applied in new design solutions of the fifth iteration within the graduation project.

The results showed that the overall response to the use of the application is positive. The participants are enthusiastic about the Branding as a Service application, because the prototype already works as a smart system that guides the user through the application. The structure within the application is recognizable and consistently applied. The buttons have been given the same shape and style. The navigation structure is logical, clear and very useful according to the participants.

The prototype has ensured that the participants will recommend the Branding as a Service application to customers, colleagues and other stakeholders. It is a unique, complete and central platform, in which the entire branding of a company is managed and kept up to date. This guarantees the image of a company. The application is a dynamic product, which in the future - in working form, filled with content and source files - will be so much more extensive than a corporate identity manual.

By making a few adjustments - based on the feedback obtained from the Usability Tests - to the design of the existing functionalities, the application becomes even more user-friendly according to the users.

Advice:
  • Gather more end users.
  • Walkthroughs
  • FAQ
  • Quality Assurance
  • Instruction Videos

Learnings & Insights

scope creep

From the users, experts and the company, I have identified clear requirements, wishes, needs and pain points. I have neatly incorporated these into deliverables and have been able to use them well during my graduation internship. However, I did not have an actual focus on which elements actually had to be designed at the end of my internship. Based on the insights and my feeling I started with the most important elements. I came to an end because of my drive, passion and motivation, but my way of working was less efficient.

Thanks to this experience I learned a lot. Among other things, I learned to better formulate the requirements next time and to verify the scope with the stakeholders.

working with the end user

I conducted seven interviews with people from the various target group segments. I talked about the development of a corporate identity, the delivery of a corporate identity, the consistency and quality assurance within a corporate identity and the Software as a Service application possibilities.

In the first two interview sessions I felt a bit uncomfortable, because I was sitting at the table with people who have been working in the work field for years and as a graduate I was just dry behind the ears. I turned that away from me in the other interview sessions, because I think that every person should be treated equally and I should have confidence in myself.

dare to speak and make mistakes

I value the willingness and openness of my colleagues to give feedback. At a certain point, this led me to ask for feedback as soon as I had made a design / sketch. The feeling that they were judging my design and not me, taught me a lot and totally changed my thinking.

In the beginning I found it difficult to present a design solution to an expert, because I was a bit uncertain about the design choices and decisions made for the design solution. In the beginning, this made me a bit of a scouting job. After twice, I managed to get my act together. I thought of the fact that I had made a sketch with a well-founded design choice and I had to stand for it - stand for something, as the IxD manifesto says.

I am satisfied with the result achieved, because at the end of my graduation project I stand behind my realized design solutions. I owe this to, among other things, making all the variations, alternatives and allowing interim feedback sessions to take place.