Visual Identity for Hair Salon Kichukovi

Visual Identity | Graphic Design | Branding | Logo

In this project I showcase my process of creating a visual identity and present the final results. It also includes some materials I created as a part of the salon’s corporate identity.

(Currently still in development)

Client

Kichukovi - my parents' newly opened hair salon

My Role

The entire creation of the visual identity, print designs and a little bit of their social media management.

Design Challenge

My task was to create a visual identity that would suit the hair salon and will be used for branding/marketing purposes, as well as prepare some materials for printing.

Project Overview

My parents decided to open their own hair salon and as a gift I decided to design their visual identity and give them a good start and a way for the brand to be recognized. The project itself was pretty straightforward and the main task was to design their visual identity including things such as logo, brand colours and fonts, corporate identity elements such as business cards, price lists, gift cards etc. As a secondary task I created their Facebook page and set it up for them to post and have it as another channel to communicate with customers.

Methods

• Moodboards • Sketching • Layouts • Graphic Design Principles Testing and feedback on design elements

Software / Tools

• Adobe Photoshop • Adobe Illustrator • Adobe InDesign • Pen and Paper

Value

• Personalized style • A way to be recognized more easily • Appearing more professional and trustworthy

• Platform Development for CONSUMERS •

Process

At the center of GreenCarLane’s consumer platform is the EV recommendation engine that helps people in their search for their new electric vehicle. To start off the platform strong, the team and I worked on research, personas, defining user flows, creating the MVP (minimum viable product), testing wireframes at various stages, and developing the UI.

Personas and Journeys

What consumers would “hire” GreenCarLane’s platform for?

I joined the team at GreenCarLane while they were at their research phase and jumped straight into working with the collected both qualitative and quantitative data from interviews and desk research.

The main focus was to find pains users have when it comes to EVs and research and to define their needs. We looked for patterns and what were some common things people experienced when looking for an EV.  

With the available data we:
    • Built an empathy map on the EV buying experience to have a better understanding of what buyers say, think, do and feel.
    • Defined user pains and gains
    • Used Maslow’s hierarchy of needs to see where GreenCarLane would fit.
    • Looked at jobs-to-be-done where the main objective was to understand what consumers would “hire” GreenCarLane’s platform for.

Using all those tools to look at the data also helped us build more in-depth personas with user journeys.  We identified some pain points they have when purchasing an EV and based on them brainstormed ideas on how to solve them and listed specific features/content we could later use when building the platform. At this stage there was also an initial concept of what GreenCarLane could be as an EV-hub.

User FLows

How to get from point A to B?

User flow became very useful when trying to figure out the ‘pathways’ we would like to have on the platform. They helped us structure the list of features/content to be in line with the user journeys.

Platform Overview

Wireframing the platform!

Wireframes are where all ideas up to this point started to come together. It is the stage where the concept became more tangible and specific. The initial wireframes included almost all ideas and things we wanted GreenCarLane’s platform to have – a place for consumers to find information on EVs, help them choose the correct one and guide them through the purchase journey. The wireframes addressed the user's need for an option to test drive a car, customization, guidance on car selection, comparing cars etc., just to name a few.

The main goal with the wireframes was to:
    • Give ideas structure.
    • Get an overview of the platform.
    • Use it to test the concept.

Concept Testing

What idea will work best?

The team reached out to users from the target audience and had one-on-one interviews where we tested the wireframes and overall concept.

These sessions helped us:
   • determine if it met the needs of the customers.
    • validate what ideas worked and what to focus on.
   • got their feedback that we could use in the next stages of development.

The website

EV Recommendation Engine – the heart of the consumer platform of GreenCarLane

Looking at user feedback and the overall platform wireframes it became clear that we needed to define the minimal viable product (MVP) and focus on the development of it and use it as a base to add on more and more of the features that were in the wireframes. In the case of GreenCarLane the MVP is the EV recommendation engine – a series of questions that relate to car specifications, lifestyle, and personality that consumers answer in order to find out which electric vehicle is most suited for them.

