IEEE Branding Projects

IEEE Branding Projects

The Scenario

IEEE is the trusted voice for engineering, computing, and technology information around the globe and the world’s largest technical professional organisation dedicated to advancing technology for the benefit of humanity. For over a century, IEEE has sponsored various programs to honour achievements in education, industry, research, and service, celebrating distinguished colleagues, teachers, and corporate leaders who have made a lasting impact on humanity, technology, and the profession.

I was approached to design logos and provide brand direction for three of their main organisations, which are:

Robot Championships

This organisation promotes robotics and digital advancement, encouraging youth to pursue a career in the area and be creative by building their own robots. The competition currently takes place in Malta, however they have the intention to move it abroad in the future.

PEAsC

Professional and Educational activities have a great variety of Programs and Contests in order to serve its goals and mission. PEAsC’s mission is to develop non-technical skills programs (such as “Leadership Skills Training” or “Project Management”) in order to provide additional value to members, in particular to young engineers and students. To coordinate educational activities programs in Region 8 including pre-university education, university-level education, post-university (continuing) education, and the promotion of public awareness of engineering, technology, and other topics within IEEE’s Field of Interest. To recruit volunteers to implement professional and educational seminars and workshops in R8 and to train local Tutors (Trainers) for these activities.

Local Language Program

The Local Language Program is an initiative that promotes local languages of many countries across the globe by setting up talks – about science and also other subject areas – in those countries and finding local speakers to highlight local education and talent.

Robot Championships

The design of this logo reflects minimalistic design, with inspiration from HUDs and robotics hardware. The aim was to modernise the brand, since the previous design was quite outdated and was not resonating with the target audience, and also reflect the excitement of the competitions.

Since the robots created by students are more functional than independently intelligent, the logo variant in the middle were not ideal; the idea on the right was considered a bit too inflexible and not reflecting continuous area development and modernisation or teamwork.

Initial Designs

Final Designs

I created two versions of the preferred logo design. However, the client could not pick between the two and therefore they went for both, deciding to specify their applications and uses based on the backgrounds being used, and the medium. For example, the variant on the left (see image below) is more suitable on lighter and simpler backgrounds since the wording ‘IEEE Region 8’ would be lost on dark and busy backgrounds. I suggested they choose the variant on the right, simplifying brand guidelines and ensuring optimal readability and standing out, whatever the application. As designers like me already know, the client does not always go with what you suggest… 🙂

Logo Applications

PEAsC

The old PEAsC logo (see image below) presented quite a challenge in terms of application: in general it was too busy and had too much wording, in small applications it was impossible to keep it whole or readable, or to extract a piece of it while maintaining its meaning, and on social media profile images it was continuously cut out. The icons in the logo were understandable, given that they are quite universal, however they lacked originality and uniqueness.

Old PEAsC Logo

Initial Designs

I suggested keeping the concept of having three pieces, however designing the pieces in a way that they have a role in making up a whole. Below are initial designs with inspirations coming from arcade games such as Tetris and my experience in Technical Design projects. Initially, the client did not want to swerve a lot from their current logo, therefore I tried to stay as close as possible – however the results were not ideal. Other ideas included using white space and extracting the icons for the full logo.

Final Designs: Main Logo

Keeping the client’s requirements and all ideas in mind, I further simplified my design down to shapes – very similar to the shape blocks bucket I had as a child – and expressed the conversion of three pieces to a whole by using arrows. This modular idea provided the right level of flexibility with the elements making sense both together and apart when applied as ‘sub-brands’.

Sub-Brand Logos

Local Language Program

The logo for the Local Language program had several developments; the final requirement showed that it was not going to be used as a logo, but rather as a secondary stamp or icon to and placed on promotional material for talks set up in the Region 8 list of countries to show what language is going to be used during the talk. Therefore any initial logo ideas were scrapped and the final design was created more with an icon mentality (even though it had to contain more text that I cared for, as a requirement!). The idea behind this design is that the shape itself has the form of a speech bubble. When minimised, the important wording ‘Local Language’ and language reference are still readable. The low-opacity inverted commas are there more for an effect of depth and to further highlight the event type.

