Overview
Avatar is a full service marketing and design agency with expertise across a wide range of sectors from luxury property to SaaS.
The problem & objective
Avatar’s brand and visual identity no longer reflected its vision and direction for the future.
Established over 10 years prior, the visual identity was outdated and no longer represented Avatar’s values and direction. We needed to establish the core of who Avatar is now, which required an extensive brand workshop and messaging exercise with the wider team.
Once these fundamentals were pinned down, the visual identity, brand guidelines and design collateral, along with a showreel and completely new website were developed to reflect this new and exciting direction.
The solution
The re-imagined brand, identity and website completely transformed Avatar’s online presence, firmly positioning it as a forward-thinking and exciting creative agency with a strong message.
- The new messaging perfectly communicated Avatar’s transformation and future mission.
- The brand proposition to ‘challenge the everyday’ was successfully woven into every aspect of the visual identity.
- The new website successfully communicated Avatar’s mission and offering, providing an engaging online experience.
Establishing the brand
An extensive brand foundations and messaging process was worked through with the wider team to pinpoint exactly who Avatar were and how they wanted to be perceived.
This process resulted in strong and clear messaging that truly reflected the new Avatar, which set the tone for the creative moving forwards.
Developing the visual identity
The fundamental principle of ‘challenge the everyday’ is the thread that pulls all of the creative together, from the forever-changing dynamic logo to the vibrant colour palette.
The new logo doesn’t have one static state, but rather is a dynamic system based on a 3×3 grid. This means we actually have multiple logos, the very system ‘challenging the everyday’, through challenging the norm of how a logo is presented.
The colour palette is made up of 3 neutral colours that represent ‘the everyday’: a warm grey, white and black, with a vibrant, neon yellow representing ‘the challenge’. This colour acts as a highlight used heavily throughout the visual identity, in addition to a set of dynamic gradients.
Utile and Utile Display were selected for the typography due to their elegant, yet flared style and legibility. They’re modern and easy to read, yet have interesting details and unexpected flourishes that align with the proposition to ‘challenge the everyday’.
Following approval of the visual identity, I created a comprehensive set of brand guidelines, documenting all of the various brand elements and collateral, which would set the tone for all of Avatar’s visual design moving forwards.
Elevation through video
A key deliverable from the very beginning of this project was always going to be an exciting and engaging showreel, showcasing Avatar’s rebrand and selected work.
This video went on to feature on the home and about pages of the website, incorporating key brand messaging with featured work, an animated logo and graphic elements.
Establishing website requirements
Before diving into any visual design, it was fundamental that we gained a better understanding of both the business and user needs and expectations.
Through working collaboratively with the internal team, as well as performing extensive competitor analysis and user surveys, we established key requirements and features, formulating a scope of work and basic site map.
Key findings from this discovery stage:
- The work and case study pages are fundamental and must communicate the full scope of sectors and services offered.
- The user will more than likely come to the site knowing what they want to see examples of. Therefore, ease of navigation of the case studies is important.
- Avatar’s brand proposition and purpose is to be communicated throughout the site, utilising the newly established visual identity and messaging.
Prototyping
A number of iterations of wireframes were explored before moving onto high-fidelity prototyping.
I focused initially on the 3 key pages which included the home page, work page and case study pages. Following approval, I worked through the remaining pages and responsive sizes.
- Created a design system documenting all UI styles, components and modules
- Prototyped each page, including any interaction and animation
- Created both desktop and mobile layouts
Key learnings & next steps
Some of the key learnings throughout the project were:
- Even the smallest amount of user research can be beneficial in helping to resolve disputes between stakeholders.
- Don’t break website conventions for the sake of it, especially if this is purely for aesthetics and actually makes the user experience more challenging.
- Trying to get things ‘perfect’ before building anything can hinder the process, whereas working on an MVP and iterating once live can be much more effective.
If I was to continue working on this particular project, I would initially perform usability testing to assess the success of the project and determine areas for improvement, working through them from highest impact to lowest.