Therefore, the recommendation engine mock-ups were made first and then the landing page as well as a few other additional subpages. The mock-ups were made in Figma and are a functioning high-fidelity prototype. Those were handed in to the development team to be coded and launched. Alongside the mock-ups the design team handed them a style guide – you can see a small example from it in the images below. The design team also made a mobile version of the platform.

Below you can see examples of screenshots of the design in Figma. The mock-ups and prototypes can be shown in more detail upon request.

Website Mock-ups (desktop and mobile)

Recommedation Engine Mock-ups (desktop and mobile)

UI and components examples

• Platform Development for GOVERNMENTS •

Process

When starting this project, I had a blank canvas to work with so to speak since the hair salon is new and did not have any previous visual materials associated with it.

Mood Board

Catching the vibes of the hair salon

Whenever I visited the salon one of the first things to catch my eye was the working stations and how light and relaxed everything was. I heavily used that as my inspiration for colors and overall feel of the visual identity. I started the process with a mood board trying to capture the feel of the place itself and work my way from there.

The small task, we had a few students do, was to have them read a short text as if they were preparing for class and at the end had them answer a few questions about the text. We had the text in digital form since Lix’ platform and sources are also digital, and we wanted to observe how they handled those types of study materials. While they were reading, a teammate and I were observing how they were handling the text – whether they were taking notes (either digitally or physically), underlining/ highlighting, were they looking up terms etc.

Some findings we had from the qualitative data that stood out and were most repetitive were:

     · Students use external materials when studying –ex. videos, articles, definitions of terms, etc.
      · Most reply on classmates to get a different perspective or explanation for things when a topic is unclear.
     · Students often take notes on apps such as OneNote, Word etc. since paper notes tend to get lost.

Based on the interviews and data collected we did an exercise similar to card sorting to group different thinking and behavioral patterns among students. We looked at the mental models the students have. For example, writing things down and highlighting help people memorize information. Or when students find themselves not understanding a term or subject, they looked into external sources such as classmates, the internet etc.

We took the information from the interviews and mental models and created stereotypes of students’ extreme users. This later on helped us look at the platform through the perspective of different mindsets and goals the users have.

     · The dummy - a user who struggles with understanding and memorizing things.
     · The lazy maximalist - a user who tries to get good grades with minimum effort.
      · The e-books hater - a user who is not happy with the e-books reading experience, as it doesn’t offer him the same perks as physical books and papers and feels like he remembers less.
     · The geek - a user who puts a lot of effort into studies, takes notes when reading, and goes out and beyond to prepare properly.

The goal of having these user profiles set out, was to try and find an optimal solution that would fit the majority of them. Of course, one person would not fit perfectly into one category and most of the students are a mix of 2 or more. However, by creating a solution that would cater to these extreme users, we ensure that it would also be valuable to a wider spectrum of students. It also helped us look into things we wouldn't normally think about.

Once we had our qualitative data and findings, we decided to have a look at Lix’ platform.

Logo

The heart of the visual identity – the logo

A big part of this project was designing the logo, that alongside other elements will be the representation of the company and probably the most prominent part. My process started by writing down some words and associations that go with ‘hair salon’ and browsing other hair salon logos for inspiration and to know what is out there.

After that I started with some sketches on paper. I thought the 3 elements (hairdryer, scissors, and comb) went well together and liked the circle element uniting them. So I took those and made them into vectors in Adobe Illustrator and started moving them around to see how they fit together best. As I was doing that, I thought that having the circle be an extension of the hair dryer would bring the elements together. I also picked a font for the name of the salon “Кичукови“ that  wouldbe part of the logo and would fit in with the elements.

Initially, I also had “hair salon” as part of the logo but after I tested that version on some people and scaled it down, it turned out it made the logo too crowded and was not necessary since the symbols were telling as to what the company is representing– a hair salon. As stated by the people who I showed it to.