There were 6 variations required per language: the language representation at the top right as per the local language, a version with ‘Ambassador’ at the top and another version with ‘Activity’ at the top – to be used depending on the type of talk or event being held in that country. For each these 3 versions the B&W version was required as well (like the other two logos above). This required some repetitive work, however it was quite satisfying.

Logo Main Version

Conclusion

It was quite an intensive project, with just two months and very limited budget. However both me and the client were very satisfied with the outcome, and I was glad to contribute to better visibility of these European organisations which help sustain just causes and work to expand scientific knowledge, accessible education and expression of talent in countries across the world.

GXD Academy

GXD Academy

The Scenario

GXD Academy is a startup founded in 2021 with the aim of providing completely remote and flexible learning in the highest-paid industries, with courses taught by experienced professionals, rather than lecturers in the sector.

This company wanted to build its brand from scratch, together with artwork for both print and social media applications, and a website where the prospective students could book the courses they want to attend.

In order to avoid PCI compliance issues, I suggested they implement Stripe and PayPal as payment methods, and use their hosted pages as the checkout. Both payment processors also have stock counting and price control as part of their services, which further reduces costs for the start-up.

Competitor Research

creativelive.com

  • Based in US
  • High-end instructors
  • Many subjects
  • Pay per class
  • Online, not Live
  • Mix of classes and workshops
  • Can download offline access 
  • Available on mobile
  • Min. Price for similar course classes: €25 (student needs to buy multiple classes)
  • Max. Prices: €299 per class (course comprised of multiple classes)
  • Live chat

skillshare.com

  • Based in US
  • Free classes
  • Pay per class
  • Get started for free (7 days)
  • Mix of instructor level
  • Low to Medium pricing: €14 per 45 minute class 
  • No career paths
  • Mostly focused on tool tutorials, rather than subjects
  • Live chat

udemy.com

  • for enterprise
  • For students
  • Many subjects
  • Lecturers not necessarily qualified or experienced.
  • Online, not Live
  • Pay by class/short course
  • Affordable pricing

artclassesmalta.com

  • Based in Malta
  • Maltese audience
  • Online live courses during COVID
  • Brick & mortar classes available
  • Only similar course is Graphic design course: €385
  • No official certification
  • Live chat

icemalta.com

  • Based in Malta
  • Maltese audience 
  • Online Live for COVID-19 only
  • Brick & mortar classes available
  • Official certification from Adobe, and other companies, but carry a high price tag for certificate.
  • Offer Graphic Design (course), Digital Marketing (Diploma) & Web Development
  • Get Qualified Scheme
  • Medium to High pricing for similar courses (€400 – €2000)
  • Live chat

Overall Differentiation from Competitors:

  • Based locally, international reach & audience (courses are in English, and based on CET timezone)
  • Online Live lessons and workshops all year round
  • Live interaction, Q&A and discussions directly with the tutor and students across the globe 
  • More affordable pricing for full courses
  • Students can choose how they want to excel: via small assignments, tests or just attendance with the relevant certificate given out.
  • High focus on student feedback and its implementation
  • One-on-one optional sessions for better understanding

The Target Audience

Needs

  • Great, seamless, responsive online experience
  • Instant reply to queries about courses
  • Easy profile creation and signing up for courses
  • Clear information on what the course contains and what they are going to achieve
  • Professional, expert instructors
  • Well-structured courses with original, informative content
  • Clear pricing, no hidden fees
  • Flexibility 

Wants

  • Affordable pricing
  • Follow-up for feedback
  • Career advice
  • Networking
  • Discounts and offers
  • Great job prospectives
  • Customer loyalty

Personas

Photo by Andrea Piacquadio on Pexels.com

Maya Borg

  • Age: 20, Maltese
  • Currently a student reading for a degree in Digital Arts
  • Is interested in learning Digital Marketing as it goes hand in hand with the Digital Arts field
  • Is currently very busy having lessons sometimes until 20.00, has other items to study
  • Spends a lot of time socialising online on her phone
  • Does not have a car yet and still lives with her parents, therefore it is difficult for her to make it on time to classes in other locations
  • Has a very strong opinion on how things should work
Photo by Dmitriy Ganin on Pexels.com

