Bellhops Marketing Site

The goals for this site redesign was three-fold:

1. Give the marketing team control of the content so that engineering bandwidth wasn’t spent on updating headers, copy, adding banners, etc. later down the line. The product team decided to use graphCMS, a headless content management system, to achieve that goal.

2. Maintain SEO value with new launch, meaning “mover” keywords on pages like our market landing pages had to stay the same, along with header content and links. That way we could still appease the Google ranking gods.

3. Update site UI with new design system so that it was consistent with the redesigned booking flow, new customer dashboard, and email flow. All items were launching in 2 months, so I worked alongside one PM and one engineer.

I started by drawing out each and every single div on our current site, getbellhops.com, to generally figure out how many templates in a headless CMS we might need for MVP.

We simplified content into 9 different sections (“div”) types.

1. A data capture (email capture, lead gen) section

2. An item gallery section with maximum of 4 “cards” per line with 3 variations: with a border, as a link, or as a collapsible component.

3. A city list section—> for SEO.

4. A 50/50 component composed of text on one side with CTAs and an image bucket on the other side— variable by image-left or image-right. The image bucket was built flexibly to hold a video, gif, or lottie animation.

5. A quote component to feature customer quotes as well as larger headlines.

6. An all-text section to bring in all the content from our city guides as well as our terms of service and privacy policy pages. This was built with markup so that pictures could be added.

7. Full photo section: This was meant to break up longer sections of text on a page as well as call out particular CTAs.

8. Accordion section: Built for FAQs, composed of a title, a subtitle, and an icon-container.

9. A press bar: Built with four images, could also be used as links.

Next, we met with each and every team from Recruitment to Customer Care to determine their needs for the site redesign. With that feedback, we added additional pages to our sitemap like a partnerships page, a B2B relationships page, and a revised FAQ and contact page.

I tree tested to make sure the revised sitemap made sense for users. It worked a lot like card sorting, and I used optimal workshop to perform that test. Super easy to set up.

We worked within the constraints of the 9 templates to design full pages in high-fidelity using our design system, which we presented back to each team to close the feedback loop. For example, to our people and places team, we presented the careers page. It’s a true content-driven approach to a marketing site rather than design driven.

Then the pure joy of actually building these templates into the graphCMS platform began, where we ran into some issues.

Although similar to building out components, learning how to build content models meant a bit of a learning curve. Here are my key takeaways:

• Ensure flexibility. The item gallery component was built to accommodate properties for cards– borders, shadows, and animations in addition to properties for color, text size, and alignment. It was also built to include content variables– button links, hyperlinks, and html links as well. This gave the marketing team and the design team more flexibility in the long run.

• QA during the build. With such a short timeline and no official QA team, we knew we didn’t have a ton of time to QA after it was built. It worked for our team to do daily over-the-shoulder desk checks. It was an easy way to pressure test for responsive breaks and figure out how to build guardrails for icon sizes and image sizes.

See the work here.