You may have never heard of this exclusive Milwaukee-based salon, but you'll find their stylists behind the chair every year at New York Fashion Week, flying the country doing celebrity styles, or educating the next generation of premium stylists.
Clean and minimal
Black and white
Easy to use
Website design
User experience
Print collateral
5 weeks (initial project)
We were approached about doing the Scottfree Salon website by their marketing director, Jordan. Up until now, they were using a not-to-be-named online website builder, and we all know how shitty those are to use. They were constrained by the limits of the theme, and it didn't really match the brand at all. This was a huge problem, especially in an industry where image is everything. Jordan, along with Scottfree's Creative Director, Parker, came to us with a vision: clean, simple, minimal; but also bold and edgy. A little bit MOMA, a little bit punk rock. Now, who doesn't love some good punk rock?
The job had a rather short timeline too, because all of this had to be done ahead of the launch of Scottfree's Manhattan, New York location. So, besides the site, we would be designing print material to help promote the new location, as well as several events that Scottfree throws throughout the year. But we first had to figure out how to create a minimal design, with a lot of flair.
Scottfree's new site was going to be incredibly minimal. As easy as that sounds to do, it actually creates a new set of obstacles when laying out the site. If you have an ultra-minimal design, with a lot of content, it can look like an imposing wall of text.
To avoid this, we broke all of the content into sections, and included ample amounts of white space to separate everything out. We then created a zig-zag pattern with the content where possible, to give the site a sense of flow, and encourage the user to continue reading.
When we began the design process, we already had all of the content in our hands. So we wireframed everything out to test for readability and flow. This process allows for a focus in usability, where we can put ourselves in the role of the user. We focus on what we want them to see, how we want them to interact with the site, and what possible steps we want them to take while they navigate the page. Once that's done, only then do we begin the design process.
It is beyond important that your site crafts a good user experience, no matter what device they're using. I can't believe I still have to say this, but I do. All of us are on our phones, and most of us are on multiple devices at the same time. I'm on my phone right now while I write this. And with a website that caters to a demographic of 14-87, it was important that it just works, no matter what. So that's what we did.
The final design featured big bold headlines, a lot of white space, and thin diagonal lines to separate sections. The lines all point down, giving the site a sense of flow and direction, and encouraging the user to continue scrolling. When you have long pages, you want to make sure people are moving down the page. And it's subtle, but all of the arrows point to the headline of the section below it. This was intentional.
For visual consistency, we set up a "photo day" for the salon. We hired a photographer, and had all of the photos taken on the same day. The salon has massive windows, so changes in weather or lighting can really effect the photos, and we wanted to try and avoid that. On a site this simple, something as basic as photo lighting can really stand out.
Along with the website, we took over production of any print & promotional pieces for the salon. This was important to us to help maintain brand consistency. And when your brand is based around ultra-minimalism, with a ton of white space, visual consistency is important. This is just a small handful of examples that we've done for them, but you get the idea.
This is a copyright. There's a funnier one on computer screens, but since you're on a phone, you just get this one.
