project

HUMAN-I-T

Client
HUMAN-I-T
Category
LOGO DESIGN, BRAND DESIGN, UX/UI DESIGN

The challenge

Human-I-T is a nonprofit that repurposes previously used tech and donates it to communities and individuals in need. They felt their brand and website wasn't representing the full spectrum of what they do, so they came to us to do a full refresh.

The goal

PROCESS –
PROCESS –
PROCESS –
PROCESS –

the CASE STUDY

Getting to the bottom of it

This client had a large group of stakeholders who each had slightly different ideas of what the most important way forward was for their brand. Our team conducted several rounds of stakeholder interviews, as well as deep dive brand exploration exercises with the core team to establish what it is their most central goals are with their brand. It was important to them to stand as advocates for how important the intersectional issues of e-waste and the digital divide are, but they also needed to present in an accessible, digestible way to each of their audience groups. The problem that their current brand and website had was that it felt outdated, messy and complicated, and it didn't allow visitors to: 1) Quickly understand who they are and what they do, 2) Efficiently find what they're specifically looking for on their site, which varied per audience group, and 3) Act. So we needed to start with brand language and overall look and feel and then feed that into a new website that addressed these main pitfalls.

The logo and brand design process

Once the brand language was at a place that our team and theirs felt reflected their goals, we started working on developing a visual identity to reflect HIT’s revised positioning. We began by discussing what values and characteristics were most important for the identity to represent—concluding that it should capture the community-centered spirit and intent of its founding principles, the positive intentions of clients they serve, the tangible impact of the services they offer, and the intersectionality of doing good business and doing good for the world. The logo, color palette, and design system we created embodies connection and energy while bridging humanity with technology, giving Human-I-T an immediate point of differentiation from competitors that only address one side of the equation. We created a brand guidelines that the internal team was able to use for future print and graphic materials, which created a consistent look and feel for each brand touchpoint in the coming months.

Designing a website for diverse audiences

The next challenge we faced was translating their brand to a website that would greet audiences of different walks of life where they were at, and guide them to the precise information that they needed. The audiences were diverse - there were those from communities in need hoping to acquire technology or tech skills, corporations and individuals looking to donate their technology, and potential funders hoping to donate money to the cause. We needed to create entry points for each of these audiences at the moment they land on the website and guide them to custom CTAs to encourage them to act.

Once we had established the best flow for each audience type, we integrated the newly established brand look and feel. It really elevated the new site and provided a fresh space that felt navigable and engaging for each audience type. We focused on imagery of their audiences and used as many human-centric images as possible to turn the attention from the tech to the sense of connection and community. And we created a custom icon set that felt modern and clean paired with slight animations and their new color scheme that really pops on the screen.

The PROCESS

Deciding on a logo direction involved a few rounds of different concepts that needed to bring together the tech aspect of the brand with the humanity aspect. The below concepts show how we evolved one direction which incorporated a geometric/hexagonal shape that the client liked into a pattern that we used in the following round.

That hexagonal pattern did end up being a pillar for the brand, but we needed the logo mark to complement the angles a little more, so we adjusted the mark accordingly. The final logo mark has a nice angular sturdiness to it that keeps the heart shape from feeling too "cute," and feels more like a tech company than previous iterations. The mark and the pattern contrast nicely with other clean rounded shapes that appear as frames throughout the brand. The balance of angular structure with round fluidity represent the brand's personality, mission, and vision very well.

The next step of the process was to develop a brand guidelines. The brand guidelines incorporated their newly established vision, mission, values, and brand personality as well as the brand visual elements that we were designing.

In preparation for the design of the website, we then created a style guide that took the visual elements and put them into the context of different ways that the website could represent the brand.

We went on to design the full website from rewriting the information architecture to user experience, and then designing wireframes and mockups. We worked with a development team to build their final site.

Since we launched their site, Human-I-T has continued to champion the branding that we established.

View the live site