Jonathan Spivey Web Design

Harmony Counseling

Harmony Site

Introduction

Harmony Counseling and Center for Play Therapy Logo Image

This was a project to create a website for a local counseling and therapy group in New Braunfels, Texas, with an LLC. I worked with this client to give them exactly the website they wanted to represent their brand. The design of this site was meant to feel very fun and calming due to the nature of play therapy, so a lot of colors and pictures were incorporated.

Tools Used:

  • Figma
  • Bootstrap
  • Bluehost

Design & Prototyping

Figma was used as the main design and prototyping tool before moving into the development phase. Below is a gallery of pictures showing my designed pages for the UI of the site and an overview of the flow for the Figma Prototyping tool.

Image showing the prototyping flow on Figma
Figma Prototype Flow
  • Image of Homepage
  • Image of Our Counselors Page
  • Image of Resources Page
  • Image of Photo Library
  • Image of Appointment Page
  • Image of Contact Page

The button below can be used to access the protoyping in my figma page.

Note that while the links for scheduling originally worked in the high fidelity prototype given to the client these have been disabled for their security

Harmony Prototype

Development

All HTML pages were coded in VSCode using the Bootstrap framework. I’ve added this project to my git, and they can be viewed through the button below.

Some of the major components of the Bootstrap framework that were used in the development were:

  • Navbar
  • Modal
  • Buttons
  • Forms

One of the biggest challenges of this project was the photo library filled with resources that the client wanted added to the site. This was acheived through using the modal component to create a lightbox to allow the user to look at the pictures in full screen when something catches their eye and heavy reliance on Bootstrap’s grid to make sure all the pictures stayed grouped together.

Harmony Repository

Final Product

Originally, this was meant for two people under the same counseling business, but one has since broken off and will be making their own company. Therefore, changes were made to the site to streamline it for a single person and sharpen the grammar to clarify that there is one counselor.

This website is now live and accessible for the clients patients. Bluehost was used as the hosting platform for the site due to it’s ease of use. You can access the website with the button below

Future Considerations:
  • Addition of a filtering system for the Photo Library page
    • Currently it’s pretty cumbersome and I expect the client to add more photos as the site ages. This will help users to navigate the page and look only at the photos they want.
Harmony Site