Project Description
Northwest Biblical Counseling Center (NWBCC) is a Renton based Biblical counseling center that offers an intensive style to their sessions. Rather than the typical weekly therapy session, they offer 3-day and 5-day workshop style session where they are able to get to the root of challenges faster, and help their clients progress in the healing journey.
Upon noticing that their online presence did not represent the innovative work they are doing, I decided to rally a volunteer team around their cause. Many team meetups later, brainstorming sessions over coffee, and interviews with past and potential clients, we created an interactive prototype to show the NWBCC staff.
Currently, we are wrapping up the final design of the site and hope to launch soon!
The Team
Jessica Hardin - Project Lead & UX Designer
Maria L. - UX Designer & Front-End Developer
Adree S. - UX Researcher & Neuroscientist
Skills
Research and Analysis
Organizing Information
Wireframing
Prototyping and Testing
Visual and UI Design
Design for Development
Facilitating Client Meetings
Project Management
Tools
Invision
Miro
Photoshop
Keynote
Canva
Internet
WordPress
Loom
Understanding the Audience
After meeting with NWBCC staff, hearing about their previous clients, and researching how similar counseling centers in the Greater Seattle area are presenting themselves online, we dove into creating user personas to better understand the mindset of the people who will likely be visiting.
Personas
John Doe represents the typical individual who might seek counsel from NWBCC. Cameron and Corina Smith represent the typical married couple who might find NWBCC in their search to grow deeper, along with resolving a relational conflict.
Interviews
Early in the project, we wanted to learn more about the audience that NWBCC has been serving, and the type of people they want to be attracting. They got us in contact with 3-5 previous clients who were willing to have a conversation with us. We asked questions in regard to how they found NWBCC, if their experience matched what the online presence promised, and questions to help move the design direction forward.
During the interviews with past and potential clients, we conducted a CARD SORTING exercise with them - allowing them to put their step by step process in order with images. We also used our prototype of the new website to get feedback: CONCEPT TESTING CUSTOMER FEEDBACK. During the concept testing, we ask the questions listed below, and observed as they walked through scenarios for the CLICKSTREAM ANALYSIS.
Interview Questions:
- How did you first learn about NWBCC?
- Was it easy to find NWBCC? Why or why not?
- What did you find difficult about the NWBCC website?
- How did you pay for your services? What was the process like?
- Did you feel like the description of services matched your actual experience? Why or why not?
Clickstream Analysis Questions:
- Please imagine you’re at a point where you want Christian relationship counseling. How would you do this on Google (e.g. search platform)? (5 minutes)
- You’ve decided you want relationship counseling. You found NWBCC through Google but know nothing about it other than they are Christian and work with couples. How do you decide if it’s right for you? Do you feel like you have enough information to make a decision? (15 minutes)
- You’ve decided to schedule a consultation. How do you find the info you need? Do you know what you’ll be getting into during this consultation? How do you know what questions to bring up at the consultation? (5 minutes)
- You just had your first session. You would like the convenience of being able to pay online. What is this process like? Do you trust that this setup works? (5 minutes)
- You decide to go to NWBCC. But you don’t live in Kent. How do you work through the logistics of your trip? (5 minutes)
Client Journey Mapping
Understand the client is a vital part of the project; mapping the process from how they find NWBCC to the off-boarding of a intensive session is important to grasp how that process needs to be shown/communicated on the website. The site can also be used as resource that clients keeps coming back to during, and after, their sessions.
Previous Website Design & Competitive Analysis
We discovered the majority of people who used the previous website (1) knew about NWBCC through personal connection, or (2) knew what resources were already available on the website before going there. For a new user, the site was quite confusing. The majority of potential client interviews mentioned they had never been to the website.
We (the team) got curious about the "competitor" counseling centers' websites that have comparable services/resources available through their online presence. We discovered that, although NWBCC's website User Interface has not been updated since the early 1990's, the resources available on their site ranked it among the top in it's pool of competition. Another discovery that was unveiled is the intensive form of counseling is not available from any of their competitors, which is a service that allows them to stand out from the rest.
Site Mapping & Wireframing
Now that we knew our audience and client better, we began mapping out the flow of the website. The site map below has evolved as the User Interviews have taken place, but it illustrates where the brainstorming began. We used Miro to create a digital sticky-note layout. The Green notes are interaction within the main menu bar, the Blue notes are pages that offer information to the visitor, the Pink/Red notes are areas where the user can take action in reaching out to contact NWBCC, and the Purple notes are for mapping the footer menu. This is the original site map that our prototype is based off.
Our hand-sketch wireframes (thanks Chipotle for fueling these wireframes 🌮) are the first iteration of many in our Rapid Prototyping session. We created the basic flow structure for each of the pages.
Defining a Visual Identity
NWBCC had a logo already, but they didn't have a defined brand and visual style guide. In creating the User Interface, the visual design is an important element, so we put a brand board together to guide our decisions.
The inspiration images capture the overall feeling that we wanted to communicate through the website - hopeful, light, joyful, Biblical, focused, and diverse. These are feelings that are communicated through the staff at NWBCC, but did not transfer through into any of their online experience.
The brand colors have a fresh, Northwest, ambiance and the font selection brings in a playful, yet structured grounding. They pull in the fun, and healing, atmosphere that NWBCC wants to convey.
Designing the Site
To turn our wireframes into a prototype, we started by translating the sketches into Keynote. This gave us a hardlined document that we could redline and adjust as the user feedback was gathered and applied.
From these low-fidelity wireframes, we put together the high-fidelity interactive prototype (use the link below) with Invision.
The Result
The feedback on the interactive prototype allowed us to tangibly walk through the new "in-process" website with potential clients of NWBCC. We gained valuable input that influenced the final site design that is currently in process.
The revisions we decided to move forward with that are a continued iteration from the Interactive Prototype are:
- Top Menu - We discover that it would be most intuitive to shuffle the menu buttons into this order - Home / About / Our Approach (changed from Services) / Services (changed from Plan Your Visit) / Donate (changed from Get Involved) / Resources / Contact
- Our Approach & Services Pages - In our user interviews, we realized that these two pages did not have the kind of information people are actually looking, or expecting, when navigating to them. We removed the unnecessary information and added descriptions about each of the counseling intensive's step-by-step process, and are giving people the ability to qualify themselves for the type of sessions that are right for them. Then, when they call NWBCC to setup an appointment, they will be informed about what is offered and what service they are wanting to move forward with.
All in all, everyone found the new site much more intuitive and mentioned they would refer their friends to the site for information.
