Website Re-design and Development
Cedarwoods Canine School is a top dog obedience school in the Pacific Northwest (PNW). Local to Bellingham, WA, they are active in the community and have made an exceptional name for themselves, largely by word of mouth. Upon initial inspection of their website, there was a low level of accessibility and usability. The site as a whole was outdated and the business owner was paying more than necessary for their digital services.
Goal
In an effort to bring the site up to the standards of excellence the rest of the business was attuned to, I designed and developed a new website under the same domain to better connect with clients, increase sale conversions, create a more accessible and usable presence online, and lower business costs.
Approach
Beginning with a complete UX audit of the site, I was able to identify notable pain points as well as assess where monthly costs could be cut in regard to software integrations, web hosting, and other services. Following the discovery audit and cost analysis, I created a journey map and multiple flow charts to rebuild the information architecture (IA). Using card sorting, a new navigational structure was identified. Low-fidelity mocks were created using the new navigation and IA, which were then tested as a paper prototype. The results of these usability tests led to a higher fidelity prototype, that underwent another round of usability testing. The site was then developed according to the designs and research feedback. This particular case study is about the redesign of the site, the software integrations, and the ROI of this project for Cedarwoods Canine School.
Results
The entire site was redesigned. The usability and accessibility were improved. The site was integrated with multiple software that aids in daily business functions including forms, enrollments, and online and in-store sales.
A Case Study on a Usability Re-Design
Original Navigation
The first notable problem with the site was the navigation. Multiple items had little or duplicate information. According to preliminary research, users were having a hard time understanding where to find the information for the classes they were looking to attend. Additionally, the store was under a completely different domain that did not link back to the original site making any sort of cohesive navigation across the site difficult. For the card sorting, I initially wrote specific terms and short excerpts of information on cards and gave them to users to sort through. Once the card sorting was complete, users labeled the categories. The general consensus became the new navigation and page items were categorized with the results of the card-sorting study. The navigation was simplified to include “Home”, “Services”, “About Us”, and “Store”. All of the categories that existed within the original navigation were accounted for in these 4 categories. Additionally, per the owner’s request, we created a password-protected page for current students to access documents and videos that work in tandem with training courses. User flows were mapped for all of the information.
Proposed User Flow
Usability Testing
The proposed flow with the new navigation items was mocked up in a low-fidelity state and tested with 8 users. The usability testing yielded positive results and the improved usability led me to design higher fidelity mocks that were again tested with users.
Proposed Lo-Fi Mocks
Proposed Mid-Fi Mocks
Usability Results
The second round of usability testing, which specifically focused on the find-ability of information and the ease of performing primary tasks including enrolling for a class or purchasing equipment produced favorable results. Some changes were made to the content to follow more plain language and remove technical jargon making the UI simpler for the user.
Development and Software Integration
After building the design assets in Adobe XD, and factoring all the results from the previous research, the mocks were developed using WordPress.org. This interface was picked for its flexibility and so that once the design was completed it would be easy to maintain for the business owner. The development included changing the domain registration and the web hosting. Additionally, all the software was integrated including a new form builder, Woo Commerce, Square, an emailer, and scheduling software.
Conclusion
Overall, the site has seen improved accessibility with a focus on colors, DOM semantics, and other screen reader considerations. The usability had an overwhelmingly positive response from many clients of the business. The fees that the business owner was paying annually for hosting and other software services were reduced by just over 50%. Lastly, I trained the business owner on how to use the interface, its integrations, and how to access all documentation for the business’s online longevity.
Final Site Design
Design Links
Site Assets
