Rebuilding for the Web
In a previous post, I talked about the elements that make a website successful or ineffective. As an example of an ineffective site, I used a local chiropractic clinic: Elite Performance and Rehabilitation. Here, I'd like to dig deeper into making this particular site more successful by starting from scratch. Note: This is for personal practice, not for professional purposes.
Sitemap
The basics of any website design are rooted in research and cataloging information. Make notes on why you need a website, who would be most likely to visit your site (and why), what you have to offer, and what makes you (or your company) stand out.
Once I collected the information I needed, I used this to form a generalized sitemap. I started simply with the basics of navigation: Home, Services, and Contact. Knowing the clinic had many options for treatments (Chiropractic, Physical Therapy, and Massage Therapy), I turned "Services" into "Treatments" and added to the Treatment Options. Their website provided a hefty amount of information on each treatment, so instead of combining them onto the treatments page, I added them individually on a drop-down menu for potential patients to scour through. Generalized treatment information and exam expectations were also provided superfluously so I kept a "Treatments" landing page for incoming guests.
Also under their "How We Help" page (now "Treatments"), they had a dropdown menu tab to "Learn More." I thought this tab would lead to more information on treatments, but instead led to blog posts on knee and back pain. I turned this "Learn More" tab into a "Common Concerns" tab with another dropdown option for "Knee Pain" and "Back Pain" but I am considering deleting these since they don't contribute unique information about the clinic.
The "How We Help" page contained repeated information from the "Home" page, such as "Our Approach" and "Conditions Treated". I moved these repetitive information pieces to "Treatments" and erased them from the homepage, with the exception of "Our Approach" which is actually highly informative and interactive so I thought it was important enough for both pages.
On their website, they provided a generalized landing page for "Doctors" which only contained the Doctor's names and their primary locations. This seemed unnecessary, so I combined each Doctor's profile into one "Doctors" page so visitors didn't need to click excessively to find each doctor.
Their Frequently Asked Questions page was already fairly interactive and well-organized so I won't be making any dramatic changes to the structure. However, there are some minor tweaks to be added, like external links that lead to "error 404" pages.
Their Contact page was distracting and dysfunctional, but the overall structure could be recycled. The interactive map was a good thought, but it doesn't function so I would like to make it truly interactive. They had a coding error for the "Contact Message" box which needs to be corrected.
Wireframes
The initial site design had good bones but minimal thought behind the layout and design. Many widgets and information paragraphs were repeated across the site. Here, I took the liberty to minimize repetitive pieces and created a more functional and intuitive layout.
Since the "Techniques" section under "Chiropractic Care" is rather long, I might consider adding it as a dropdown menu that would be linked under the "Chiropractic Care" page. I also minimized the information provided on each treatment page as they were excessively long.
Color Palette
On the more creative side, I based the design on the initial colors of their logo: blue and darker grey. I wanted a bright contrast, so I added the complementary color to the blue which turned out as this copper color. Then, I added a lighter grey, an off-white, and black for some variety. I did initially use a lighter blue as well but the color difference was largely unnoticeable on smaller features, so the idea was scrapped.
Mood Board
To create this mood board, I started with a "search by color" feature on the TinEye Labs Multicolr Search Lab. Since this program has an option to search for images by percentage of each color, I began the search with an equal percentage of each color to find some balance. Slowly, I increased the percentages of blue and darker grey to find images with a greater variety of images that prioritized those colors. After finding some satisfactory images, I searched for images that primarily used the copper color to emphasize my accent color.
I look forward to continuing with this little project, and I hope you'll keep tagging along!