Katrina Baye

  • Age: 25, Netherlands
  • Finished her degree a couple of years ago, but wants to up her skills in another area to find a better job with a better salary or get a promotion
  • She works office hours until 17.30 and owns a car. Meets her boyfriend or friends after work
  • She has a rent to pay and is planning to buy a place to live
  • She is consistently updating her LinkedIn profile and looking at recruitment websites to find a job.
  • Wants to invest time in learning a new skill, however wants to maintain a healthy work-life balance; an efficient solution.
Photo by Pavel Danilyuk on Pexels.com

Stefan Galea

  • Age: 33, Maltese
  • He has been working as a Developer for the past 8 years, but wants a change in scenery
  • He works office hours, and does not have much of a social life. He likes playing online games
  • Currently paying a home loan, but is not a big spender
  • Not much of a social media person, but very technical and practical.
  • Very picky when it comes to online websites, and tech hardware.
  • He is not certain what he wants to do yet, is a bit afraid to change jobs, but is considering studying a new creative digital field

Requirements and Deliverables

A New Brand: Creation of logo, brief brand guide and direction of the brand.

Social Media Pages and a Digital Marketing Plan: A digital marketing plan which included Facebook and LinkedIn as the main social media pages, artworks in all sizes for the social pages (such as profile pictures and rotating banners), posts and adverts including Google Display.

Videos: The client also required videos for advertising on YouTube, Google Display channels and social media channels.

Website: A newly designed website built on CMS which provides the client a high degree of flexibility in terms of updating and adding new content.

The Brand

Research showed that the majority of academic companies, the main colours are based on dark and/or cold palettes. While these colours tend to denote a certain level of prestige and value, they are rarely associated with youth, fun, a fresh outlook, or the contemporary. The most common style is also quite geometric and minimalistic, with certain entities opting for a more complex and detailed style with more of a traditional twist.

Given these insights, I tested with the other end of the spectrum, using warm and bright colours and organic shapes, with a mix of minimal layouts and decorated backgrounds. The whole design idea was built while keeping in mind target audience. The client was very happy with the results, and required a very brief brand book which just covers the basics of the brand, such as logo sizes, typography and colours.

Page from the Brand Book: Logo sizes per application
Page from the Brand Book: Brand colour palette

Digital Marketing Material Samples: Courses and Events

Digital Marketing Material Samples: Generic and Special Occasion

Videos

The Website

I used Webflow to build the website – it is quite an intuitive CMS and slowly becoming popular. As a payment processor, I suggested Stripe for card payments, due to their free merchandising back office (where the merchant can update pricing, stock amounts, etc) and also their lower percentage rate off each transaction. I also encouraged the integration of PayPal – even though its rate is much higher and the user friendliness on the merchant side much lower than Stripe, many users still seek it when paying online, confident in the safety it boasts that it provides.

The resulting website proved very simple and easy to navigate, with eye-catching CTAs and all the information that the prospective student might need to know. I also provided a Start From Here button, which takes the user directly to the list of courses available. The website is divided into 5 main sections:

  • Homepage
  • Courses
  • Events
  • About Us
  • Support

I integrated the Live Chat plug-in by Facebook, so that the client receives any incoming messages directly on her phone by installing the Meta Business app. For cookies implementation (to be GDPR compliant) I used the very effective free tool named Finsweet, which made it so much easier for me.

To make the merchant’s daily operational workflow easier, I used Zapier and created multiple automations (automated chains of actions) such as:

  • Every time a user signed up for the newsletter, it created a new entry on a Google Sheet and added the user to the merchant’s Mailchimp Account, tagged as Newsletter Sign Up
  • Since the event’s checkout was done via Eventbrite and the courses checkout via Stripe or PayPal, an email was sent directly to the merchant’s Outlook account to notify of each purchase, followed by the customer’s details integration in separate Google Sheets (Event type and Course Type) and then integrated in Mailchimp and tagged accordingly as Event attendee or Course attendee.

Desktop Flow

Mobile Flow

Checkout

Conclusion

The final step to this project was submitting the website sitemap to Google, integrating Google Analytics and Google Search console to start collecting audience and interaction data straight away, while keeping tabs on website health in terms of responsiveness and accessibility. Adding the business to Google Business was also important for future customers to see opening times and other information about the new start-up.

