UAITP

A case study for creating brand identity and designing website for Ukrainian Association of IT Professionals.
SERVICES
UX/UI design
Logo Design
Branding
INDUSTRY
EdTech
IT
DELIVERABLES
(UI) Pixel perfect web interfaces ready for development
Responsive website
Logo
Branding materials
view
case
CONTEXT

About UAITP

Before we start, to comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of UAITP.

UAITP is an all-Ukrainian non-political, non-profit public organisation. Association promotes development of information technologies in Ukraine for business in the field of IT, for IT education and general digital literacy, and for digital transformation of the government and the state.

In recent years, the association, together with the European Union, has successfully launched many international educational programs in Ukraine and its own professional development and digital literacy programs. At the same time, the current website was completely outdated and did not meet the changed requirements either functionally or visually. Moreover, the lack of a unified corporate style and a convenient and functional website bore additional reputational risks for the association.
THE CHALLENGE

High-level goals

1.
Design and develop responsive website
To maintain a digital presence of the association by designing a new contemporary and user-friendly website and certificate verification system. 
2.
Branding
Design brand identity and use it in a new website and branding and future marketing materials.
MY ROLE

My role

I was the Design team by myself  -  User Experience (UX), User Interface (UI), Brand Design  and Web Design. One man show)).
Key tasks:
1.
Stakeholders Insights & Ideation.
2.
Logo Design.
3.
Brand Identity Guidelines.
4.
User Interface & Experience.
5.
Responsive Web Design
Design Toolkit:
Sketch
Illustrator
After Effects
Webflow
Interviews
DESIGN PROCESS

Plan of action

1.

Research

The first step of the design process involved stakeholder interviews to understand what UAITP is: who are its members (users) and how they interact with the current website, its structure, vision, educational programs, success stories, plans, etc. I believe it’s important to get this information early on in the process, before having an idea or prototyping.
2.

Style exploration

I started with a discovery of an appropriate mood board to get a common style feeling with stakeholders. For that purpose, I questioned them for more specific information such as brand personality spectrum, three keywords that describe UAITP brand, their color preferences, and websites they like. With the feedback from stakeholders, I created a brand attributes document with 3 different types of mood boards.
3.

Logo, Branding

While I was designing the logo guys from UAITP had chosen the mood board they like. So I was able to finish brand identity guidelines.
4.

Website UX/UI design

While I was designing the logo guys from UAITP had chosen the mood board they like. So I was able to finish brand identity guidelines.
5.

Team feedback

Once the web interface was ready, I took feedback from the stakeholders in order to understand the experience gaps.
6.

Web design

On next production stage (after UX/UI and feedback) I proceeded with frontend works (done in Webflow).
7.

Validation

Validation, although part of my usual design process, would take place just after war in Ukraine will be finished and UAITP will be back to its normal operation.
RESEARCH

Discovering

First of all, I decided to perform several interviews with stakeholders to gather as much information about the organization and its goals as possible. Those interviews helped me to explore data and knowledge to proceed to the following steps of the design process:
the present state of the organization (its structure , vision, educational programs, success stories, their goals, and plans);
target audience;
how stakeholders see the functionality and structure of the future website;
current state of their website;
all available content in different forms.
BRANDING

Brand Style Exploration

So the next step I took stakeholders through is I sent a form and asked to select three keywords that describes his brand (organisation). I also asked to send me a couple examples of websites he likes and why. Based on information provided from the client I built out a document with brand attributes and mood boards for each keyword provided:

Primary logo design

While stakeholders were choosing the right moodboard for them I switched to logo design. After several hours of communication and a few more hours of brainstorming and sketching, I was able to present to the client several concepts of the new logo.

Secondary (compact) logo

Secondary logo – is the compact version of the logo and is used when the primary logo doesn’t fit or feel right in a chosen context. The primary logo is pretty detailed and takes up more vertical real estate, so horizontal and simplified logo was needed. This alternate logo still feels cohesive and at home with the rest of the identity, but is used on a more as-needed basis.

Brand Pattern

After the logo was approved, I started working on the pattern, which will later be used on the website with other promotional materials.

Main idea was to show that UAITP is formed and made for people. To achieve this, I chose to use shapes resembling the five letters that make up the name and logo (UAITP) and arranged them in a grid to symbolize the community of UAITP. After exploring various ideas, I finalized this concept:

Basic stationery

WEBSITE UX/UI

UAITP website design

While I was getting logo done, client provided feedback on brand attributes document that had sent him earlier. He liked style #2 so I proceeded with UI/UX design of the hero section of the homepage.

Feedback from stakeholders

I initiated a meeting with stakeholders to present the design and the content structure. They were pretty much happy with the design, however several changes had to be made to the structure of some of the pages. So I implemented those changes and proceeded with web design.
WEB DESIGN

Responsive web design

All my web design process is done with Webflow, witch allows to design unique responsive webpages with smooth custom animations.
OUTCOME

Validation

As I mentioned, validation is a very important part of my usual design process, however it would take place only after war in Ukraine will be finished and UAITP will be back to its normal operation.

NEXT PROJECT

FTN Monitor