DHB hero image

Vodafone NZ - Icon illustration that makes a difference.

Vodafone is one of the telecommunication giants in the world. Four years ago, Frontend Design Ltd in Auckland had the opportunity to be involved in a dramatical website makeover project.

art director SIMON DICKEY | AI / UX designer CORINNE GIBSON | designer / illustrator MARK LIU, FRONTEND DESIGN LTD

casestudy

brief

In year 2007, when Vodafone NZ decided it was time to relook and rework their website they wanted to give Vodafone NZ a new look and feel. They required some fresh ideas and really wanted their website to work for their audiences - to create a space where their audience can easily obtain necessary information, and a space where they can have great experience while browsing through it. In brief, they need something that will work for them in the online world.


casestudy

solution

A good website not only serves as a online face for the company such as Vodafone, but it can become a a good portal to deliver necessary information to the customer, and receive feedback. As a result, a strong site with well-thought usability and user experience is needed and it was necessary to create some personality for this website, yet still follow the strict guidelines of their brand. One of the solutions was adding icons illustration onto the site to soften the corporate image of Vodafone - we are talking hundreds of icons, illustrations and infographics.

casestudy

deliverables

  • Art Direction & Project Management
  • Online Strategy and Research
  • Wireframing - informaton structure, content structure & layout structure planning
  • IA & UX design
  • Illustration
  • Icon and infographic design

where the story begin

Frontend Design Ltd in Auckland had the opportunity to get involved with this redesign process. Vodafone wanted to try something different, and wanted to get some fresh input and ideas for their redesign exercise. As a result, they took a brave step by choosing a non-traditional, agile web specialist, Frontend Design to take on this redesign challenge.

This project began with a few new pages that needed to be added onto the existing site, but slowly the project picked up the momentum, and it started getting bigger and bigger and Frontend Design always managed to fulfill the brief set by Vodafone. Frontend managed to develop a year-long relationship between Vodafone and Frontend Design.

At that time, Mark, who was working for Frontend Design as a senior designer and illustrator, had the privilege to get involved in this important project. At the time, Mark was primarily responsible for creating all the icons and illustration for the site under the art direction of Frontend director Simon Dickey, as well as assisting senior info architecture and user experience designer Corinne Gibson in the finishing of the web interface design.

responsibility and challenges

After a few production meetings with the team and clients, Simon decided illustration and Icons design would be one of the features that will create a point of difference for the Vodafone site. He has assigned this task to Mark based on his ability and background in illustration.

In the early stage, Mark was excited with the challenge but felt tremendous pressure at the same time. His research and study has taught him that visual or image would encourage user retention, and good icons or illustration can express more than a thousand words. On the other hand, an icon seemed like a simple application but the result could be a disaster - a successful icon is a simple graphic that is able to communicate message loud and clear; a failure icon can be simply be ambiguous and misleading.

Researching, experimenting and collaborating

In order to create successful icon illustration, Mark have been through hours of research during after hours. He browsed through hundred or even thousands of icons that were on Google, and analysed what the key elements would make a successful icon. On top of that, it was also important to look into colour theory to understand how colour could influence users while keeping in mind what colour(s) need to be used based on the strict guidelines of Vodafone.

Hours of research and experimentation were spent on this project, as well as hours of collaboration between Mark and the colleagues, and lots of guidance from Simon. Finally, Mark and team have figured out a good formula in icon creation.

  • Working with context - Designing an icon is not like making a stand-alone illustration. While you work on the icon separately from the page, you will always need to know how this logo is going to be applied.
  • Icons are not the hero, but a collaborator - A good icons illlustration should be able to enhance the content, helping users to understand or catching their attention to the topic that you want them to focus on, but not steal all the limelight from the interface or design.
  • Simplification - you are not trying to create an illustration masterpiece for a gallery exhibition, instead you are creating a nice little illustration that sits somewhere on a web page, in general, it is small. So to know how to be simplified was the key to create a good icon illustration.
  • Culture connotation - understand the audiences' cultural background and history will enable a designer to borrow some subtle, or abstract element from the culture and create a strong icon that will have a deeper depth and meaning, yet easy to understand.

Below is an example of showing the experimentation and evolution of icon for Vodafone NZ business site:

Vodafone - logo variation

As for the Vodafone web redesign project, ICONS & INFOGRAPHICS have been added a FLAIR and PERSONALITY for the site.

adding personality to the solution

In Icon creation constantly one would face a challenge of "trial and error". One of the biggest mistakes is over-communicating through icon. As a result, user testing on icons was something that will be important if your design has large amounts of icons. In the process of creating icons for Vodafone, Mark always presented his icon creations to his boss and his colleague. This has enabled Mark to ensure his work was on the right path.

The end result of this journey was marvellous. Mark had created hundreds of icons and infographic throughout this process. There were ups and downs that Mark faced in the process, but the final learning outcomes were great. Mark evolved to be a designer with an ability to create well-crafted icons that would communicate effectively.

As for the Vodafone web redesign project, these icons have been added a flair and personality for the site. Frontend was pleased with the result, and clients were happy with what Frontend Design managed to achieve. Even though the Vodafone site have gone through with another round of international-wide redesign since then, you will still able to find some of the icons that were created by Mark somewhere on the website.

Lastly, whenever Mark is creating a web project, icons design / illustration is always one of a tools that he is happy to recommend to all his clients.

showcase of icons and infographic creation

Below is the collective showcase of some of the icons and infographic that Mark had created for Vodafone:

infographic

These couple sets of infographic were aimed at illustrating Vodafone's business package deals. Mark needed to use simple infographics to demonstrate how this deal will benefit the business users and present the complicated "free to call" and "cost to call" in a simple diagram.

Both of these examples were a good demonstration on how infographic can work better than a thousand words, provided it's done correctly.

vodafone infographic
vodafone infographicvodafone infographic

icons

This is the curated showcase of some of Mark's icon creation for Vodafone. They are divided mainly into two groups - icons with purple belonged to the Vodafone business site, and the rest belonged to the Vodafone personal site.

The colour that Mark chose for the personal site was primarily based on sky blue and golden yellow. Yellow is a colour that will make people feel happier, and blue is the color that provides a feeling of trust and calmness. Mark believed this will keep visitors to the site in a calmer and happier mood while they browsed through all the information.

As for business site icons, Mark employed purple and turquoise as the main colour choice. Firstly to differentiate this set of icons from personal site. Secondly, purple is the color that represents royalty. Mark hoped that this will give Vodafone business site a much more grand and elegant personality, thus to increase the level of trust of their business users toward Vodafone.

Interested in what you reading, check out the full collections of icon illustration at Mark & Co behance site:

Vodafone icons collection
southern skies limited

Southern Skies Ltd

A website for Southern Skies Ltd - an Auckland-based environmental consultancy.


go to behance
racing yacht design
behance project

Racing yacht graphic

I had designed the graphic for seven racing yachts that compete around the world.


go to behance
book cover design

Book Cover design

This was a pro-bono project to create a series of book covers for the Negev BTI bible school.


go to behance

Let's keep in touch

  • facebook
  • behance
  • pinterest
  • tumblr
  • twitter

Contact

Drop us a message -- hello@wearemark.co

give us a call -- +64 (21) 107 1600