I think that this was the most intensive and satisfying project that I have worked on. I discovered new tools, automation processes and information that I never knew existed, but which are so vital for online businesses to kick off their dream sustainably with limited capital.

GXD Academy went Live on November 2021

MCAST Rebranding

MCAST Rebranding

Intro to the Client

Malta College of Arts, Science and Technology was established in 2001 and is Malta’s primary vocational education and training institution. Comprising of six Institutes in Malta and the Gozo Campus, MCAST offers 180 full-time and over 300 part-time vocational courses ranging from certificates to Master’s degrees (MQF Level 1 to Level 7).

The original crest with the mission statement of the institute is set in stone.

Project Objectives and Requirements

The primary aim of this project was to re-establish the MCAST brand as a refreshed entity which has its younger student audience at heart, while at the same time maintain the prestige and status that its 20-year heritage provides.

As a college open to all ages and offering courses at different levels of achievement, MCAST has a varied target audience, however the majority are between 16 and 25 years, followed by 25-35 years and 35 years and up. Given its established good reputation with older age groups, the goal was to attract more young students to choose MCAST over its close competitors including the University of Malta, St Martins Institute and ICE, amongst others and launch on a commemorative date: their 20 years anniversary.

The project requirements were as follows:

  • A new logo which is more modern, and which goes well with the College’s official crest
  • A set of detailed Brand Guidelines which include social media application guidance
  • Templates for social media, presentations and College documentation.

You might be thinking – what about their website?

Even though I specifically disagreed with the fact of treating the website as a separate project – one of the many reasons being that since a consistent and well-designed and branded online presence is one of the strongest points in targeting a younger audience – they decided to go ahead and not dedicate a reasonable budget to revamping the website 😦 

The design for the logo for MCAST had very innovative beginnings; after researching what the other national entities are doing and also looking into international academies and universities for inspiration, I realised that MCAST had one specific thing which they were known for: hands-on learning. Learning and practicing the craft, achieving a certain level of precision, a focus on the vocation that the student signed up for. I tried to reflect that in the organic and geometric forms of the different logo formations, while keeping in mind that a simple symbol should remind the user of the brand straight away. This can be achieved by building the logo in a modular method: the pieces can be identified when apart, but are holistic when placed together. 

Initial sketches of the logo
Initial sketches of the logo

The challenge lay in the fact that the client had previously assigned another freelancer to design a logo for them, however they were having issues with it as it was not flexible and too complex to be used for digital marketing applications; not to mention that the style was not exactly in line with the goal of ‘attracting the younger audience’. Despite all the Marketing team’s opposition, the management board did not want to part with it at all costs, and wanted it to have a significant role in the MCAST brand. Initially, another freelancer and I were chosen for this project, however this inflexible approach led to the other party dropping the project altogether. Seeing this, I realised I was on my own, yet acted upon it by discussing at length with the client’s lead decision makers in the marketing department which led to quite a successful outcome. 

The logo created by a previous freelancer.
The logo created by a previous freelancer.

I suggested we get to a compromise in favour of the brand by reserving the use of the previously designed logo as the crest on certifications and official documents, and combining it with a modern word mark which when separated, they were still highly distinguishable. The word mark element would provide the necessary flexibility for social media profiles and digital marketing, which were the channels followed by the targeted young student audience. This solution provided the necessary workaround and maintained a balance between heritage and the modern upgrade which was the main objective of this whole project. 

Hierarchy of the marks: this is showing how the modular build of the logo is providing the required flexibility for an institution driven by completely different mindsets.

Hierarchy of the marks: this is showing how the modular build of the logo is providing the required flexibility for an institution driven by completely different mindsets.
The Stylised M: Although at the end of the hierarchy in the image above, this brand element proved to be the most useful in terms of flexibility.

The Stylised M: Although at the end of the hierarchy in the image above, this brand element proved to be the most useful in terms of flexibility.

The second interesting challenge were the institutes. This was another factor that the previously designed logo was not catering for, however the modular thinking behind the brand I designed fill that gap. The Stylised M had an additional stroke which changed the colour according to the institute, therefore any advertising or social media posting was consistently branded as MCAST, however the colour attributed the attention to the particular institute. Of course, that would never be the only visual cue; the advert had wording and imagery according tot he course that is being offered, and the institute colour was applied throughout. Where space permitted, and for official Institute documentation, the full Institute logo would be placed, showcasing the full name of the Institute under the College Primary Logo alongside the Stylised M with the coloured stroke.

