1 2
Brand Design and Website Redesign
for a Digital Marketing Agency
Bachelor’s Thesis Anna Bajnai
Metropolia UAS
2021
A B ST RAC T
This thesis discusses and showcases the process of creating a strong brand identity for a client's business and applying it to a website concept.As requested by the client, the aim was to establish an image that is consistent and distinctive and for the new website concept to reflect these qualities.
The design process started with a research phase, during which an in-depth analysis of the target audience and the client's competitors was conducted. This was followed by the introduction of the structure of rele- vant brand design and web design processes. Thereafter the research results served as the foundation for the brand identity and website concepts. The created concepts were put to the test during an evaluation and changes were made accordingly.
The result was a cohesive and professional brand identity presented in a visual style guide and the implementation of a website concept via high-fidelity wireframes.
Author
Anna Bajnai Title
"Brand design and website redesign for a digital marketing agency"
Number of pages 150
Date
8 March 2021
Degree
Bachelor of Culture and Arts Degree program
Design
Specialization Industrial Design Instructors
Juha Ainoa, Senior Lecturer
Merja Kosonen, Head of Degree Program
TI IV IS TE LM Ä
Tässä opinnäytetyössä käsitellään ja esitellään prosessia vahvan brän- di-identiteetin luomista asiakkaan liiketoiminnalle ja sen soveltamista verkkosivustokonseptiin. Asiakkaan asettamana tavoitteena oli luoda yhtenäinen ja erottuva kuva ja näitä ominaisuuksia heijastava uusi verk- kosivustokonsepti.Suunnitteluprosessi alkoi tutkimusvaiheella, jonka aikana tehtiin perus- teellinen analyysi kohdeyleisöstä ja asiakkaan kilpailijoista. Tämän jälkeen otettiin käyttöön asiaan kuuluvien brändisuunnittelu- ja verkkosuunnit- teluprosessien rakenne. Tutkimustulokset toimivat brändi-identiteetin ja verkkosivustokonseptin perustana. Luodut konseptit testattiin arvioinnin aikana ja niitä muutettiin arvioinnin perusteella.
Tuloksena saatiin yhtenäinen ja ammattimainen brändi-identiteetti, joka esitettiin visuaalisessa tyylioppaassa, sekä verkkosivustokonseptin toteu- tus high-fidelity wireframe:n avulla.
Keywords
brand design, brand identity, Engage Digital, Lone Wolves, rebranding, UX, UI, website redesign
5 6
1. Introduction 7
1.1. The client 9
1.2. Brief, dilemma, and goals 9
1.3. My role 10
1.4. Terminology 11
1.5. Theoretical framework 13
1.6. Design thinking process 15
2. Research 17
2.1. User research 19
2.1.1. Personas 19
2.1.2. Psychographic profiles 20
2.2. Competitive landscape analysis 25
2.2.1. OMCollective 27
2.2.2. Envoker 29
2.2.3. Upthrust 31
2.2.4. Intracto 33
2.3. Rebranding 35
2.3.1. Current brand analysis 37
2.3.2. Brand framework 39
2.3.3. Visual design principles 41
2.3.3.1. Color theory and psychology 41
2.3.3.2. Typography and hierarchy 43
2.3.3.3. Logo design 45
2.3.4. Using archetypes in branding 47
2.4. Website content and structure 49
2.4.1. Content inventory and audit 49
2.4.2. Current information architecture 50
2.4.3. User journey map 51
C O NTE NT S 3. Results & Analysis 53
3.1. Brand identity 55
3.1.1. Defining the brand archetype 55
3.1.2. Color palette suggestions 57
3.1.3. Typography and font combinations 59
3.1.4. Visual mockups 62
3.2. Introducing Lone Wolves 65
3.2.1. First logo design ideas and logo design process 66
3.3. Website redesign 71
3.3.1. Updated information architecture 71
3.3.2. Wireframing 73
3.3.2.1. Low-fidelity wireframes 73
3.3.2.2. High-fidelity wireframes 75
3.4. Visual design evaluation 85
3.4.1. Contrast 87
3.4.2. Repetition 88
3.4.3. Alignment 89
3.4.4. Proximity 90
3.5. Making changes 91
4. Implementation 95
4.1. Visual style guide 97
4.2.Updated high-fidelity wireframes 107
5. Reflection & Summary 139
5.1. Summary 141
References 143
INTR O D U C TI O N
This chapter lays the foundation for the entire thesis, start- ing with the introduction of the client, a summary of the brief and goals, and a description of my role in the project. I also introduce some key concepts and theories relevant to the thesis and offer a list of definitions for some frequently used
technical terms.
1
9 10
1.1. The client
Founded in 2007, Engage Digital is a Brus- sels-based digital agency specialized in running international digital marketing oper- ations. They “help international clients attract website traffic, generate sales or leads, lever- age digital data, and develop in-house digital marketing skills” (Engage Digital,n.d.).
Remco van der Beek, the founder of Engage Digital, has over 20 years of experience in digital marketing and analytics and deep knowledge of attracting and converting website traffic through digital marketing chan- nels. (Engage Digital, n.d.).
Their team consists of experienced digital marketers, data & business analysts, and web developers. With more than fifteen clients from across the globe, their aim is to help organizations become successful with digital marketing, communications, and sales (R. van der Beek, personal communication, 2020).
1.2. Brief, dilemma, and goals
Since its foundation, the company has gained a massive clientele and established a secure position in a highly competitive business envi- ronment. However, due to its obscure brand identity, its online presence fails to represent its values and achievements.
1.3. My role
My role in this project was to focus on improv- ing the experience of potential clients and elevate the company brand by re-imagining its visual identity (brand design) and by creating a concept for a new website (UX & UI design).
Keeping the needs of the target users and my client in focus, I followed the five-stage, non-linear Design Thinking process proposed by the Hasso-Plattner Institute of Design at Stanford.
It is important to mention that the conducted work on this project was undertaken during the COVID-19 global pandemic. As such, certain aspects of the project have been affected due to social and mobility restric- tions.
The client’s request was to portray a more professional and consistent image of the company and to differentiate themselves from the competition. With the focus on these requirements, the goal of this project is to create a strong and distinctive brand identi- ty, based on which the website can be rede- signed to improve the users’ experience.
The company’s current website was put together by the founder, Remco using a built- in WordPress template. The purely function- al design serves its main purpose (giving the business a face and informing potential clients about the offered services), however, it has numerous flaws.
11 12
1.4. Terminology
Brand archetype
“A universally recognizable, innately under- stood character type or role that a brand can embody” (How Brands Are Built, 2020).
Competitive analysis
The process of “identifying your competitors and evaluating their strategies to determine their strengths and weaknesses relative to those of your own product or service” (Entre- preneur Media, n.d.).
Complementary colors
“Complementary colours are pairs of colours that contrast with each other more than any other colour, and when placed side-by-side make each other look brighter” (Tate, n.d.).
Content audit
“A content audit examines, assesses, and evaluates the quality of the content listed in the [content] inventory” (Kaley, 2020).
Content inventory
“A list of every piece of digital content you currently have, captured at either the page or asset level” (Kaley, 2020).
Information architecture
“In the context of web site design, information architecture describes the overall conceptu- al models and general designs used to plan, structure, and assemble a site” (P. J. Lynch &
Horton, 2017).
Personas
“Fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way” (Dam & Siang, 2020b).
Typeface
“A typeface is a set of characters of the same design. . . . The term “typeface” is often confused with “font,” which is a specific size and style of a typeface” (Christensson, 2006).
User experience (UX) design
“The process design teams use to create products that provide meaningful and rele- vant experiences to users” (Interaction Design Foundation, n.d.-a).
User interface (UI) design
“The process designers use to build inter- faces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable” (Interaction Design Founda- tion, n.d.-b).
User journey map
“A visualization of the process that a person goes through in order to accomplish a goal”
(Gibbons, 2018).
Wireframe
“A two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, func-
tionalities available, and intended behaviors”
(Usability.gov, n.d.).
Wireframe fidelity levels
“Low and high-fidelity are terms used to iden- tify the level of wireframe production or func- tionality. Low-fidelity wireframes . . . tend to be more abstract because they often use simple images to block off space and imple- ment mock content” whereas “high-fideli- ty wireframes are better for documentation because of their increased level of detail”
(Usability.gov, n.d.).
13 14
1.5. Theoretical framework
The theoretical framework of this project consists of six pillars: user research, brand design, UX design, UI design, rebranding, and website redesign. These concepts are all interconnected and influence each other throughout the entire design process.
User research
Getting to know the target audience through extensive research is a mandatory step of any user-centered design process.
Brand design
Here, the focus is on creating a strong and distinctive identity that represents the brand’s values and personality, while differentiating it from its competitors. This pillar serves as a basis for later design decisions, such as
website color schemes, typography, visual elements, imagery, etc.
UX design
Its roots in user research, user experience design is essentially the process of tailoring and fine-tuning products in order to offer the best possible experience to the users.
UI design
The goal of UI design is to create an inter- face that ensures an intuitive user experience while simultaneously applying the brand’s visual characteristics to the design.
Rebranding
Rebranding is essentially the process of rebuilding a brand’s identity. It usually includes changing the brand name, reestablishing the audience and the market, redefining the company’s mission, vision, and values, and redesigning the brand’s visual identity.
Website redesign
Taking into consideration what the research phase revealed, website redesign is the prac- tical application and visual representation of all previous design decisions.
User research
Website redesign UX design
Rebranding UI design
Brand design
Figure 1 Theoretical framework flowchart
15
1.6. Design thinking
process
Design thinking is a five-phased process that is non-linear and iterative, meaning that “the design team continuously use their results to review, question and improve their initial assumptions, understandings and results”
(Dam & Siang, 2020a) throughout the project.
The first phase of the Design Thinking process is the “Empathize” phase. This is the phase during which most of the research is done, that serves as a basis for decisions made later in the design process. It helps gain a thor- ough understanding of various aspects of the process, such as the users, the competitors, the client itself, and the brand identity. The goal is to use empathy to gain a better under- standing of the problem.
In the second, “Define” phase, we look at the data information that we gathered during the first phase and analyze our observations. The results of this analysis can help us identify the core problem and define our problem state- ments which serves as the basis for future design decisions.
The third phase is called “Ideate”, and it is the phase of idea-generation. Based on the information acquired in the first phase and the problem statements defined in the second, we can now move on to focusing on coming up with various solutions to the core problem.
During the fourth “Prototype” phase, we put the generated ideas into practice and take them to the next level by creating low-fidelity prototypes. These are then tested and evalu- ated during the fifth “Test” phase.
As mentioned earlier, design thinking is an iterative process, and therefore jumping between phases is common. If the initial tests reveal new information, it might be necessary to go back to redefine the core problem and generate new potential solutions.
Empathize Define Ideate Prototype Test
Figure 2 Design Thinking Process phases, based on the diagram of Teo Yu Siang (Interaction Design Foundation)
RE SE A RC H
In this chapter, I will outline the conducted user research, create personas to visualize the target audience, do a benchmark of the competitors, do current brand analysis, and content inventory to help me lay the foundation for later design work.
The main research questions are as follows:
• Who is the target audience and what is their goal?
• Who are the main competitors and how do they differ?
• Who and what is Engage Digital - in the past, the present,
and the future?
2
19 20
2.1. User research
The goal of user research is to gain real insight into who we are designing for by collecting as much information about the target audience as possible. User research helps to empha- size with the users and walk a mile in their shoes. To become familiar with their goals, needs, and behaviors. This is a crucial step in the research process, as it helps view the problem from an outside perspective, limiting the one-sidedness of the process.
2.1.1.
Personas
Practicing an empathetic approach by creat- ing personas help guide the ideation process and bring the human element to the process.
Even though personas are not “real” people, they are created based on real research and data, and therefore they play an important role in understanding user needs and expec- tations. They also serve as great reference points (McMahon, 2018) that we can jump back to throughout the whole design process, making sure that the users are in constant focus.
Due to time constraints and the characteristics of remote work during the COVID-19, I did not have the opportunity to interview the target users. The personas I created are so-called proto-personas based on information gath- ered from an interview and a questionnaire completed by the client.
Proto-personas
Proto-personas are non-research driven and “ad-hoc”, and they help by summariz- ing the common traits of the target users (McMahon, 2018). As noted by Kari McMahon,
they are low-fidelity versions of Lene Niels- en’s (Nielsen, 2013) proposed fiction-based persona method, which, according to A.
J. Jacobs (Jacobs, 2016), is based on the assumptions of the stakeholders, and further checked against actual data.
Meet Karen and Derek
Based on the in-depth interview with the client, I learned and mapped out the basic characteristics of Engage Digital’s custom- ers. According to van der Beek, there are two main groups of potential customers that they encounter the most: 25-35-year-old male digital marketers working for small to medium-sized e-commerce companies, and 35-50-year-old female marketing communi- cations professionals employed by a medium to a large organization (R. van der Beek, personal communication, 2020).
2.1.2.
Psychographic profiles
With the two main personas identified/defined, I then moved on to create a more detailed picture by applying the data collected from the interviews and client questionnaire. The two psychographic profiles included basic personal details such as a short bio, age, and location, their goals, and frustrations, and were completed with spider diagrams for the personas’ OCEAN Big five traits.
21 22
Karen Smit
The Ruler
46 years old Female
Communications & Marketing Netherlands
Bio
Personality
Karen is a 46-year-old communications and marketing professional from the Netherlands, who works for a large organization. She is well-organized, energetic, and hard-working and she appreciates quick and simple solutions to problems.
energetic impressionable
prudent controlling organized
Figure 3
Goals Frustrations
Karen would like to attract traffic and gener- ate digital sales, leads, and awareness via her organization’s website.
Karen feels like she lacks the expertise needed to achieve business growth. She gets lost easily in the digital marketing world and would need guidance to succeed.
Neuroticism
Extraversion
Agreeableness Conscientiousness
Openness
23 24
Derek Jensen
The Explorer
32 years old Male
Digital Marketeer Belgium
Bio
Personality
Derek is a 32-year-old digital marketeer from Belgium, who works for a small e-commerce company. He is ambitious, curious, and creative, and he enjoys immersing himself in challenging projects.
Though he is rather reserved in social situations, he tends to be critical of both himself and others.
inventive tech-savvy
critical ambitious analytical
Figure 4
Goals Frustrations
Derek would like to know how to reach and measure marketing objectives that fuel busi- ness growth, while improving the ROI of their digital advertising spending, and increase their visibility in search engines.
Derek’s company does not have the time to focus on digital marketing. They have outsourced work in the past, but were dissat- isfied with the service they received.
Neuroticism
Extraversion
Agreeableness Conscientiousness
Openness
25
2.2. Competitive landscape
analysis
To gain a better understanding of the compe- tition of Engage Digital and figure out where they stand amongst their peers in the field, I needed to conduct a competitive landscape analysis (CLA). Identifying its competitors and looking for measurable traits to compare gives a comprehensive overview of the indus- try and helps us understand which direction they should go to move their brand forward (Lynch, 2019).
When the goal is to refresh a company’s brand identity and redesign its website, an in-depth analysis of its peers gives a clear perspec- tive on how they can differentiate themselves from the competition.
As Lynch states, “by compiling data, we begin to see which websites are designed most effectively, and this gives us significant insight into how we should focus the design, branding, and marketing of our client” (Lynch, 2019).
For the CLA, I analyzed four of Engage Digi- tal’s competitors suggested by my client according to 3 axes of criteria, then moved on to create the individual analysis sheets based on the collected data.
Interface design
User experience
Navigation Originality Attractiveness
General brand universe
Simplicity
Perceived reliability Ease of use
Brand values Target users
Image
Figure 5 Axes of analysis for CLA
27 28
2.2.1.
OMCollective
OMCollective is a full-service online market- ing company operating from Sint-Niklaas, Belgium. They offer various services, includ- ing market and competition analysis, digital marketing, copywriting, and graphic design.
General brand universe
The website’s general atmosphere is youth- ful, fresh, and upbeat, displayed using a calm and pleasant pastel color palette. They value knowledge, growth, and innovation, and they put a huge emphasis on teamwork and the idea of “doing things together”. Based on their tone and general aesthetic, their target audience seems to be younger people and smaller businesses.
User experience
The content of the website is well-structured, making finding what one is looking for quick and effortless. The overall content layout is simple and balanced, with a smooth rhythm of text blocks and visual components. The company’s reputation is reflected in their
displayed cases and references, indicating a sense of trust and reliability.
User interface
The combination of harmonious colors, simple, yet powerful fonts, high-quality imagery, and some interactive animated elements, elevates the browsing process and makes for a memo- rable experience.
Figure 6 Screen captures of imagery and visual elements
from OMcollective's website
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor
YouthfulFreshEnergetic Dynamic Upbeat
29 30
2.2.2.
Envoker
Envoker is a digital marketing agency based in Goes, Netherlands. They promise to tailor every strategy to their customers so that together they can achieve the maximum result (Envoker, 2020).
General brand universe
The atmosphere of the website is similar to that of a generic IT company, but with a modern twist that makes it more approachable. The tone indicates performance being the busi- ness’ number one most important goal, with efficiency and ambition being the keywords.
Their result-focused attitude attracts the older generation: traditional, down-to-earth customers, who want safety and results.
User experience
As the website’s content is not organized into different pages or clearer sections, the overall structure is a bit confusing. There is a massive amount of information displayed through text-heavy pages that require a lot of scrolling. Envoker shows their reliability by showcasing their Google rating and their
case studies with numbers and statistics as proof of their high performance.
User interface
Due to the lack of diversity in visually stim- ulating elements such as icons, graphs, and animations, the website seems plain, static, and underwhelming -- reminiscent of a built- in template. The images used throughout the site are of good quality, but they too exude a certain impersonal, stock-like feel (they lack personality even though they are the team).
Though the drop-down menu is a bit text- heavy, it fulfills its purpose by displaying all necessary information clearly.
Figure 7 Screen captures of imagery and visual elements
from Envoker's website
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor
Generic“Smells like” IT Result-oriented AmbitiousBig words
31
2.2.3.
Upthrust
Upthrust is a #1 international growth office that focuses on full-funnel growth marketing and building better digital experiences (Upthrust, 2020). Their main office is located in Diegem, Belgium.
General brand universe
The general atmosphere of the website is hip, clean, and minimalistic, but based on the visuals on the landing page, it is not immedi- ately clear what type of company it is. The use of keywords like “accelerate” and “launch”
throughout the website gives the overall tone a very dynamic feel. Based on the image, their target audience seems to be younger businesses.
User experience
The top navigation section of the website is arranged in a logical way, but the full-width drop-down menu with added vector illustra- tions takes up a lot of screen space and can be inconvenient. As the content is organ- ized and displayed clearly, finding what one is looking for is easy. The fact that there is
no page introducing the team itself makes the company feel a bit impersonal and could potentially invoke distrust, but the clear list of clients and case studies gives the company credibility.
User interface
The website’s clean layout design, simple color palette, and the smart use of white space create cohesion throughout the pages, which is further reinforced by the clear sections and column system.
Figure 8 Screen captures of imagery and visual elements
from Upthrust's website
Youthful Hip
Ambitious Artistic Uplifting
33 34
2.2.4.
Intracto
As a digital agency, Intracto is shaping tomor- row’s businesses in the areas of marketing, strategy, communication, and technology (Intracto, 2020). Though also operating in the Netherlands, their headquarters is located in Herentals, Belgium.
General brand universe
The website’s aesthetic is professional and serious. Though modern, its cleanness and simplicity make the overall feel impersonal.
The use of keywords, such as “innovation”
and “future-proof” gives a clear picture of their values. Based on their image and list of clients, they seem to be targeting bigger businesses.
User experience
The seemingly simple navbar reveals a rather complex drop-down menu with links that do not correspond to the headings of the sub-pages; this makes finding informa- tion difficult and time-consuming. The navbar disappearing on scroll causes further confu- sion and is detrimental to a smooth browsing experience.
User interface
Though its clear sections and columns offer cohesion, the overall look of the interface is static and offers no excitement from a visual perspective. The lack of graphic elements paired with text-heavy pages makes finding information tedious and monotonous. The only refreshing features of the website are the harmonious color palette and clear typogra- phy.
Figure 9 Screen captures of imagery and visual elements
from Intracto's website
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor
CleanProfessional ModernSerious
Future-oriented
35
2.3. Rebranding
In the competitive field of digital marketing, branding can make or break a business. As a brand is essentially “a promise about what the company stands for, or, the value it offers its customers” (Gibbons & Kaplan), it is an irreplaceable building block of a business.
As noted by Airey, “With the right brand- ing, businesses can increase their product’s perceived value, establish relationships with their customers that span ages and borders, and nurture those relationships into a lifelong bond” (Airey, 2009).
There can be several reasons for a company to want to take a closer look at its branding and to consider rebranding: market reposi- tioning, a shift in target audiences, a significant change in the business’ mission, vision, and values, or simply because creating a brand identity was not a priority when the company was founded. In Engage Digital’s case, it was
the latter. Their business had been successful throughout the years, but they were lacking a strong identity that would differentiate them from their competitors and solidify their posi- tion on the market.
Though most people associate brands with their visual identity, like logos and dominant colors, or with a memorable slogan, below the surface a brand is much more than that.
It is a complex and well-structured system of components, that serves as a solid foun- dation, a so-called framework for a brand’s identity.
According to Gibbons and Kaplan, “there are six core elements of a brand framework that must be understood across teams in order for compartmentalized teams to effectively trans- late brand into consistent user interactions”
(Gibbons & Kaplan, 2017). These elements act as pillars in the process of creating a strong brand identity.
Brand promise
A unique, enduring idea behind a brand’s purpose. It’s
the foundational value the brand commits to delivering
to its customers.
Personality
A set of 3-7 personality traits that personify the brand and drive how the brand looks,
sounds, and acts.
Vision
A formal statement of why you do
what you do.
Mission
A formal statement of how you do
what you do.
Principles
A belief system that guides the brand’s approach to
decision making. Attributes
The individual traits that comprise the brand
personality.
Figure 10 Interpreted brand framework diagram (NNG group)
37 38
2.3.1.
Current brand analysis
As Engage Digital’s brand identity was never truly looked at or developed, the rebranding process was essentially a branding process.
To understand where we were starting from, I needed to take a closer look at Engage Digi- tal’s current brand identity.
When I interviewed van der Beek, it became clear that we did not need to start from zero.
The client had a very detailed idea about what the company’s image should be like and he provided some very useful information on their values, vision, and mission. It felt like, as the company had been evolving organical- ly throughout the years, the building blocks were all there; however, without a proper design process, these intangible elements were not reflected in the company’s image.
Much like eyes are the window to the soul, websites are the window to a brand’s identi- ty. As “In digital systems, customers interact with the representation of the brand in the form of websites and other interactive servic- es” (Kaplan, 2016), creating a strong brand
identity and building the website on that solid foundation is essential for a business to be successful.
In the case of Engage Digital, the combination of a generic template-based layout and the absence of such a foundation translated into an image that lacked personality and failed to offer a meaningful and memorable customer experience.
Figure 11 Screen captures of imagery and visual elements
from Engage Digital's website
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor
Consectetuer elit
40
2.3.2.
Brand framework
To lay the groundwork for the brand’s identi- ty, I needed to define all six building blocks of the framework: the promise, personality, attributes, vision, mission, and principles. To get started, I created a questionnaire to be filled out by van der Beek, whose results we discussed during an interview.
Direct Transparency
Human Responsiveness
Persistence
Knowledgeable Experienced
Agile
Reliable
Rebellious
Brand promise
“We are here to drive your business to success,
sparing no effort.”
Personality
“Strong, controlled, and direct, the type of person you would trust with
everything. Consistently high-performing and making a difference. Making big things happen with the tools at hand.”
Vision
“We want our clients to be confident that their digital media budgets generate the
right return on investment and that they are in control
of the outcomes.”
Mission
“We put our best-in-class domain experts to get the job done. We go all the way to help
organizations be successful with digital marketing, commu-
nications, and sales.”
“We tell it like it is, even when that is not in favor.
We don’t overpromise.”
“Your success is our suc- cess. We believe that is best achieved through busi-
ness relationships founded on honest and open human
relationships.”
“We do everything needed to get the job done and we don’t stop
until it’s done.”
“We get back to you within the hour.”
Principles
Attributes
Figure 12 Interpreted brand framework diagram for Engage Digital
(original: NNG group)
41 42
2.3.3.
Visual design principles
Having defined the six pillars of the brand framework, the focus could shift onto the more tangible (visible) aspects of Engage Digital’s developing brand identity: the visual elements.
A visual identity is the visual manifestation of a brand’s framework and it helps bring the brand’s personality to life and to communi- cate its purpose and values. It can consist of various elements depending on the brand’s needs and goals. In the case of Engage Digital, those were the following: color palette, typography, and logo.
2.3.3.1.
Color theory and psychology
When working with colors, it is important to remember that colors and emotions are very closely linked. As Anna Lundberg states, “feel- ings are much more powerful than rational thoughts based on facts and figures” (Lund-
berg, 2019), therefore understanding the effects of colors on emotions and what certain colors are associated with is an essential tool when creating a color palette for a brand’s visual identity.
In a paper published in 2003, Joe Hallock (2003) examined what colors the participants associated with certain words that seemingly have no association with any color. The results are based on answers from 232 people from 22 countries and show that, though some colors have stronger associations, there are no universally accepted pairings of colors and concepts.
The meaning of colors “stem[s] from psycho- logical effects, biological conditioning and cultural developments” (Lundberg, 2019), therefore certain hues can be associated with different meanings depending on the perceiver.
As Eden Spivak notes, this means that “color is not an exact science, and there’s no equa- tion to accurately define which color means what” (Spivak, 2020). However, as “colors can mean different things depending on the colors they’re paired with” (Spivak, 2020), by introducing color combinations, it is possi- ble to guide the viewers’ understanding and create a visual atmosphere that is represent- ative of a brand’s identity.
It is important to note that, though defining the colors that will represent a brand requires an artistic eye, it is “not a matter of coming up with a palette that pleases either the designer or the client, but rather a matter of attracting and engaging a targeted audience through effectively chosen colors” (Krause, 2014).
Having a solid understanding of the target audience, the brand framework, and the goals of my client, the next step was to create a palette that is tailored to the brand’s needs.
Building a color palette - Colors and brand identity
A brand’s identity is essentially a bridge between the business and its customers. It needs to represent the business’ personali- ty, while also attracting the target audience.
To achieve this balance, the focus on both the business and its audience must be main- tained throughout the design process.
As “colours are often the first way for our brain to identify and differentiate objects in the environment and many brands are asso- ciated with specific colours” (Gains, 2014), a color palette is an essential building block of a brand’s visual identity. Not only does it need to reflect the brand’s identity and attract potential customers, but it also has to be easily applied to various aspects of a brand, such as the logo, website, templates, and printed materials.
Making a choice - what makes a color pal- ette?
The consistent use of colors creates a cohe- sive visual identity, which in turn helps build brand awareness. To guarantee consistency, the number of colors in the palette needs to be limited to primary, secondary, and neutral colors.
43 44
Primary or base colors are the ones that are most closely associated with the brand. Their number is generally limited to one or two.
The role of secondary colors is to comple- ment the primary. Depending on the chosen color scheme, they can include hues from the same family as the base and/or accent colors that are distinctively different from the primary.
Neutral colors are mainly used for texts and backgrounds and are usually white or black.
Applying the principles of color theory is necessary to achieve an effective color combi- nation. After the primary color is chosen, the rest of the palette is adjusted to balance it out by choosing a color scheme, which, depend- ing on the desired effect, can be monochro- matic, analogous, complementary, tertiary, or split complementary.
Using the established brand framework, the principles of color theory, and the meaning of colors as three pillars, Engage Digital’s color palette was created.
2.3.3.2.
Typography and hierarchy
When designing a brand’s visual identity, all elements need to work together in harmony to create an image that reflects the brand’s personality, while also considering the needs of the target audience.
Typography is one of the key elements of a brand’s visual identity. As Park (2019) states in her article “Why typography is important in branding”, “Due to its effects on the context of communication, understanding typogra- phy is especially important when developing a brand identity” (Park, 2019). In a practical sense, the text acts as a channel to convey information to the audience. However, when it is elevated by the application of a distinctive typographic style, it starts creating a particu- lar context and reflecting the brand’s person- ality (Park, 2019).
Park (2019) also points out that when it comes to typography, “it is not just about selecting and using a particular font, all typographic elements should also be arranged correctly in your design, the visual arrangement, the color contrast, the blank space, the fonts selected and size of the font” (Park, 2019).
Things to consider
According to Wheeler (2018), certain aspects need to be considered when choosing type- faces for a brand: “The typeface needs to be flexible and easy to use, and it must provide a wide range of expression.” She also mentions that clarity and legibility should also be taken into account and treated as drivers (Wheeler, 2018).
Another thing to consider when making decisions about typography is hierarchy. As Krysinski explains, “Typographic hierarchy is established by the order of importance that elements are given on a page, based on their placement, size, and tone” (Krysinski, 2017).
For the reader to have a clear understand- ing of the structure of the content, it needs to be organized in a logical manner. As “hier- archy determines what the reader’s attention is drawn to first” (Krysinski, 2017), arranging the content based on the principles of typo- graphic hierarchy helps “organize all of the elements of a message into a unified and harmonious communication that allows the viewer to absorb the message in a logical order” (Krysinski, 2017).
45 46
2.3.3.3.
Logo design
In her article “Logo design: Creative stages”, Marina Yalanska describes a logo as “the basic mark of brand identity, the most prominent symbol of brand image and the foundation of an effective marketing strategy enabling its connection with the target audience” (Yalan- ska, 2016b).
Logos or brandmarks are an essential part of a brand’s visual identity, as they often act as the “first visual association that is brought out when people think over or hear the name of the brand” (Yalanska, 2016a).
Types of logos
When it comes to logo style, there are several options to choose from based on the needs of the brand and the aesthetics they are going for. The five main categories are wordmarks,
letterforms, pictorial marks, abstract/symbolic marks, and emblems. However, the rules that define these categories are not set in stone, and “many marks may combine elements of more than one category” (Wheeler, 2018).
Each style has its own unique advantages that need to be taken into consideration during the design process.
The most important steps of logo design Just as during other areas the visual iden- tity design, understanding who the target audience is, and what the brand stands for is essential. Using the results of the user research phase and the established brand framework helps create a design that not only represents the brand but also provides a link between the business and its customers.
As Yalanska (2016b) points out, the process of logo design consists of several steps that make up a solid strategy. She suggests that the user research is followed by marketing and creative research, after which a style direction is determined, and the colors of the design are chosen based on the estab- lished brand color palette. The last step of the process is to test the logo design in different sizes, resolutions, and environments, and to make necessary adjustments based on the results (Yalanska, 2016b).
Basic principles of logo design
When designing a logo, certain rules need to be followed to ensure a successful result and avoid common mistakes, such as using raster graphics, using stock art, forgetting about the client during the design process, relying on trends, being too complex, failing to provide a solution in the absence of color, choosing the wrong typeface or using too many of them, or plagiarizing (Hardy, 2011).
47 48
2.3.4.
Using archetypes in branding
According to Gains (2014), “Archetypes have been with us for thousands of years,
and are embedded deep in the culture that surrounds us” (Gains, 2014). The Jungian archetypes are often used in
brand design to help build human- like brand personas, as they
are figures that have universal meaning across cultures and stand for certain basic human moti- vations and emotions. A core archetype represents a brand’s values, mission, and vision. Understanding what catego- ry a business belongs to is essential in creating a brand that customers want to build a relationship with.
Creating a mood board based on arche- types helps visualize the image that a busi- ness wants to embody. By compiling differ-
ent images, illustrations, colors, fonts, textures, etc. they create an aesthetic and emotional environment that repre- sents the visual direction for the brand.
To find out what archetypes Engage Digital’s identity resonates with the most, I referred to the brand identity questionnaire and compared the results with the descriptions of the twelve main archetypes provided by Gains.
As Purkiss and Royston-Lee (2012) point out, to gain the trust of poten- tial customers and let them become familiar with the business’ values and personality, the brand identity needs to be communicated clearly. They also note that this can be achieved through consistently evoking one or two archetypes and expressing the brand’s purpose in a universally recognizable manner (Purkiss &
Royston-Lee, 2012).
50
2.4. Website content and structure
Before redesigning a website, there are certain necessary steps to complete to ensure a logical content structure. These include a content inventory, a content audit, a visualiza- tion of the website’s information architecture, and a user journey map.
2.4.1.
Content inventory and audit
A content inventory helps with the design of a better navigation as it “creates a clear picture of content hierarchy” (Faller, 2020) by assess- ing the landscape of the site.
Once the content hierarchy is established, a content audit can help identify places where users need more information and spot irrele- vant or outdated content (Faller, 2020).
When all content has been mapped out and evaluated, the next step is to re-organize all pages and sub-pages according to the results of the analysis and create a new information architecture structure.
2.4.2.
Current
information architecture
Level 1 Level 2 Level 3
Digital Marketing Fundamentals SEO Training Course
Digital Analytics Strategy Google Analytics training course
Google Analytics Advanced Google Data Studio Training Digital Recruitement Training
Web Analytics Social Media Analytics Digital Marketing Strategy Search Engine Optimization
Search Engine Advertising Display Advertising & Affiliate
Social Media Advertising Home
Meet the crew Clients
Blog
Guest blog Events Contact us
Digital services
Figure 13 Current information architecture of Engage Digital’s website
51 52
2.4.3.
User journey map
In their book UX for web design: Build websites for user experience and usability, Marli Ritter and Cara Winterbottom describe user journeys as “a visual representation of the step-by-step path the user takes through a website to reach their end goal” (Ritter &
Winterbottom, 2017).
Creating a user journey map is an essential step of the design process, as it helps gain a clear understanding of how potential users will interact with the website content and serves as a helpful guide for the information architecture.
According to Ritter and Winterbottom, estab- lishing a user journey is beneficial for the following reasons: It helps “Understand user behavior in relation to the product/website”, it makes it easier to “Pinpoint obstacles that prohibit the user from reaching their end goal”, and it “Validate[s] the value proposition and business vision”. (Ritter & Winterbottom, 2017)
Using the established personas, I evaluat- ed the users’ possible motivations and the obstacles they might face when interacting
with the content. Once these pain points had been identified, the next step was to elimi- nate them and help the users accomplish their goals, thus ensuring a smooth and intui- tive user experience.
StagesDoingFeelingThinkingUser GoalAgency goal
Contact
They get in contact with the agency via their website
“I hope they can help me”
“I wonder how long it will take for them to reply”
They want to know their options Get in touch and ask questions
Wants to be available and answer any questions
Wants clients to feel like they’ve made the right choice
Initiate
They begin their search, browsing through potential agencies online
“There are so many options, how can I make a choice?”
“What are my expectations?”
Get expert guidance
Find an agency that suits their needs
Wants to stand out from the crowd Wants to be chosen by new clients
Explore
They choose one agency, and do some in-depth research on the chosen agency
“This one seems trustworthy and professional”
“Does it suit my needs?”
“Is it going to be within the budget?”
They want to know what they’ll get Get a good picture of the agency Know that they are trustworthy and professionals
Wants clients to feel confident, supported, and inspired
Wants to seem trustworthy and show off their expertise
Wants to make a good impression They hear about a possible im-
provement to their business from an acquaintance
“I can’t wait to improve my business!”
“I have no idea how to go about this”
They want to make their business more visible
The potential agency needs to be on a similar wavelength
Wants to make a good impression, so potential new clients hear about them
Identify
Inspired
Frustrated Pensive
Hopeful Excited
Overwhelmed
Figure 14 User journey map for Engage Digital
RES U LT S & A NAL YS IS
The results of my research helped me define the core prob- lems and revealed what I needed to focus on to find the solu- tions.
This chapter shows the process of creating a solid brand identity by defining a brand archetype, creating a color palette, choosing typefaces, and creating a unique logo. This is followed by a modified version of the current information architecture and the first low-fidelity wireframe designs.
These choices are then evaluated based on a set of usabil- ity and visual design principles to identify potential areas of
improvement.
3
55 56
3.1. Brand identity
Engage Digital’s main issue was the lack of an established brand identity. As it was never defined properly, the brand was built without a solid foundation and evolved organical- ly throughout the years. To help create a distinctive brand identity and ensure its place amongst the competition, I set out to build the brand from the ground up.
Utilizing the established brand framework and the results of my research, I began the process of creating an identity that is unique- ly Engage Digital.
The process started with defining the domi- nant brand archetype that would serve as a psychological guide when creating a suitable color palette, choosing appropriate typefac- es, and designing a logo that distinctively reflects Engage Digital’s brand personality.
3.1.1.
Defining the brand archetype
Based on the research, it became clear that there were two archetypes Engage Digital’s brand identity could relate to.
Previously established values like knowl- edgeability, professionalism, and reliability, all pointed toward one particular archetype, whose purpose is to “help people under- stand their world” (Purkiss & Royston-Lee,
2012): The Sage. This primary, core archetype (sometimes also called the Guru) represents the brand’s most dominant characteristics and defines its personality by bringing the focus to its distinguishing traits. The source of wisdom, the Sage fulfills its purpose “by seeking and gaining a better knowledge of the world around us” and thus it is “an appro- priate archetype for brands that provide expertise or information to customers” (Gains, 2014).
In addition to the primary, I also identified a less dominant secondary archetype: the rebellious and non-conforming Outlaw or Rebel. At first, it might seem too far removed from the core identity, but it brings just enough excitement to refresh the serious and sophis- ticated image established by the Sage. With a twist, it disrupts the predictable nature of the dominant archetype and helps distinguish the brand from the rather one-dimension- al competition. The Outlaw’s disruptive and unconventional nature makes the archetype a good fit for brands that want to introduce changes within a category and challenge the traditional way of thinking (Gains, 2014).
The combination of these two archetypes creates a unique identity and perspective which helps distinguish Engage Digital from the competition. The promise of profession-
alism, wisdom, and mastery of their own field provided by the Sage attracts custom- ers seeking knowledge and expertise, while the revolutionary and unorthodox mindset of the Outlaw appeals to the more experienced clients with a yearning to do things differently.
57
3.1.2.
Color palette suggestions
To emphasize the contrast between the two archetypes I chose to work with a comple- mentary color scheme.
As the complementary color scheme is based on the principle of opposing colors and contrast, it is a fitting choice for a brand,
whose identity is a balanced combination of two, seemingly opposing archetypes.
Creating a mood board
To help start the brainstorming process, I began exploring color imagery that would successfully communicate Engage Digital’s message and express its complex brand personality. By building a mood board featur- ing images that reflected the brand’s identity in a visual form, I could narrow the potential hues down to a few combinations that worked well together.
Figure 15
Visual mood board for Engage Digital
Primary color
#59A5E7 Blue Jeans
Due to it often being associated with security, reliability, and dependability (Hallock, 2003) blue is a color favored by brands that wish to appear sincere and trustworthy, such as tech businesses and companies in the financial sector.
This hue represents Engage Digital’s profes- sionalism and reliability and highlights its position in the tech industry, while also differ- entiating it from its competitors.
Secondary colors
#F69552 Atomic Tangerine
To emphasize the visual contrast and visual- ize Engage Digital’s more adventurous and daring side, a complementary orange hue was added to the dominant light blue. Its intended function is to catch the viewer’s attention and highlight important details.
#191F33 Mirage
This color serves mainly as a background by establishing a solid dark theme and working in tandem with the dark and light neutrals.
It provides a low contrast backdrop for the copy, ensuring smooth legibility.
Neutrals
#030815 Black Pearl
A very rich cool hue, Black Pearl is a dark neutral with blue undertones. It serves as a background color and text color for the copy on light backgrounds.
#FFFBF8 Soapstone
A light neutral was chosen by decreasing the saturation and increasing the brightness of Atomic Tangerine. This color serves mainly as body text and background color for the light-themed sub-pages.
#59A5E7 #F69552 #191F33 #030815 #FFFBF8
59 60
3.1.3.
Typography and
font combinations
Using the established brand framework, the next step was to find a distinctive typographic style to accurately represent Engage Digital’s brand identity.
When it comes to choosing typefaces, it is essential to consider possible combina- tions. Certain typefaces work best for bigger, bolder, and more dominant texts that consist of a limited number of words, such as titles and subtitles, and others are more suitable for texts that are lengthier and smaller in size, such as body text and paragraphs. Not only do they need to convey the brand’s person- ality, but they also have to be typefaces that create a balanced pairing.
To ensure legibility while also reflecting the brand’s personality, the following typefaces were chosen:
Josefin Sans
Focusing on the brand’s established attrib- utes, such as “direct”, “intense”, and “confi- dent”, and using them as keywords, Josefin
Sans was chosen as a dominant typeface. Its bold and distinctive features subtly convey the brand’s personality and make this sans serif typeface a suitable choice for headers and shorter titles.
Raleway
To balance the intensity of Josefin Sans, while also ensuring clarity and legibility in longer paragraphs and a smaller size, Raleway was selected as a secondary, more subtle type- face. Though originally intended as a display face, it also works well on a smaller scale as a body typeface.
Aa Aa
Josefin Sans
Used weights:
Raleway
Used weights:
Digital We help you achieve your digital marketing goals.
We recommend and implement tactics that produce 100% measurable results.
Get in touch!
Marketing
Josefin Sans Bold 90 pt
Josefin Sans Bold 60 pt
Raleway Medium 30 pt
Raleway Regular 21 pt
Raleway Regular 18 pt
61 62
What’s up?
Click here!
What’s up?
Click here!
What’s up?
Click here!
What’s up?
Click here!
What’s up?
Click here!
What’s up?
Click here!
3.1.4.
Visual mockups
With the color palette set and the typefaces chosen, I could move on to explore different color combinations for the layout.
Keeping the roles of the colors in mind and remembering what their intended primary functions were, I put together a small “layout mockup card” and started experimenting with changing various ratios and arrangements.
Using the light neutral “Soapstone” as a background color ensured visual clarity and legibility, making the primary “Blue jeans”
and secondary “Atomic tangerine” pop when used as accent colors for links and buttons.
The darker secondary “Mirage” also proved to be a potential background color, creating a darker overall theme with a light neutral body text and vibrant blue and orange accents for the elements in focus.
This set of visual rules served as the founda- tion for the high-fidelity mockup.
Figure 16-17
Visual mockup variations for Engage Digital (cont.
on page 64-65)
63 64
> Digital Marketing
Digital Marketing
Using our extensive experience we help you to define the right mix of digital marketing channels to deliver on your website traffic and conversion objectives. We recommend and implement tactics that produce 100% measurable results and monitor their performance by means of a digital scorecard.
Discover more
Hunting your digital results
We are a digital marketing agency operating from Brussels
Get in touch
65 66
3.2. Introducing Lone Wolves
At this stage of the project, with most of the visual elements established, the next step was to start the logo design process.
It was during this phase that van der Beek mentioned his plans to change the name of the company. Though unexpected, it was a welcome development, as the newly proposed name showed a lot of potential and evoked a strong personality.
As the people behind the brand, their purpose, and their target audience have not changed, we agreed to carry on with the already estab- lished brand framework and the first pillars of the visual identity -- from then on as Lone Wolves.
3.2.1.
First logo design ideas and logo
design process
With the new name in focus, I could begin the creative process of brainstorming, which involved building a mind map based on words and concepts I associated with the new brand name.
As no constraints were set during our discus- sions with van der Beek when it came to the style of the logo, every aspect of the design was up to me. I narrowed my focus by select- ing a few keywords that would serve as a framework for my concept, and began explor- ing ideas through sketching.
Figure 18 (left) and figure 19 (right) Initial logo concept sketches for Lone Wolves
67 68
Expanding the palette
To help create depth while experimenting with logo concepts that included colors, I introduced an additional secondary color to the palette. This muted blue was created by taking Mirage (#191F33) and overlaying it with Soapstone (#FFFBF8) at 18% opacity.
While this addition to the palette helped with the design process by significantly elevat- ing the number of potential variations, it also contradicted the desired minimalistic approach to the design. Therefore I decided not to proceed with concepts using the addi- tional color.
Characteristics to aim for
At the beginning of the design process, I already had some fundamental attributes I wanted to apply to my design. The final concept had to:
» Have a negative space element;
» Work in black and white;
» Include the brand name in some way;
» Be geometrically balanced and harmonious;
» And be sleek, minimalist, and easily recognizable.
Figure 20
Logo concepts for Lone Wolves
69 70
Finding the one - a Lone Wolf
After showing the initial sketches to van der Beek and discussing possible directions we could head in, we decided to go with a picto- rial mark and chose a concept to develop further.
During our discussions with van der Beek, it became clear that he was leaning towards a logo design that conveys the brand’s profes- sionalism while also having edgier qualities that represent the rebellious undercurrent of its personality, so the goal was to create a concept that is both sophisticated and distinc- tively different from the competition.
Concept: a geometric wolf head
The initial sketch of the final concept was inspired by the profile view of a wolf. Focus- ing on the desired characteristics, I set out to design a concept that is minimalistic with a twist. Using sharp angles and parallel lines as a foundation and including the brand name’s initials in a subtle manner, the first sketch was created.
After importing the hand-drawn sketch into Adobe Illustrator, I began exploring different designs, including stroke-only (outline) and fill-only (solid) variations. The goal was to find a harmonious concept that, works on different
Figure 21
Initial hand-drawn sketch of wolf head logo con- cept for Lone Wolves
Figure 22
Wolf head logo concepts for Lone Wolves
backgrounds, and displays the initials clearly.
Pictorial marks often use images that are instantly recognizable and obvious. Taking the name literally and using the sharp corners of the letter W, I put together a design consisting of lines that create the same exact angle and depict a side view of a wolf’s head. As using a negative space element was something I wanted to include in the design, I also started experimenting with the inclusion of the brand name’s initials in a subtle but intriguing way.
To ensure versatility, while keeping the general shape and angles the same, I modi- fied the design so that, depending on what was needed, both a solid and a stroke-only version of the logo was available.
Figure 23
Pictorial logo concepts for Lone Wolves
Figure 24
Final logo concept variants for Lone Wolves
WOLVES LONE WOLVES LONE
Lone Wolves
LONE WOLVES
D i g i t a l M a r k e t i n g
72
3.3. Website redesign
Using the results of the research phase and the established brand identity as a foundation, the next step was to start building a structure for the new website.
3.3.1.
Updated
information architecture
When it came to the redesign of the website’s information architecture, user interaction was not the only perspective I needed to consid- er; I also had to rely on van der Beek’s profes- sional knowledge of search engine optimiza- tion.
A website’s visibility for relevant searches is affected by several factors, including how its content is structured. Fortunately, as Lone Wolves is a digital marketing agency, I could rely on van der Beek’s professional knowl- edge of search engine optimization. With his guidance, I created a more intuitive and logi- cally organized content structure that satis- fies user needs, helps users find information as quickly as possible, and provides relevant information to search engines.
Figure 25
Updated sitemap diagram
Level 1
Home
Level 3
Digital Marketing Fundamentals SEO Training Course
Digital Analytics Strategy Google Analytics training course
Google Analytics Advanced Google Data Studio Training Digital Recruitement Training
Web Analytics Social Media Analytics Digital Marketing Strategy Search Engine Optimization
Search Engine Advertising Display Advertising & Affiliate
Social Media Advertising
Level 2
Digital marketing
Digital training
Contact us Our team
Clients Articles
Events About
Dropdown menu groups Actual sub-pages
