JLLT.com

JLLT.com is the marketing website of JLL Technologies. When JLL launched its new brand, the site still carried teal from the old one, used red and black for both primary actions and key data points, repeated one vertical rhythm of background, layout, and type, sent most actions to a single "Speak to an Expert" form, and used images chosen separately by each business. The redesign had to work inside the existing WordPress content management system and Bootstrap framework.

Decisions

Modernize inside the constraints. I kept the redesign within WordPress and Bootstrap, prioritized securing enough development time, kept the interim user experience intact, and took an extra step to modernize the site with future needs in mind.

Typography first. I measured the current type spec against an ideal rhythm and contrast to find its irregularities. Changing the typeface alone moved the brand forward a long way, and the rest of the look and feel followed the new brand language: brighter photography, more typographic space, more content contrast, and a carefully managed accent color.

Content hierarchy into modular components. Deciding what the site says came first, worked out with PMs and UX writers, while I focused on amplifying the content highlights and visualizing the ideas. Each cluster of content became a module, stacked vertically in one-, two-, and three-column layouts with module heights set as pauses in the reading. I treated each module as an organism component in atomic design terms, which mapped to layout components for the PHP developers, so every page is composed from stacked modules that are easy to design and to develop.

Breakpoints from real screens. I defined breakpoints with developers from analytics on the screen resolutions visitors actually use, then specified how each component adapts at each one, so the mobile view keeps full content parity.

Outcome

Launched the redesigned JLLT.com in Q1 2022 as Design Lead, owning both the design and the implementation of the design system and brand updates. Pages are built from preset modular components, meet global accessibility compliance in design and code, and work in light, dark, and mixed modes. Quick internal design approval gave the team extra development time for a high-quality result.

Screens

The audit of the previous site, the typography spec, the content hierarchy and layout composition studies, pages assembled from different modules, a webinar form before and after, the current and new layouts at each breakpoint, and light, mixed, and dark mode pages.