Once I was satisfied with the final main version of the logo, I tried to figure out different versions that would look better when scaled. I made 3 variants and tested it again on other people. Based on the feedback the 2 final variations of the logo are the ones you see here. One with the circle and name and one that is more simplified with just the elements and the name.

During my process I was working only with one neutral colour for the logo since if the logo works well in grayscale, it will be fine colourised too. For the main logo I picked the golden colour. It looked a bit flat, so I added a bit of shimmer to it with a gradient (more about colours in the next section) and it brought everything together nicely. For a darker variant of the logo, I picked a gradient variation of the gray colour. And these are the final versions.

Colours

Colours, colours, colours!

I took the 2 predominant colours of the salon as a base for the primary colours. I picked the light golden colour since it matched with the aesthetics of the place, and it was very easy on the eye. When I applied it to some elements though (ex. the logo), it looked just a little bit flat, so I made it into a gradient with a shimmer of white to give an illusion of something a bit shinier. And I think that made elements appear more stylish and completed the look.

The gray colour was a bit more neutral, even though it has a slight hint of blue in it and compliments the yellow tones in the gold colour very well. It again was inspired by the interior. Since I had two quite light primary colours, I made a gradient for the gray as well that gave it a bit more depth and contrast.

And to keep the aesthetics of the salon, I chose white as a secondary colour and use it for backgrounds for some design elements.

Black came in as a tertiary colour and is used in some of the title fonts.

      1. You get an overview of who has what personal information on you (and ideally you can change it)

      2. When needed youget to choose who and when you share your data with. For example, no need topull out your whole wallet to find an ID when you can just scan your phone and be verified.  


When it comes to the verificationpart mentioned in step two, we imagined it done by NFC. Since most phones have NFC and are in our pockets anyways, we thought those could be used as communication devices for our concept as well. And since IOT and NFC are becoming more and more prevalent in our lives, we assumed that those technologies will be more broadly available in the future as well.

When it came to the security side of E-ME, we looked into blockchain as it offers a lot of security since it is hard to hack. Therefore, a system like (or similar to) blockchain would be a suitable solution to solve the security concerns that may arise. However, it does have its downsides as well,but since we are being a bit futuristic in this concept, we assumed that it will be more advanced and available in the future.

If we look back at our students’ extreme user profiles, we can see that the solution benefits most of them as a group. The geek will take notes and can help with explanations. The lazy maximalist can benefit from those by reading only the highlights and still get the essence of things with less effort. The dummy will get a variety of perspectives and different media options for studying from classmates and find at least 1 thing that will help them memorize things. Of course, those are true for the extreme users, however, as we said most students fall in the spectrum between those users and the solution would be beneficial for them too. Whether it be forming a small group and sharing notes between them or checking out the external sources other classmates have shared. Also, this extension will give the students a place to gather all their sources and notes and come back to them easily.

Typeface

Mix and match till I find a good combination.

For the typeface I wanted to find something that was stylish that I could use for titles. A challenge was that I needed to find fonts that would work with the Cyrillic alphabet.

For the titles I chose the font “dance” in regular.

For the sub titles (all caps and bold) and body text (regular) I chose a cleaner sans-serif font “Source Sans Pro” that matched well with the more ornamented typeface for the titles.

1. Log in securely and from there you can receive requests from near by devices and approve access.

2. Find relevant personal data you need to check/show.

3. Get an overview of all the companies that have access to your personal data (and change your consent if possible).

Once we had the base wireframes figured out, we build digital mock-ups of how the extension would look like on the platform. We kept Lix’ interface, colours etc. so that it fit in well with the existing elements. Below you can see some screen shots of the prototype and some basic initial interactions that are within it.

When a user clicks on a highlighted text the INKS extension pops out. There are 2 main views on the extension ‘Your Notes’ (first image) and ‘Shared Notes’ (second image).

On the ‘Your Notes’ view the student can:

     1. View their notes
     2. Go to ‘Shared Notes’
     3. Add a Note
     4. Add a link/image/video etc to a note
     5. Share a note (with a person or a study group)

