Project:

Website Design and Development

scroll icon
McKibbon Hospitality gated login on desktop

A home for a hospitality company

McKibbon Hospitality is an award-winning leader in hotel management, hotel development and hotel renovation. They provide a home away from home to families and business travellers, and create memorable moments for the lives they touch along the way. Data Driven Design is honored to have taken over the design and development of the intranet that keeps their large team connected across locations.

Technology:

HTML/SCSS/JS

Adobe XD

Adobe Illustrator

Craft 2

Craft 3

Google Analytics

Roles:

Website Design

Frontend Development

Backend Development

Project Management

DevOps

Hosting

On-going Maintenance

Monthly Reporting

It was the beginning of a beautiful friendship...

McKibbon had a great relationship with an awesome local design company who had helped steer design and development through several successful phases of deliverables. But when their go-to web developer was unable to continue development, Bridge + Bloom sought to hand off their baby to a partner that would ensure McKibbon's staff could have a team of developers and designers they could call on for on-going tasks and to help clear up a backlog of items that needed to be added to the site. That's where DDD came in.

McKibbon Home - Bridge and Bloom Handoff Image

First impressions

The first round of work we completed allowed us to develop and fix a slew of features for McKibbon. Among them was server maintenance and security items, updates to every section of the layout of their internal dashboard, creating auto-archiving systems for extra content, and repairing some defects that had cropped up along the way during previous phases of development.

The DDD development team also spent significant time working on the hotel directory, where we ensured better efficiency when filtering the list of hotels, and also removed some unneeded items. On individual hotel listing pages within this directory, we also accomplished a fair bit of work, adding additional fields for content entry, creating a more flexible system for inputting the list of hotel contacts, and creating custom print styles to clean up the document that is generated. McKibbon informed that team members need to easily print the individual hotel information, so we added a prominent button to make it quick and easy.

McKibbon Hospitality - tablet hotel directory and details pages

Quality Assurance

One of the issues the McKibbon team brought up during our initial onboarding was that the site had not been well suited to the browsers that were used within the organization. McKibbon still had staff that used IE on older devices, and the website sometimes didn't display correctly for those users.

Although scouring the entire website to find all of these problems was not immediately actionable in the first set of work, we made sure to check the areas of the site that we were already touching and resolve any layout issues we found. Data Driven Design's team tested all sections on common and desired browsers (IE, Edge, Chrome, Safari) at all three of the existing breakpoints on the site (<768px, 768-1199px and 1200px) and across common devices (iPad, iPhone and Android) before delivering to McKibbon for review. As we continue development for McKibbon, we expect that we'll be able to address these all in time.

McKibbon Hospitality responsive design breakpoints - mobile, tablet, laptop and desktop

A New Year with New Goals

McKibbon Home - 2020 Goals Image

In the time we have spent supporting McKibbon their communications team has generated a lot of ideas about how the website could be improved and provide more value to their employees. With a new fiscal year on the horizon, McKibbon Home's team reached out to Data Driven Design to discuss a number of updates and additions during Q4 and into the new year. We reviewed and readied several of these projects for work.

Creating a multi-format blog

In the fall, McKibbon's team reached out to see if we could help with the creation of a "newsletter" section on the site. They were planning to begin sending out a monthly newsletter to all staff and wanted to be able to have a record of all of them for their users, who might want to reference them after deleting the e-mail in their inbox. They also needed a place to post additional information and notices, and wanted these two groups to be housed together.

We designed and built a system that allows users to create different types of posts and displays them in the same section of the site. This was a somewhat unusual application, as most often, collections of content follow very similar formats. While the newsletter could be very long, with many sections, topics and links, the regular post had a very simple format. The merging of the two separate content streams - while being able to filter by post type and tags - provided an opportunity for the Data Driven Design team to create a unique implementation.

Craft upgrades

Following the completion of the new Newsletter and Blog section, we performed an upgrade from Craft 2 to Craft 3. When we originally began our work with McKibbon, we discussed the need to upgrade due to the announced end of life for the version they were using. Pixel & Tonic, the creator of Craft CMS, had announced that Craft 2 bug fixes were only going to be supported until the end of January 2020. They would no longer be addressing any issues after that date. In addition, system security fixes would only be supported through January 31, 2021. Before making some significant additions to the site, we suggested tackling this housekeeping item first.

Web Design and Development - Craft CMS content management

McKibbon's website is sprawling - with nearly 1000 entries - and the upgrade would be much more complicated if their team needed to continue content entry while those upgrades were taking place. To make the process easier, Data Driven Design committed to doing the upgrades over a weekend during the holidays - a time many companies find that their employees are spending time with their families. With McKibbon headquartered in the eastern U.S. and our team on the west coast, this meant we could jump into this work on Friday afternoon.

The development team first upgraded the system, then updated all plug-ins that had been installed. After we verified these items had been successfully completed, we began updating the logic across all page templates, ensuring that each page could render as we went. Due to the changes between systems, nearly all pages had been broken. We deployed the changes over the weekend and when McKibbon's team went in on Monday morning, the system was up for their use.

Graphic design gallery

The next addition we made to McKibbon's website was an internal asset gallery. Since McKibbon manages many locations, they have a team of designers that creates graphics for events and promotions. Although they had an existing form on the website to manage the requests themselves, they wanted to be able to add the completed work to the website and tag it so that users could reference a particular item if they wanted something similar in design.

McKibbon Asset Gallery Prototype

Taking their initial ideas, we worked through several design revisions and arrived at a paginated asset gallery that could be searched and sorted. The final design kept the form fields simple and made it so McKibbon's employees could easily find inspiration for their graphic design requests. In addition to the gallery page, we made individual pages. Each of these individual pages showed the asset and its associated tags, linked directly to the request form and had a quick-copy link they could reference in their request.

McKibbon Asset Gallery/Graphic Studio Prototype bt Data Driven Design

Monthly Wesite Usage Reporting

We create and send monthly reports so McKibbon can use data to make more informed decisions about their website.

Everybody wants to build

Most people think that maintenance isn't fun, but we love to build long-term relationships with our clients, getting to know their business problems and helping to implement useful solutions to get them what they need when they need it. We're committed to developing quality code, testing it across devices, and figuring out ways to make their systems and processes better.

In addition to creating long-term partnerships, having a maintenance mindset allows for continual development and updating, which ensures a website can evolve over time to meet an organization's needs. We're excited to continue to improve and adapt McKibbon's website in the months and years ahead.

McKibbon Home Logo
Need a dedicated partner?
Let's talk