The Stylised M offers more flexibility: it is a design element in itself, and different colours are applied to its secondary stroke to refer to the Institutes.
The Stylised M offers more flexibility: it is a design element in itself, and different colours are applied to its secondary stroke to refer to the Institutes.
The full logo for some of the Institutes.
The full logo for some of the Institutes.

The Brand Guidelines

The Brand Guidelines were the second major part of the project. Since I was a freelancer and not part of the team, I had to make sure that anyone who reads them understands how to apply the new brand. I also conducted a workshop with the main stakeholders and presented the new brand and its applications. Amongst others, the brand manual explains and illustrates:

  • The brand mission statement and tone of voice
  • The new brand elements and correct and incorrect use
  • The new brand elements for all institutes 
  • Brand element behaviour in designing for partnerships, hosting and third party events and scenarios
  • Typography
  • Brand colours
  • Photography guidelines 
  • Iconography – icon designs for multipurpose
  • Brand application on stationery, gifts, signage and other items
  • Brand application on social media, and a brief social media post guide
Brand Guidelines: Front Cover. See the full brand manual here.
Brand Guidelines: Front Cover. See the full brand manual here.
Colours: The primary colour scheme and using the brand element as a design element.
Colours: The primary colour scheme and using the brand element as a design element.
From Brand Manual: A4 Cardboard Folders design
From Brand Manual: A4 Cardboard Folders design

Results and Conclusion

This was my second major educational institute brand revamp (see University of Malta brand redesign), and I realised how two tough competitors are being held back by many similar factors. Maintaining prestige and heritage with reference to years of experience while being attractive to the younger audience might seem a tricky business – and it is – however, when analysing the situation, the audience and your marketing channels, I realised that this can be achieved by leveraging the right element at the right time, in the right place. Complex, ornate crests might not be ideal for digital marketing applications, but they enhance value and status when placed on degree certificates. Young students might be looking for a fresh view on education, however good reputation of long-standing brands is not something that is easily overlooked either.

Overall, I think that balance has been achieved with this brand, and even though I now have no control on its application, the guidance provided has a lot of potential that can only benefit this leading national education institution. In short, some immediate visible results were:

  • Exceptional increase in brand flexibility
  • Brand design and tone of voice is now in line with the target demographic
  • MCAST has a clearer path and guidance towards website redesign and a far more consistent brand application methodology

Redesigning the UXDX Experience

Redesigning the UXDX Experience

A Live UXDX Conference in Ireland.
Source

Intro the the Project

UXDX is the fastest-growing product conference in Europe, bringing UX, Design, Dev and Product together in multiple small-scale community events throughout Europe and finally a major event in Dublin, Ireland. They are also hosting events in Asia Pacific and USA. As a Product (UX/UI) Designer I had to redesign the UXDX experience by revisiting the brand experience, the website’s UX and UI, and building a design system focused on scalability and flexibility. My main tasks were:

  • refresh their brand design in terms of colour scheme and application
  • provide a new design direction for all their marketing efforts
  • review the website’s user experience and reflect it through a revamped UI

Project Scope

A website was already in place, however the user journey needed to be streamlined and the UI updated to match the experience. UXDX wanted their users to enjoy visiting and using the website not just when they wanted to buy tickets for their conferences, but to refer to it as a leading source of knowledge and guidance in product design, development and management.

The website’s roles needed to be:

  • Increase ticket sales
  • Make the UXDX framework and model of working when developing products available to everyone, easy to navigate and read.
  • Have a progressive, timeless design based on high usability
  • Have a scalable design and a structured, possibly server-less back-end

Current website shortcomings included:

  • No clear starting point for the user journey on the page.
  • No reason (functional or aesthetic) to visit the website unless you are really interested in getting tickets for the conference
  • No reason to subscribe unless you want to be notified of the tickets pre-sale (in the event)
  • Tickets page very unattractive
  • No access to certain pages from Homepage 
  • Missing pages and information
  • The Agenda, which is essential to get new leads convert into sales, is very hard to follow
  • No video gallery
  • No categorisation (cannot search the website by term and get relevant posts/videos)
  • The blog layout was a completely different style from the rest of the website
  • Website in general had a lot of scrolling and a lot of text.
  • The colour scheme looked childish; it did not reflect what the company truly stands for.
