Case Study

OhioGuidestone website

Devoted to helping those in need by providing services to meet the challenges of the day

As Ohio’s leader in community behavioral health care, OhioGuidestone focuses on the needs of the whole person, empowering them to take steps towards a healthier future and navigate the most difficult times of their lives. We were tasked with defining an overall strategy to elevate the perception and awareness of the organization and the breadth of services they offer and better reach the clients they serve, while completely redesigning and rebuilding their website with future growth of services in mind.

Project won Gold and Top Tactic awards at the 2023 PRSA Cleveland Rocks Awards.

Company

OhioGuidestone * Berea, OH

My Role

Design Strategy & UX Lead * Stakeholder Workshops * Discovery Research & Analysis * Information Architecture * Concept Ideation * Wireframing * Mood Boards * Creative Direction * Visual & Interaction Design

Tools

Microsoft Teams * Microsoft Powerpoint * Octopus.do * Adobe InDesign * Adobe Photoshop * Sketch * Trello

OhioGuidestone website case study overview image

Project Goals

  • Create a visual representation of our new brand platform, “Where new paths begin”  to help get those in need started on their journey – the beginning of their path  – with OhioGuidestone so that when they leave our website, they already feel a connection and a commitment to their relationship with us
  • Increase awareness of services offered, where in the state those services can be accessed in person and availability of telehealth services
  • Clearly direct clients to relevant services by category and by region
  • Create a clean, modern & uplifting website that draws attention to our statewide geographic footprint, broad range of available services and the difference we make in local communities
  • Provide a productive recruiting tool for hiring qualified therapists
  • Attract millennial donors whose awareness of OhioGuidestone in the state was low

Subject matter expert discovery workshops

We started off by conducting workshops with project stakeholders and subject matter experts to gain an understanding of their clients needs and perceptions. We unfortunately did not have access to speak to actual clients but took what we learned in discovery and created some guiding principles around different topics to create alignment amongst the stakeholders and build empathy for their clients.

OhioGuidestone website mental health discovery workshop takeaways
OhioGuidestone website Workforce discovery workshop takeaways
OhioGuidestone website Institute discovery workshop takeaways
OhioGuidestone website Employment discovery workshop takeaways
OhioGuidestone website Philanthropy discovery workshop takeaways
OhioGuidestone website Additional Insights discovery workshop takeaways

Audience personas

We then distilled all our findings and notes into clearly defined primary and secondary audiences with overlapping traits between the two. Mothers with difficult life circumstances were our primary client audience, while fathers were a closely related secondary target. We created personas for each of the 3 main target groups highlighting each group’s life circumstances, relevant personal background, motivations and content considerations to address them.

  1. Clients – (Mothers) with challenging life circumstances that need help to overcome them
  2. Recent college graduates looking to land their first professional job and gain on-the-job training
  3. Milennial donors who want to align themselves with an organization that is an agent for change
OhioGuidestone website audience persona sets overview
OhioGuidestone website Client - Mother audience persona
OhioGuidestone website Recent College Graduate audience persona
OhioGuidestone website Millennial Donor audience persona

User journeys

Our research findings were synthesized into the following journey maps for each persona and socialized to the teams and stakeholders. The information we gathered informed and defined both the architecture of the site and the content we created. I facilitated design workshops with our client advocates and stakeholders to define what information each separate audience would need in order to move from awareness, to comparison, through committing to take action and continuing services.

OhioGuidestone website Client - Mother User Journey
OhioGuidestone website Recent College Graduate User Journey
OhioGuidestone website Millennial Donor User Journey

Information architecture / sitemap

The overall architecture of the site changed several times throughout our early stages as we iterated with the project stakeholders on categorization of services, the connections between services and locations and ensuring a seamless donation experience. Special attention was paid to cross-selling of services that may have less awareness and calls-to-action that reinforce the “starting your journey” or “getting on the right path” concept.

Before
OhioGuidestone website sitemap (before)
Right arrow
After
OhioGuidestone website sitemap (after)

Experience wireframes

All of our research and discovery work was then crystallized into a visual blueprint in the form of detailed wireframes that were socialized with our project stakeholders to ensure we were accounting for all the business requirements and functional elements. I also facilitated technical workshops with our development team to ensure that we could actually build the functional and interactive components (including an interactive map feature) within our budget and timeline.

OhioGuidestone website Home and Services wireframes
OhioGuidestone website Locations wireframes
OhioGuidestone website Giving Opportunities, Employment and navigation menus wireframes

Mood boards

We then created mood boards illustrating the proposed color palette and hierarchy, typography and imagery styles for the approval of the project stakeholders to set the tone of voice and establish a general visual style and what to expect for the new website’s visual / UI design. We recommended a casual, handwritten font to lend a personal, friendly touch to testimonials from clients they had helped. We presented imagery samples that depicted real people in real life situations while establishing a healing, optimistic and trusted identity. Two different concepts were presented to the client and they liked them both so we decided to merge the best elements of both together in the design phase.

OhioGuidestone website color palette mood board
OhioGuidestone website typography mood board
OhioGuidestone website imagery style mood board
OhioGuidestone website mood board concept A
OhioGuidestone website mood board concept B

Website

The finished visual design combined and expanded upon elements of both moodboard concepts while putting the color palette and font choices to full use. Button styles animate from left to right to reinforce the “starting your journey” concept. Multi-level menus are presented in an attractive, easy-to-use way regardless of device. A simple and clean visual design helped this site win Gold and Top Tactic awards at the 2023 PRSA Cleveland Rocks Awards.

OhioGuidestone website design mockups home page desktop and mobile
OhioGuidestone website design mockups Services pages
OhioGuidestone website design mockups Locations pages
OhioGuidestone website design mockups Employment and Giving Opportunities pages
OhioGuidestone website design mockups desktop menus