When Empower for Good approached me about creating their brand and website, I was more than eager to help; for the previous couple months I had been spending a lot of time reading and learning about web development but had yet to find a real-world opportunity to put my skills to use. I learn best from hands-on application, so working with a client to design a brand from scratch and then design/develop a custom website was a really exciting opportunity.
The client and I started by doing an audit of the industry, uncovering what brands in the small business consultant space look and sound like.
We weren’t able to find many instances of inspiring design amongst competitors; this made me confident that we had a great opportunity to set EFG apart in the industry by focusing on thoughtful, intentional design through its visual brand and website.
We started by identifying six adjectives I would seek to communicate through the company’s logo: professional, approachable, experienced, trustworthy, knowledgeable, and optimistic.
The first direction focused on “professional, optimistic, and knowledgable.” The client liked the idea the mark communicated – navigating out of a complex problem – but felt that the logo overall was too corporate and masculine. The second direction emphasized “experienced, approachable, and trustworthy,” with the arrows and layout representing movement towards a better future. The client thought the visual impact of the logo wasn’t strong enough, but liked the softer color palette I chose.
My challenge for the second round was to take what the client felt had worked well – the knot/arrow concept from direction one and softer colors from direction two – and find a way to balance them together.
I was really excited to present the final design to the client. I felt like I had really nailed the balance of professional and approachable – the simplicity and fluidity of the mark matched well with the typeface’s soft serifs and large bowls. The client loved it so we started working on the web design.
While I finished up the logo design, I had the client start working on web copy and information architecture of the site. Designing with real content is always preferable – by the time I started creating the design, I already knew exactly what information needed to be communicated where, making the whole process much more streamlined.
I illustrated a set of abstract icons in the style of the logomark to be used to visually communicate the consultancy’s processes. These additional assets helped the brand shift from being just a logo and some fonts and colors to a more substantial identity with a unique character.
I used Figma to create the site mockups and share my progress with the client. As opposed to the more discrete presentation rounds we used during the branding phase, with Figma’s live-updating prototyping feature I was able to always keep the client up to date with changes to the design, helping us iterate quickly to a final design.
The biggest challenge we faced during the design process was creating a solution for the homepage hero section. The client was adamant about using a large photo with the company tagline overlaid on it, but because of the light weight of our display font we ran into legibility issues with most of the layouts we tried. To solve the problem, we had the photographer art direct the people in the photo to the right side, leaving plenty of room on the left for copy.
This was the first time I had ever coded a website from scratch – in the past I had used Squarespace and page builders in WordPress, but had never developed a site myself doing it the “right” way – so I was both excited and nervous to do it for the Empower for Good website.
For my development stack, I installed the Timber WordPress plugin so I could use the Twig templating engine for writing PHP. I used the Tachyons toolkit for writing functional css, which was really nice as a beginner to only have to work in one file and not worry so much about class naming or specificity.
I learned about how best to present branding work to a client and how important it is to be able to explain one’s thought process to stakeholders. I also got better at using Figma and thinking about component-based design systems. Most of all I gained real-world practice developing a website from scratch – experience that will make me a better designer, now that I have a clearer understanding of how a design comes to life in code.
By biggest takeaway from this project was that it reminded me how design can really make a big difference for small companies. I don’t often see the impact of the design work I do in my real job (our clients are large companies who I never directly interact with) so witnessing an organization succeed in part because of my contribution felt really great!