Hiuspuoti Alkemisti - Brand + Website

09/05/2022

I got pretty much free hands for this project because the client had full trust in my ideas. We wanted to create a new hair salon brand that had some Harry Potter vibe mixed with a heavy metal attitude to attract a very specific type of customer base.

The hardest part of this project was probably the name of the brand because there are a lot of hair salons in the world and we wanted this one to be completely unique. As the owner of the hair salon, Elina had plans to add additional services later like selling hair products and such. I thought why not call it a "boutique" instead of a hair salon because we both were interested in the history of hairdressers and barbers. It gave us the root for the name Hiuspuoti Alkemisti (Hair boutique Alchemist). As the place is quite small and homely looking the "boutique" feels even more fitting.

Her target clientele is mostly from the alternative scenes so the common bright and fresh-looking hair salon brand wouldn't be the most suitable option and that would be just like all other hair salons out there. So this would be darker, but should not look too edgy.

The Logo

Now we had the name and then we needed the logo and Elina wanted it to look historical and something straight out of Diagon Alley from the Harry Potter movies as was the plan for her boutique as well. So I went for hunting art nouveau style inspiration and tried to aim for the old apothecary bottle etiquette style. Additionally, I also added the philosopher's stone symbol which is closely tied to alchemy. I'm a huge fan of art nouveau era even though I do not reflect that much on my other works. It was nice to finally be able to take something from that era and make use of my pile of Alphonse Mucha and other art nouveau era art reference books.

Alkemisti - Default Image
Alkemisti logo

The logo saw tons of different variations that we looked through together and this final one I made half-ready while Elina was next to me checking out the process. We both liked it the most and I only tweaked the bought font and the floral patterns after. Additionally, I also made a philosophers stone symbol logo that she can use in a more decorative manner like on the door of her boutique.

Alkemisti Symbol transparent 2048px
A dark version of the philosophers stone symbol with a similar floral pattern is used below the logo

Originally we were planning to add one additional brand color, but it was supposed to be used on the boutique walls. After thinking further Elina decided not to use it after all and because her specialty is bright hair dyes, I thought we will be using colors for her content anyway a lot, and adding one bright brand color would make it hard to use with similar hair color.

The Website

For her website alkemisti.salon, Elina wanted something really simple. Even though I'm kinda specialized in making animations and videos, she specifically asked not to add any moving elements. Instead something very simple with a dark background.

Personally, I'd have liked to do something really complex and I even had made a little concept version of this super complex and animated art nouveau site that had responsively working animated vector art. Maybe one day I'll find a project to use something like that, but this time it had to be simple and easy to use.

Frontpage

I went for a very simple layout with a simple header with a booking CTA button, and a large banner section that she can easily update from the WordPress backend by using dynamic field build with the Advanced Custom Fields plugin. By using that she has no need to actually open the WordPress builder at all and the builder I use is the Oxygen Builder. I use it because it allows me to build anything I want without using any WordPress themes which I never use for the sites I build from the ground up. This way I can also be sure that all plugins work with the theme I have built by myself.

The rest of the front page has a short about us section, Instagram feed, and Google reviews using WP Social Ninja. Then there's a little photo of the boutique entrance which isn't the most flashy because it's just a one-person hair salon, but it makes it easier for the customers to find the right door.

The footer section doesn't have anything flashy. Just the main stuff you'd expect to find there and nothing more. One thing I've added pretty much to all sites I've built is the back to top button that makes going through the site much faster. Especially when getting to the pricing/services you'll find out how handy it is to use that together with hashlinks.

Alkemisti website screecapture
For capturing the whole page layout I use Hoverify which is a really handy tool for web design.

About Us

The about us page or "Kampaajasi" Is fairly simple. Elina wrote a short introduction of herself because she is the Alchemist herself and there are no other employees. For this page, I took a photo of her and used the floral patterns designs from the logo to make a bit flashier frame for her photo. I've taken tons of photos from her, but she usually prefers to hide behind heavy make-up art, so this was one of the first times where she's actually recognizable.
I also tried to scale everything so the logo from the footer works also like her work title. A small thing, but I thought it was a nice detail to add.

Alkemisti About Us

Pricing / Services

Now, this is something I basically copied from the previous project I did for another hair salon called Mitoro, but I tried to make a few things better. This page is where the hashlinks and the back-to-top button work nicely together as I previously mentioned. All services are categorized making it easier to find the correct service. Clicking them slides you to the category and if you need to go back to the categories menu, you can just click the back to top button. This makes it really fluent to use especially on mobile. Because I also made a sticky menu it's also easy to go to the booking because the CTA button follows you while scrolling down.
Again the simplicity was the goal and nothing flashy.

Alkemisti Hinnasto
Scrolling all the way down would turn really annoying really fast without the hashlink menu

Booking

The booking is currently from Timma which is a really commonly used hair salon booking service in Finland. There wasn't much we could do with the design because they have used a lot of !important tags for styling. I tried to go over them, but things started to break really fast, so instead, I just did minor tweaks with the colors and I'm currently building a new booking option using the Amelia booking plugin. This way Elina will be able to collect customer data and give better service when she can see the customers' service history and this also allows better conversion tracking. With Timma all the conversion tracking is on their hands and they do not have any proper CRM solutions to offer for their users. Building this new custom booking system for Alkemisti is something way beyond normal hair salon budgets, but maybe I'll get a nice discount for dying my hair and beard in the future for this. It also helps my own work by doing the marketing for her hair salon later.

I'll add a small part here about the new Amelia booking when it is finally ready and in use. Currently, it is only waiting for a couple of updates from the plugin devs to work as we want.

Alkemisti Booking
Timma booking page embedded in iframe

Contact

I'm not sure why, but I've seen a lot of sites without any proper contact page. I use Fluent Forms on all of the sites I've built because it works nicely with the Oxygen Builder and has native editing options and can use Oxygen Builders global styles. This takes away a lot of dumb extra work that only eats time and closes the door for small mistakes.

Because Elina works alone and her specialty is hair dyes, it's impossible for her to answer the phone constantly and for that reason, her hair salon does not have a phone number on the site. It's better to give the full focus to her customers instead of people callers. The form is an easy way to contact and there's also her email and the social channels. A bunch of ways to contact if any help is needed for booking or if the customers have any other questions.

Alkemisti Contact
The contact page uses a form built with FluentForms

Blog

Because Alkemisti was build on tight budget without any budget reserved for marketing. I recommended that Elina should focus on her social media and blog content. After few month she has made quite a few good blog articles which is a lot more than I have made so far even though I was the one praising how good they are for SEO. I guess I should look her articles for good examples because few of them have already ranked quite well.

Alkemisti Blogi
Tons of great artickles already

Aftercare

After doing all the graphics for the brand, website and for the hair boutique itself. I've also done multiple assets for digital advertising and run few campaings for Alkemisti. We used both Meta (Facebook and Instagram) and Goodle Display Network to kickstart the marketing. First with a slightly higher budget and then continued to run few ads with way smaller budget. After all Alkemisti isn't a huge hairsalon with multiple hairstylists. Here's just peak of few visuals I did for her.

Instagram ad
Instagram ad
Instagram ad
980x120 GDN banner
300x600 GDN banner
crossmenu