Wildern’s challenge was to create a system that expressed qualities of two visually dissimilar worlds: the clinical and trustworthy feel of a medical service and the vibrant, inclusive LGBTQ community. We wanted to build SCS a powerful tool that could extend beyond our agency that is usable and accessible to the SCS staff as the needs and demands of their services change. We were entrusted to craft a digital brand that needed to accurately represent the LGBTQ community visually and be approachable, confident, and inclusive in its usability.

We pitched the idea the client to do a collaborative photoshoot with Elizabeth Rudge in order to create powerful and authentic modern family portraits to both truly represent the community Seattle Counseling Service serves as well as a means to reach out and create an emotional connection with new and returning clients.

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.

A key element of the SCS brand is the modern-day (mostly digital) rainbow color palette we developed. Scattered throughout the site, the color palette elevates the photography and the content to delight the user. As color tends to take center stage in a brand, we had to be mindful of a color palette that not only felt inclusive but one that was functional and usable — a tool to guide the user.

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.

In order to effectively design a website that served SCS’s diverse clientele, our team put together persona and site audit workshops. My job was to use the persona and audit research, distill the information, and move into creating a sitemap that solved the client’s needs. We found that most users coming to SCS have a specific service they are looking for, are less often coming to them with an emergency need, have minimal therapy background, and are looking to see if Seattle Counseling Service is the right for them.

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.

Through the use of a two-column layout, reusable modules, and a typographic modular scale we were able to design a highly functional and easy to build 6-page website.

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.

In order to streamline our development process, I created a style guide and design guide for our development team. This made our process more efficient and reduced the amount of back and forth with questions like: what is your grid? how does this scale? what happens with error states? how does this work? This process encouraged consistency with our vision and allowed the development team to focus on building the most efficient custom site.

The modules showcased in the clip above are the two elements I am most proud of. In my initial research, I discovered important information was getting lost in the large quantity and long format it was presented in. The application process was dated and information on how to get going was confusing and compartmentalized in unnecessary ways.

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.

In reflection, if the budget had allowed it as well as the timeline, the megamenu we designed would have been a nice feature to add to the navigation. Megamenus are an expected feature on a site with lots of information, particularly in the nonprofit and medical fields. This two-dimensional dropdown menu offers a brief summary of the page with quick links and access to get the user to what they’re looking for quickly.

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.