In ‘SharedNotes” students can either view all notes or filter them so they see notes from a specific person/group only that have been shared with them. They can also save a note if they want to.

Corporate Identity

Putting the fonts and colours into action.

Once I knew what colours and fonts I was working with, it was time to design some other elements that would incorporate the visual identity. I had the task to design 2 business cards, a price list, and a working hours schedule of the salon. Below you can see the final versions.

As I was figuring out the layout of some of the designs, I tried different combinations between the elements and some images I had. I tried using only images and/ or cropping them but it was missing something. I added a diagonal line and it fit well with the cropped image and made the design visually intriguing. So, the diagonal line became a reoccurring element.

User Scenario 1
Anna goes to visit the doctor.

When Anna arrives at the doctor's she is asked for access to some of her data relevant for the doctor. 

Anna scans the device that is at the clinic and scans her to open the app. 

Then she confirms in her E-ME app that she grants permission for her data to be viewed.

User Scenario 2
John is trying to buy alcohol at a store and is asked to verify he is over 18 years old.

1. John scans his face for identification.

2. John clicks on "Manual Verification" and finds the tab with the relevant information he needs to show.

3. The cashier sees John's age and sells him the alcohol. Now John can go get drunk.

Icons

The 3 icons I needed to design were a phone, a Facebook icon, and a location pin. Those were the 3 elements that would appear on a few designs so I made them in advance, and I can just copy paste them between elements and keep them consistent in size and style. They are primarily used in the golden colour but have a white variation as well that can be used when there is a background (even though I aim to use the primary ones if possible). They can be used in the gray colour too if the design calls for it.

Business Cards

One of the most important designs I needed to create were the business cards.
The main form of communication between the customers and hairdressers is through phone calls currently so that is why I first put the phone number. The next channel of communication is Facebook, therefore it is also included on the business card. And the address is the third element.

Price List

The price list has "….." where the number should be since the prices were not decided upon yet and can be added later.

Working Hours

I used the hairdryer for this design and had it pointing towards the top part of the text and “leading” the eye of the client, so they get the info that this is the working hours and start at the beginning.

Conclusion

The main learning point for me was always to do a print test! I printed all the elements at home just to see how they would look once on paper and saw that the font for the business cards needed to be a bit bigger than the initial design. And that there should also be a solid background in the print files since some printers It seems just ignore a transparent background and mess up the sizing a bit. But overall, I put a lot of passion into this project and the design of everything since it is also for family, and I am happy that everyone was satisfied with the final results.

What my colleagues say about me

“Diana has been able to integrate the team easily and quickly which has been a tremendous benefit. It is as if she was there from Day 1. She is upbeat and brings joy to the team which in a startup with bumpy rides is a great anchor point to have. Diana has the ability to understand what the team is trying to do, why and how. She has then been able to contribute to the work with her knowledge, skills and experience, also providing guidance and challenging assumptions where needed. She is a great fit to the team and to the company. Taking the lead on activities and initiating others, providing impactful results.”

Tim H. Paarup Dridi
Founder at GreenCarLane

Other Projects

GreenCarLane Online Platforms

UX | UI | Prototype | Website Design

GreenCarLane is the new go-to platform when it comes to electric vehicles. It strives to educate consumers, help drivers find their new EV, and assist government and businesses in their efforts for a greener future.

Read More >

Roll-Ups Design for BfR Professional

Graphic Design | Print Design | Visual Identity | Branding

One of the many tasks I had at BfR Professional was to design 3 big roll-ups that the company could use at events as promotional materials. Each roll-up is for one of their 3 best-known products.

Read More >

INKS - Internal Knowledge Sharing Platform

Concept Development | UX | UI | Prototype | University Project

INKS lets students share notes, highlights, and content among themselves easily. It is an extension to the already existing platform of the company Lix that supplies students with digital curriculum books.

Read More >

If you like what you see and need help with your design activities, get in touch!