Close

Jump to:

Project overview
Arrow pointing to the right
Background
Arrow pointing to the right
Process
Arrow pointing to the right
Outcome
Arrow pointing to the right

Close

Seniorlink: Marketing Website Redesign & CMS Build

My roles

  • Project Lead
  • Product Design Sprint Facilitator
  • User Researcher
  • Visual Designer
  • UX Designer
  • Front-End Developer

Tech & approach

  • Product Design Sprint
  • Figma
  • Middleman Static Site Generator
  • Hubspot CMS
  • HubL (Hubspot templating language)
  • HTML
  • Sass/CSS
  • jQuery
  • Trello

Background

Seniorlink works with states to empower caregivers with resources, information, and social support as they care for their loved ones in-home. Seniorlink’s marketing team approached thoughtbot for a website redesign to better explain their value proposition to state agencies and service offerings to caregivers.

‍

Image of Seniorlink website before design engagement

‍

Process

Stakeholder Interviews

Duration: 3 days

My Roles

  • Write Interview Script
  • Co-facilitate Stakeholder Interviews
  • Prepare & Present Stakeholder Interview Findings

Phase Summary

Our team (two thoughtbot consultants, myself full-time and a colleague part-time) started this project by interviewing stakeholders on the Seniorlink senior management team. We sought to learn about the company, who the website was for, and the efficacy of the company’s current site.

We began to identify high-value personas the new site would need to address (caregivers, state agency officials, case managers). Senior management felt that none of these personas had been well-served by the current site and favored a complete redesign of the site. We compiled our takeaways into a deck, which we presented to the Seniorlink marketing team to kick off the Product Design Sprint.

Product Design Sprint

Duration: 1 week

My Roles

  • Product Design Sprint Facilitator
  • Lead Prototype Build

Phase Summary

As project lead, I planned and led a week-long Product Design Sprint with the Seniorlink marketing team. The Sprint involved three full days on-site with the Seniorlink marketing team, working through a series of progressive design exercises. These exercises helped our team identify opportunities and risks, and ultimately, they served to help us converge upon the design of a prototype to test with users. We opted to build a mobile view of the website, as most of Seniorlink’s traffic was mobile traffic. I lead the build of the prototype with my colleague using Figma.

‍

 Collage of images from each day of the Product Design Sprint

User Interviews

Duration: 1 week

My Roles

  • Co-facilitate Interviews
  • Prepare & Present User Interview Findings

Phase Summary

My colleague and I tested the prototype with numerous caregivers, case managers, and state officials the following week. We compiled our findings and presented them to the Seniorlink team. Together with the Seniorlink team, we utilized the results to refine our design and content strategy.

‍

View of Product Design Sprint pages from prototype

Visual Design Iteration

Duration: 2 weeks

My Roles

  • Co-collaborate on visual design exploration
  • Present design proposals and gather feedback

Phase Summary

The Seniorlink team wanted an entirely new visual design for the website, so my colleague and I proposed numerous visual design patterns, motifs, and illustration styles to the team, taking into consideration user interview feedback, stakeholder requests, and feedback from the marketing team about visual preferences and what had historically resonated with our target personas.
After a few rounds of design iteration, our teams decided on a direction. We were nearly ready to start implementing the design in code.

‍

Array of design options

Implementation Planning and Core Styles

Duration: 2 weeks

My Roles

  • Design audit
  • Visual design ownership
  • Coded implementation

Phase Summary

Before getting started with code, I conducted a design audit of the approved design and organized a basic design system for the project. I converted the styles into global variables or core design classes in Sass to keep our code lean and the design consistent.
The Hubspot CMS supports building modules, allowing the content manager to easily manipulate page layouts and update content, colors and images. My colleague and I elected to build out the structure of our modules using the Middleman static site generator so that we could use Sass to code the project, then easily compile our code to CSS for use inside Hubspot. Once inside Hubspot, we could use the HubL templating language to convert our static designs into reusable templated modules.

‍

Image showing how design elements were codified

Implementation into Hubspot CMS

Duration: 8 weeks

My Roles

  • Implementation
  • Ongoing project management

Phase Summary

I continued on the project as the sole consultant at this stage. I maintained close contact with the Seniorlink team throughout the project, ensuring core functionality was prioritized and demoing work as I made progress. As our engagement came to a close, I spent my days with the Seniorlink team to address any concerns with the site they had.

Outcome

The website launched in October 2019. After the launch, form submissions on the site (our core success metric) spiked. The Seniorlink team can also update and re-build pages using the modules our team built with ease, which has granted them autonomy and the ability to A/B test content and further refine their marketing strategy.

‍

Image of published website homepage

Check it out at Seniorlink.com!