Dr. Peter Dobias
For more than 30 years, Dr. Peter Dobias has developed a unique healing regimen that combines western philosophies with natural veterinary practices. The results are a natural healing solution for dogs. Since Dobias is an active advocate on his practices, the team reached out to me aiming for some fresh perspective on their homepage and blog template. They were wanting to revisit layouts, refresh some of the branding and modernize both the look and flow of the website. The results were a fresh new look and feel with a design system to adhere to moving forward.
Homepage
The problem:
Upon entering the project, it was clear some standardization and a new page hierarchy were in order. I noticed a lot of over-design, making it difficult for the user to tell what’s important. Reducing the button styles, cleaning up fonts and standardizing UI functionality were all part of the new design system I’d introduced.
The solution:
In an instance like this, I begin from scratch. I literally start from a clean wireframe and keep moving up in fidelity until I have a complete homepage showcasing a new design with a clear vision of how a design library should look. Starting with a clear, concise navigation and subtle design cues leading the user down the page, the homepage breathes white space, clear distinction between sections and enhanced readability. Textures were introduced to give it more of a natural/holistic feel and the use of bold colors and typography help sections come to life on the page. Since the Blog is such a large section of the site, I made sure the homepage had plenty of real estate on the homepage dedicated to the content.
Original Designs
Be sure to view the full-size versions of the original homepage and blog.
Blog
The blog page wasn’t too different from the homepage in terms of what it needed to be sound. I brought in a strong feature for the hero area and added standard blog functionality such as search, filters and the ability to sort. We found creating cards and displaying them masonry style worked best. In this form, it makes it easy to recognize featured products or campaigns by giving them a background color.
Mobile
Mobile screens are shown for each of the two pages designed.