Refining Brand Strategy through Visual Design, Content, and Review

Context for the Project

Green Drinks DC — an organization which hosts a monthly social series for environmentally-minded professionals, students, and enthusiasts in Washington, DC — requested that we evaluate their brand’s landing page and provide recommendations within four days’ time to improve its content, layout, and design.

Objectives of the Redesign

To kick off our project together, co-owner and community organizer, Spencer Schecht, briefed us on his aspirations for the brand’s growth and values for the coming year, noting specifically that…

As an organization, Green Drinks DC strives to set itself apart from the typical “means-to-an-end” style of networking and happy hours by branding their events as a series founded upon three core values:

  1. Community — In addition to being a social enterprise, Green Drinks encourages members to get to know one another on a personal level, aiming to build real connections in an increasingly digital era.
  2. Empowerment — Events are meant to bridge the gap between industry, technology, and policy — bringing members of varying backgrounds, perspectives, and skill sets together toward mutual growth.
  3. Fun —Shifting the focus of networking from professional to personal. Meeting members of the community, discovering with new friends, and sharing a drink shouldn’t be stressful or constrained to business.

And, perhaps most importantly, while the organization has historically hosted meetups and happy hours for their growing community, Green Drinks DC is planning to expand their offerings to include paid professional development workshops for their members this year.

Note: Greendrinksdc.org’s landing page (left), a head shot of co-owner Spencer Schecht (middle), and Green Drinks’ logo (right).

Content Outline

With an understanding of Green Drinks’ ethos, aspirations, and services in mind, I set about the task of defining features that would assist in achieving their business goals, which include (a) gathering email subscribers,
(b) furthering the credibility of their organization, and (c) expanding their event/workshop attendance.

In addition to these organizational goals, the opportunity to (d) engage, establish a rapport with their members, and display activity within the community seemed to be of equal importance in furthering Green Drinks’ presence. So, with these business and social goals in mind, I prioritized following content for inclusion on their landing page:

  1. CTA for email subscriptions (business goal: a)
  2. About Us and statement of values (business goal: b)
  3. CTA for events and workshops (business goal: c)
  4. Social media accounts and featured event photos (social goal: d)

Defining the Brand’s Ethos

Moving forward with an outline of content for the homepage and with few media materials provided from Green Drinks, my first steps were to chart the personality of their brand and gather images that spoke to these aspirations (seen below) — both of which would ultimately inform and inspire the landing page’s visual design and ethos.

In referencing notes from our kickoff meeting, I used the following terms to guide my search of unsplash.com to gather images for a mood board: social, enterprise, informal/casual, community, happy hour, fun/energetic, empower, and networking.

/ charting brand personality

Note: An assessment of Green Drinks’ brand personality — which aims to be informative, energetic, and open.

/ creating a mood board of images

Note: Selections from this project’s mood board, gathered on unsplash.com — channeling a casual, hip environment for networking.

Style Tile + Color Palette

Armed with a solid understanding of Green Drinks’ personality as a brand and a mood board of images to inspire their landing page’s design, I began to explore colors (focusing on a bright, monochromatic palette of green) and select suitable typeface from Google Fonts (seen below), including Roboto for headings and Open Sans for the remainder of the site’s body .

Note: Exploring Google Fonts in search of complementary typeface, particularly Roboto and Open Sans.

After having selected a working color palette and typeface — which portrayed Green Drinks’ desired feeling/environment Green Drinks for the site — I then pulled each of these elements into a comprehensive style tile (seen below) for reference during ideation and design.

Note: Pulling elements from the mood board, font selections, color palette, and existing brand materials into a style tile for reference during layout.

Initial Ideation

Informed by the creation of a style tile and an understanding of Green Drinks’ brand, I began exploring layouts to convey different ideas: (1) a lighter design, highlighting the communal aspects of their networking events; (2) another focusing on the fun, personal energy Green Drinks hopes to foster in their community; and (3) one featuring their events beside a vertical navigation bar.

Note: The first option focusing on a bright, communal layout (left), and a second focusing on the fun, personal energy of Green Drinks’ events (right).
Note: The third events-focused layout, which ultimately informed the remainder of Green Drinks’ homepage.

Building Out the Site’s First Draft

Given that there were so few content types needed to represent Green Drinks’ offerings, I opted for a persistent navigation bar to assist in users’ wayfinding and limited its links to those pages most relevant to Green Drinks’ business goals (e.g., events and social media).

And, with little visual and textual content provided by Green Drinks DC for the site, each section’s content (as noted in the outline) needed to be drafted and/or gathered during development — including imagery from unsplash.com and iconography from flaticon.com.

/ (re)selecting colors

