Systematic Design for Senior Living
CLIENT
Welltower
​
ROLE
UX/UI Lead
Component Library Librarian
BACKGROUND
The mission: create component-based senior living websites for Welltower, a large real estate corporation. There were stakeholder groups from the parent company, from each senior living sub-company (operator) within Welltower, and from the individual communities within the operator groups. As you can see, there were a lot of spoons in the pot!
When I joined the project, there were some key issues.
01
Too much complexity
The original designers had made beautiful designs but they were unique for all operators with little overlap. This made the designs especially difficult to translate into a component-based Content Management System (CMS) that could support multiple websites with the same components.
02
Implementation handed over to an overworked team
The designers had made templates to pass over to the content team for the most recent operator. The content team didn’t have the time or expertise to figure out what content should go where and how it should look, so they reused the same component over and over (whether it fit or not).
03
Lack of communication
There was no communication between the design team and the developer team so the end product did not match the spirit of the original designs, let alone the specific designs themselves.
On my first operator-site project with the team, I learned a lot.
I joined the project after initial designs had been sold to a new operator. Without an official component library in place, I pulled components from the previous sites built for the parent company. However, looking at what had previously been done and not fully grasping the problem domain, I thought there was a decent amount of flexibility in designs between operator sites (spoiler: there wasn't!). I insisted on changes and new components without realizing the overall effort they would take for the developer and content teams, and how they would fit into a component library for future sites. This created complications down the road when changes had to be made to the code-base to remove corporation-specific design elements.
Monarch Walkthrough
Successes from this first project​
-
The final site was aligned with the designs. I worked directly with the development team to create the components, conceding and limiting components where needed.
-
The clients were happy with the finished product because they had a say in final solutions. I met weekly with the operator stakeholder group to keep them updated on technical restraints and possibilities.
-
We were able to develop a shot list with the photographer, which gave us specific images for each component on the site.
-
I built out a new component library in Figma, introducing auto-layouts and components to the project.
-
I led the design and copy team in laying out each page using the new component library, including placement of images and content.
-
I developed and ran a design-team check of all pages as they were built out to ensure excellence before they were shipped.
Things got better from there.
A card build that includes multiple options for text treatments offers a lot of visual variation simply based on what is entered into the CMS.
Negotiating to balance efficiency and design variation
With a component library in place, I had a starting point from which to negotiate with the development team. They worked with me to simplify and streamline components in a way that would allow for efficiency on their end when restyling for new operators while still allowing enough variability for the sites to be distinguishable from one another. An example of this was limiting the variability of image card layouts in card sets while including options for titles, subtitles, overlines, paragraph text, and CTA buttons. When a new operator was onboarded, the typeface would update according to the CSS style guide and cards were able to be given differentiation based on which text fields were used by the CMS team. This meant that the developers could build it one time and then not touch the component again to change image dimensions or text sizes and behavior.
Finding places to increase design variation
This process took a lot of give-and-take and problem solving! However, it smoothed the road for onboarding new operators significantly. It also opened the door for me to make requests for additions to the library that would add significant value to all sites. One example of this was adding background color options for some of the components, which allowed for much more visual variation across the operators than had been previously seen.
Moving oversight earlier into the product launch process
I also worked with the project management team to bring design in earlier to test components as soon as they were built, even before they went into pages. This helped streamline the path to launch because the components were already approved!
This project made me a better designer and leader.
-
I learned to interface earlier and more often with the development team. For example, I’d laid out fonts & colors in a way that made sense to me, but didn’t work with the way the developers coded things. If I'd figured this out earlier in the process, it would have saved some headaches!
-
I learned to refine my instructions, check in, give feedback, and allow people to fix their own mistakes. This especially applies to working with more junior designers! I found myself getting frustrated when delegating a task and finding that it hadn't been completed correctly. Really, it was on me to make sure I was giving individual teammates what they needed. Some people can take a task and run with it, and some people need a check-in! And for that last part... it feels easier sometimes to just fix things yourself, but then nobody learns anything and mistakes will be repeated! I'm very much a DIY sort of person, so this was a great lesson for me.
Not to toot my own horn but... toot toot!
-
The project management and development teams reported that having me come in made a world of difference:
-
The websites looked much better and the clients were much happier!
-
Changes requested post-launch were based on changing requirements rather than messy design.
-
We launched subsequent projects without late night and weekend fixes.
-
