Founded in 1969, Seattle Counseling Service is the oldest LGBTQ-focused community mental health agency in the world, providing high-quality, accessible, and culturally competent care to all. SCS came to Wildern with a great need for an inclusive brand and website redesign that accurately represented the quality of care they provide. In an incredibly collaborative effort, we built SCS a branded design system that is inclusive, vibrant, and easy to use – all with a tight budget and demanding deadlines.
Work done at Wildern Design + Interactive.
© Wildern Design + Interactive.
The portraits were shot in warm lighting, in front of floods of color — further reinforcing the brand through its vibrant color palette. The portraits feel everyday, realistic, and evoke a sense of ease and confidence. The images are suitable for all mediums, but were mostly shot with the intention of being used in the header sections and as testimonials for the website. The floods of color were easily manipulated to create large colored backgrounds for responsive needs and flexibility with large typographic headlines.
The SCS Brand
The Objektiv MK2 font family was carefully chosen for its highly legible and versatile qualities for both print and digital mediums. The typeface was designed with functionality and legibility in mind as the proportions of the characters have been ‘dictated by their harmony with one another’ — which we found to be a perfect fit for SCS. In order to set the client up for success and have the capability to move forward with usable brand elements, we provided typographical guidelines, which included a modular scale and rules around which weights to use.
Distilling the Research
SCS’s previous website was difficult to navigate, had issues with informational hierarchy, and information was given in long paragraph scroll format, creating cognitive overload on the user in an already fragile state. The navigation held too much information, with excessive sub-navigation items all holding information on separate pages. In order to stay on budget, I designed templated modules that could be reused — to create familiarity with browsing users as well as ensure the information is seen to those users only visiting a particular page.
The last page we designed and the most useful to our client was a versatile blog style page format to build out any additional pages. This blog page includes a twitter plugin for location-based events, a header format to highlight key information with an external button, bullet style, subtitle style, pull quote style, and an inline image. This gives the client the power and control needed to cut down on developmental costs and any future needs that may arise.
Development Style Guide
How do we create a simple interactive module that simultaneously makes the user feel heard and understood, without any communication with a real human? Clients are coming to SCS looking for support and acknowledgment. In order to present something personal and relatable, we start the section off with a question: “What is it that brought you here?” This is followed by a set of buckets you can interact with in a playful way, which opens up a panel in question and answer format.
The user is then directed to the getting started module (repeated on every page) where they can apply for services and find out most of the information needed – presented in a tab format. These elements all come together to create an inclusive and highly functional solution.
I am proud of this project and what our team accomplished in the timeline and budget. Seattle Counseling Service now has a brand they love and a site that is easy for them to expand on. Clients can easily find the information they need, apply, and quickly get the help they need — all with a delight user experience.