A sample of previous FB posts: There was no clear design direction.
A sample of previous FB posts: There was no clear design direction.
A sample of the new design for social media posts.
A sample of the new design for social media posts.
The new design for social media adverts - an event ad.
The new design for social media adverts – an event ad.

Competition and Target Audience

Main competitors:

  • Web Summit, Mind the Product, Saastock.
  • Competing for: Same/similar audience, sponsors
  • UXDX: Much smaller budget, less sponsors, a younger, less-known company (4 years)

Audience & Markets

  • Product teams: UX/UI/CX/Product Designers, Developers,  Product Owners, Product Managers, Digital Marketing persons, C-Suite
  • Markets/Themes: Tech, Product, Marketing, Start-ups, International events, online training & courses, career advancement and development, teamwork and collaboration

The UXDX Design System

This was my first experience building a design system for a website, and I enjoyed it, however I came to understand that it is also a big responsibility. I was working remotely with developers and used the REM system for more precision and easier development. I also adopted a system of redlining, wherein the design elements are carefully measured and shown like diagrams (refer to images further down).

The design system was especially required to be precise and clear since my position was on contract basis, therefore I had to make sure that any other designer, developer or product manager can understand the information in the system and how to continue building on it. As a small startup, we worked in quite an Agile manner: we had stand-ups everyday to bring each other up to speed, planned the weekly KPRs on Notion, and then analysed what has been achieved and how we can be more efficient at the end of each week. We planned our work in sprints, using Kanban boards to move actionable items from backlog, to design, development and then to testing.

Other backend considerations included using Bootstrap, SEO implementation, going serverless, and using the push and pull method for data implementation. We used Airtable as the main database and separate system for content management.

Bootstrap Grid
Bootstrap Grid
Redlining method: more work for UX/UI people, but life made easier for development.
Redlining method: more work for UX/UI people, but life made easier for development.
Initial redline application on the design system.
A sample of the design system showing colour scheme and fonts, also in REM.
A sample of the design system showing colour scheme and fonts, also in REM.

The new UXDX website

There were many design ideas, however many times you need to find a balance, and a compromise depending on the deadline and the development. For example, the hexagonal header was proving to be a bit of a challenge to develop, especially when sizing down the device, therefore – in the interest of time – we changed our decision and went for a simpler header layout. When viewing the final website, you will notice how much the design developed. The initial idea revolved around the shape of the logo, in order to integrate the organic side of the brand and make it more apparent throughout the website, however these ideas changed as other circumstances and factors were taken into consideration. The design was also further updated after the end of my contract.

There was also a lot of testing of different CTAs, headlines and descriptions – it is quite tricky to implement SEO on your website without making it obvious or robotic, however, together with the marketing manager, we managed to do so.

The designs below were made using Figma.

A sample of the screens, initial designs
A sample of the screens, initial designs
A sample of the agenda, initial design
A sample of the agenda, initial design
A sample of the Speakers page section, initial design.
A sample of the Speakers page section, initial design.

The new UXDX website led to a 3-fold increase in sales, even though the conferences were cancelled and moved online due to COVID-19. The team was less stressed with customer care calls for simple questions such as where is the conference agenda as now there were no more pages with endless, unorganised information and the user journey was much more clear and intuitive through the new website UI. The redesigned website was launched in June 2020.

The new design direction for both the digital marketing aspect (social media posts, adverts, banners, etc) and the website has provided the start-up with a fresh image and a completely transformed user and brand experience online, and is now reaching its target audience more effectively; successfully obtaining a better ROI as result.

Final design for Homepage, a section.
Final design for Homepage, a section.
Final design for Speakers list, a section. As you can see it retained the initial design for the major part.
Final design for Speakers list, a section. As you can see it retained the initial design for the major part.
A sample of the Agenda screen, a section. As you can see this also retained a lot from the initial design phase.
A sample of the Agenda screen, a section. As you can see this also retained a lot from the initial design phase.