Moreover, in applying my color palette across an entire webpage, I quickly discovered that my calls to action (CTAs) weren’t contrasting well enough — as a result of selecting a monochromatic palette — and several elements needed to be adjusted (seen below):

  1. A third color needed to be chosen and used to feature CTAs (orange);
  2. My greens weren’t matched in their hue, which made the design feel unbalanced; and
  3. A neutral color (grey) was necessary for shadows and third-level headings.
Note: My initial color palette (left) and revised/final palette (right).

/ organizing content

From that point, I developed content for the site in accordance with their initially identified business goals, which are addressed in the following six sections:

  1. Landing Page — featuring Green Drinks DC’s next event with an associated image, description, and time/date/location;
  2. About Us — describing the organization’s goals, community, and vision for the future;
  3. Our Values — presenting the guiding principles of their community and expectations/ethos for participation;
  4. What We Do — a description of the services Green Drinks DC offers for its community members;
  5. Join Our Community — prompting users to subscribe to Green Drinks’ newsletter to receive additional information each week; and
  6. Connect with #greendrinksdc— providing a feed of their Instagram feed and #hashtag.

Receiving and Committing Feedback

Upon sharing my design for peer review, the following revisions were suggested and implemented (comparing the left-hand first draft left to the right-hand final)…

1. Context for Green Drinks DC’s as an organization had been missing and added to the uppermost margin of the page.

2. The navigation bar’s orange highlight was considered “muddy,” so it was adjusted to green.

3. Viewers wished they could see more of the image, especially the audience, so I removed the event description and shifted the event’s information into a horizontal layout.

4. The “Register Here” button and arrows were adjusted along with the horizontal layout above to position the CTA closer to users’ view as well as clarify that the image/event could be changed by labeling Prev/Next.

Note: Section one side-by-side comparison.

5. The “About Us” section was too laden with text and considered to be a cognitive burden/hindrance for users — which led me to incorporate a high-level, stylized quote that describes Green Drinks’ mission.

6. Images with a drop shadow were believed to be inconsistent with the simplicity of my design (and were removed).

Note: Section two side-by-side comparison

7. “Our Values” wasn’t thought to be broad or descriptive of the section’s content (and was therefore updated to “Creating Connections.”

8. The third-level headings within each card were considered too bold and competing with the second-level headings above (e.g., Community, Fun, and Empowerment) for prominence on the page, so their weight was reduced from semi-bold to light.

Note: Section three side-by-side comparison

9. A simple fix: adjusting the heading’s design to be consistent with the remainder of the page — meaning that the green line shouldn’t extend beyond the words.

10. Again, with a large amount of text on-screen, I’ve opted to stylize several key phrases within each paragraph — which would also double as clickable links to Green Drinks’ Events page (in addition to the CTA beneath the photos).

Note: Section four side-by-side comparison

11. Addressing a few spelling/grammatical errors in the design.

12. Making the reference of the “Step 1, 2, Profit” meme more clear.

13. Slightly adjusting the margin of the text within each form field for the email subscription’s prompt.

Note: Section five side-by-side comparison

Conclusion

Taken as a whole, the site’s design has come a long way from its initial state —building upon a framework of brand understanding and informed design decisions toward the creation of a user flow that both directs Green Drinks DC’s members toward their offerings and communicates their values of community and fun.

And coming to understand Green Drinks’ aspirations as well as leverage those to strategically develop a content outline, brand personality, mood board, color palette, and style tile led to a clean, clear design that feels more cohesive than might otherwise have been possible.

/ recommendations

Moving forward, I would suggest that — regardless of whether Green Drinks DC decides to move forward with this specific design — they make note of the features of the design that resonate with and successfully communicate their brand, namely:

  1. Vivid, compelling imagery that expresses Green Drinks’ desire to build a community above and beyond happy hours and professional networking.
  2. Iconography to insert a bit of whimsy to their site and brand personality.
  3. Clear calls to action (e.g., event registration and email subscription) that readily present themselves to users and are featured in an eye-catching way.
  4. Use of color (and consistency) to not only create and reinforce Green Drinks’ brand, but also establish credibility and an aura of professionalism within their site and digital presence. (This applies to their social media platforms as well!)
  5. Reduce the number of navigational items from 7 to (at most) 4 or 5, given how little content exists on their current site— and remove drop-down, menu items from their navigation. (“Less is more.”)
  6. Prominently feature links to Green Drinks DC’s social media accounts. (This is a socially driven service and platform, so members should be able to interact with the organization as well as find the remainder of their community).
  7. Generate and organize content into a compelling narrative, providing users with the content necessary to understand who they are, why they ought to trust Green Drinks, and most importantly — why they ought to spend their time at these events!
Note: Final design and rebranding of Green Drinks DC.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store