Redesigning Our Site to Land Our Ideal Clients




PART ONE


Why Are We Re-Designing Our Site?


Year one of Golden has been great. We’ve worked with some clients we’ve really loved and made some things we’re really proud of. BUT, we’re not totally satisfied.


If you’ve been following along for a bit, you’ll know that we have some big goals for Golden’s second year. We want to work on more projects that light us up, we want to work with more clients who truly value design, and we want to make more money (maybe even enough to live on? lol).


The first step in that is making our most common first impression (our website) speak directly to our ideal clients – startups.


And that’s where this process begins.



The Strategy: Mapping out the User Flow


Our current website has too many options for potential clients. (They can browse our work, read about our services, read our articles, or reach out to us.) That’s overwhelming! It puts all of the work on the visitor as opposed to guiding them through the experience.


There are three different ways in which we are going to take charge of the user experience:


1. More Focus, Less Options


We are going to choose 3 main links to place in the top nav, and put everything else in the footer. By doing this, we control where users go. We’re choosing work, team, and contact as our most important links, removing services, blog, and testimonials. These things will still exist in some way shape or form, but they’re not part of the main user journey we’re mapping out.





2. Intentional Layout & Messaging


We’re using the home page to speak directly to our potential clients, showing that we understand them, their struggles and their goals. Our current site is just a hodge podge of links, previews, work, announcements and CTAs. We want to create something with clear, intentional messaging that also shows (not just tells) clients what we’re capable of. Therefore we’re going to create a homepage that looks and feels like something we’d create for our clients.





3. Look & Feel


One major brand change we’re making is our font. We still really like our main logo and body copy font (Circular Std), but our headline font (Playfair Display) doesn’t speak to startups. It’s very editorial and sometimes hard to read. We’re switching to something a little more fun & tech-y (Recoleta).


In these new homepage designs, you’re seeing illustrations that are temporary/placeholder. I designed them because I like the gradient/grain style and wanted to try it out. But we don’t think it’s the perfect style to use yet. We’re still experimenting!


Main Takeaway – We’re aiming to appeal to startups, not other designers. So all of our decisions for the customer-facing website should be made with them in mind.


PART TWO


This past week we tackled the Portfolio section.


There were 3 things we wanted our portfolio pages to include:

  • Story structure

  • Client background

  • Process work


Giving your case studies a story structure


I wrote an article a while back about how important story is in branding and business. (Read it here.) We realized we weren’t using story to our advantage when showcasing our previous work. We just introduced the project in a very general way, and then followed that intro with a bunch of photos and mockups of the work. Boooooring. We used to subscribe to the idea that you should always let your work speak for itself. But now I don’t really believe that’s the best way to sell yourself as a designer.


When a prospective client looks at our site, we want them to be able to put themselves in our previous clients shoes and see the potential partnership as a success. In order to make that happen we want to tell the story of the project. We’ll feature one of our best photos or mockups in the header, then follow that with the name of the client, a quick introduction (which we’ll dive deeper into in a minute), and then the scope of the project. Then we’ll move into more mockups and photos, sprinkling in written content to tell the story along the way.


Verbal + Visual = 👌

Giving some client background in your case study


Think of client background as the problem and your process and final product as the solution. A killer logo or website doesn’t mean much to potential clients without context.

We decided to begin the intro section with a little bit of client background. First explaining what the client does and what the mission of their company is. Pointing out any differentiators. And then finishing with the design problem.


For example, why do they need a new website? Or identity system? Is their old logo very stale and doesn’t reflect the modern energy and altruistic values the company now has?

This is a great way to wrap the intro because it piques interest and people want to continue looking and reading through the case study to learn more about how the design problem was solved.


Including process work in your case study


As I mentioned before, the process work of a project is a great way to show your solution to the design problem. But process work can mean lots of different things. In some case studies it might be beneficial to show sketches or unchosen logo concepts that led up to the final design. In some it might help to show wireframes or customer journeys. And in others, process work might be as simple as explaining your design decisions in words.


Keep in mind that most potential clients looking through your portfolio are not design-minded. They may not be visual learners either. So use verbal + visual to really help them understand how you solved the problem and why you made the decisions you did. As we know, design isn’t just an art, it’s a science. Show your visitors that you’re not just throwing random, aesthetic colors and fonts on a page. Really take them through your thought process.


Example: Commune portfolio page


Below is an example of a project page we’ve written and laid out for our new site. Check it out and see how these three pieces fit together to make up this new case study.





PART THREE


Illustration Style


This is the fun part!! I mentioned before that the illustrations you saw in Part 1 were not final. We really like the style, but it doesn't fit with our "vibe." They're very tech-y, and since we're already shifting the website to appeal to startups, we don't want to just appeal to tech startups.


The way we thought about it was that the copy and site structure should be super tailored to start-ups, but the illustrations were our one way to insert some personality and uniqueness to the site.


SO, we completely switched gears on style and came up with this!



It's definitely the quirkiest illustration we have. The rest are the same style, just not quite so sea creature-y ;) But it's a good example of why we chose this style. It shows personality and is a fun way to describe the importance of strategy in design.


Then, moving down the page, this is how the rest of the illustrated icons turned out:


We're really happy with the result, but I think it's also fun to see how they evolved over time. Sometimes when I look at another designer's work, I default to thinking "they're so much better than me," "wow it's so easy for them," "it takes me so long to create good work, how are they doing so much?"


When in reality, I think most designers will tell you that their work is always changing and their first attempts rarely see the light of day. We don't always show the shitty first concept or open up about how long things take. So, in the spirit of showing the work in progress, here is the evolution of an illustration style over the past 3 weeks:



So how did we actually create the final style?


True Grit, baby! Once we decided we wanted to stick with black and white, we knew we wanted to use texture to create a unique style with some personality. We're super inspired by woodcut printing and the messy, chunky look it has. But we also wanted to add shading in some way without using greyscale. SO, we actually ended up combining a few different photoshop techniques & actions from various True Grit packs.


We used Distress Press to feather and distress the actual outline and then add some messy spots of texture with a few different brushes. Then, we used Beat Tones to apply different levels of shading to different parts of the icon.



It's been really fun sharing the process with you guys as we went through the site revamp! Don't forget to sign up to get our emails below if you want to keep up with more stuff like this.

DESIGNER RESOURCES

© 2018-2020 Golden Creative Works, LLC