Graduate Hotels

Design may be a creative field, but it also requires thorough planning and detailed organization, as demonstrated by the Graduate Hotels project. As soon as our designers received the work-in-progress design files, they knew any further updates would need to begin with a reorganization effort and a cleanup of the current design system.

Thus began a full audit of all design components —  buttons, page thumbnails, colors, and font application. Immediately, it became apparent that none of the components matched 1:1 — and consistency is critical for a site with this many pages and functionalities. Another design red flag was the fact that many of the components had been left out of the not-yet-development-ready pages. Once we made note of these website design (and development) hazards, our designers got to work updating components, taking both client feedback and website requirements into account, categorizing them based on functionality (things like navigation or custom subpage themes), and adding documentation notes on their use. What started as a less-than-ideal design situation turned into an organized, accessible system that is expertly reorganized for efficient development handoff and any future site needs.

Since we prefer efficient, functional design, we created an offer component that can be used globally across the website; the Graduate Hotels team can customize the hero banners on the homepage and respective property pages to feature brand-level or location-specific promotions. Clicking on a brand-level offer in the hero directs users to a landing page with more detailed information and a gridded list of all current offers. If users click “Book Now” from a location-specific offer page, relevant promo codes are automatically applied to their reservation.

Just like the design portion of the Graduate Hotels project, development required conducting a quality assurance audit right off the bat. After ingesting the designs, documentation, and code repositories — as well as onboarding to the new code base and additional connected services — we began looking for gaps. This also meant validating the progress of the previous agency and checking for any major errors or inconsistencies across the 34-page templates and 58 components.

As the initial QA wrapped, the next step was implementing the new code based on the designs and the sprint plan. On the front end, our engineers ensured seemingly small things — like correct colors, themes, background textures, and padding — were accounted for. On the backend, they worked on integrating external APIs, including a retargeting tool and an integration that imports all images and hotel room details. To maintain consistency within the hotel space and safeguard a smooth booking experience, we followed best practices and synced the website to a tailored-to-the-industry booking engine.

Once the development of the final page templates and components was finalized, our engineers began the next round of end-to-end QA, testing all 38 site flows to make sure the work was to design specs, integrations were firing correctly, and the components were working as expected.  As soon as we were given the green light, it was time to announce the arrival of the brand-new graduatehotels.com.