Services

Branding Web Design Web Development

Background

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.

Research

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.

The logos of a few of Empower for Good’s industry competitors.

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.

Branding

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.

Knowing it was unlikely the client would be totally satisfied with the first designs I presented, I intentionally created two contrasting options, the feedback from which would help us narrow in on her preferences for the next round(s).

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.

The final logo design for Empower for Good. I matched the cap of the logomark with the terminal of the letter “e” to visually connect the mark and type.

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.

The brandscape for the final design. Creating a collage like this helps me understand how colors will work within the brand. To maintain the professional feel of the design, type would never appear in the supporting brand colors. The colors complement the simplicity of the brand but never overwhelm images or copy.
A pretty business card mockup to show the client how cool her new logo would look in application.

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.

Colorful handdrawn icons playfully arranged across the screen. Each icon represents a different part of EFG's model.
I created a custom stroke in Illustrator based on the design of the logomark. To give the icons more visual weight, I added a blob of color behind each, bringing in the brand colors to an otherwise monochromatic design.

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.

Using Figma’s pages feature, I was able to share checkpoints with the client without having to duplicate files to keep my newest progress private.

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.

A few of the options we explored for the homepage hero area.

Web Development

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.

One of the things on the site I’m most proud of is how sections fade in and out gradually on scroll. I decided to write the Javascript function myself rather than use a library, which was difficult but a lot of fun! The resulting effect is smooth and helps keep the most important information – what’s at the center of the screen – in focus by fading out what’s around it.

The fade effect I created to keep the viewer attentive to the content in the middle of the screen.

Takeaways

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!

The email I received after sharing the live website with the client the first time ?