Website Redesign
When I joined Greenlight, my primary role was to lead a comprehensive website redesign—one that brought together our growth strategy, the upcoming rebrand, and integration with the product design system.
TLDR Process
Built sign-in flow from mobile experience
Explored visual treatments for translating the app to web
Designed MVP experience using account monitoring feature
Collaborated on strategy for marketing launch
Website Redesign
When I joined Greenlight, my primary role was to lead a comprehensive website redesign—one that brought together our growth strategy, the upcoming rebrand, and integration with the product design system.
TLDR Process
Built sign-in flow from mobile experience
Explored visual treatments for translating the app to web
Designed MVP experience using account monitoring feature
Collaborated on strategy for marketing launch
Website Redesign
When I joined Greenlight, my primary role was to lead a comprehensive website redesign—one that brought together our growth strategy, the upcoming rebrand, and integration with the product design system.
TLDR Process
Built sign-in flow from mobile experience
Explored visual treatments for translating the app to web
Designed MVP experience using account monitoring feature
Collaborated on strategy for marketing launch
Website Redesign
When I joined Greenlight, my primary role was to lead a comprehensive website redesign—one that brought together our growth strategy, the upcoming rebrand, and integration with the product design system.
TLDR Process
Refreshed website + experimented ahead redesign
Collaborated on rebrand and built design system
Stress-tested system with page prototypes
Validated designs and launched Storybook library
Phase 1: Experimentation amidst chaos
It wasn't long before I learned the website redesign wouldn't be straightforward. About 90% of the site was hard coded, and designs weren't part of a unified system. The rebrand was still in progress, inconsistencies and tech debt were piling up, and we had conversion goals to hit with little data to guide us! So, I initiated a solution: refresh before redesign.
Phase 1: Experimentation amidst chaos
It wasn't long before I learned the website redesign wouldn't be straightforward. About 90% of the site was hard coded, and designs weren't part of a unified system. The rebrand was still in progress, inconsistencies and tech debt were piling up, and we had conversion goals to hit with little data to guide us! So, I initiated a solution: refresh before redesign.
Phase 1: Experimentation amidst chaos
When I joined Greenlight, the website ecosystem was not prepared for a simple redesign. I learned 90% of the site was hard coded, grids were nonexistent, and the disconnect from the well-developed product design system resulted in inconsistencies between identical components. Not to mention, the rebrand was still in progress and we had conversion goals to hit with little data to guide us.
1. Audit and build system foundations
We pared down outdated components and laid the groundwork to connect the website with Tailwind and the product design system. We introduced a responsive grid, unified type ramp, and tokenized color palette to start the framework for a shared design system.
1. Audit and build system foundations
We pared down outdated components and laid the groundwork to connect the website with Tailwind and the product design system. We introduced a responsive grid, unified type ramp, and tokenized color palette to start the framework for a shared design system.
1. Audit and build system foundations
We pared down outdated components and laid the groundwork to connect the website with Tailwind and the product design system. We introduced a responsive grid, unified type ramp, and tokenized color palette to start the framework for a shared design system.
2. Run high-impact experiments
Zeroing in on underperforming areas of the site, we conducted rapid tests that garnered impressive results. For example: we were able to increase conversions on our Plans page by over 34% just by introducing a swipeable, desktop responsive chart.
For modernization and elevated product storytelling for guided conversions, we built a Greenlight savings calculator, added an app feature showcase, and introduced subtle animations across landing pages. The app feature animation alone increased registration CVR by 26.23% and 6.9%.
For modernization and elevated product storytelling for guided conversions, we built a Greenlight savings calculator, added an app feature showcase, and introduced subtle animations across landing pages. The app feature animation alone increased registration CVR by 26.23% and 6.9%.
3. Bring the product to life
For more top-of-funnel product visualization, we introduced engaging app interaction modules, such as an animated hero and a series of feature animations. These upgrades increased registration CVR by 26.23% and 6.9%.
3. Bring the product to life
For more top-of-funnel product visualization, we introduced engaging app interaction modules, such as an animated hero and a series of feature animations. These upgrades increased registration CVR by 26.23% and 6.9%.
3. Bring the product to life
For more top-of-funnel product visualization, we introduced engaging app interaction modules, such as an animated hero and a series of feature animations. These upgrades increased registration CVR by 26.23% and 6.9%.
Meanwhile in Seattle…
The Brand and Product Design teams met in Seattle for a three-day sprint to pressure-test the system. Together, we untangled tough questions that often rise later in the game, and allowed every designer a seat at the table.
After the offsite, a smaller working group took our conversations and inspiration to present a final stakeholder-ready deck of rebrand guidelines.
The Brand and Product Design teams met in Seattle for a 3-day sprint to pressure-test the system. We explored the website, app, social, and OOH channels. Together, we untangled tough questions that often rise late in the game, and gave every designer a seat at the table.
Phase 2: Design pages for stakeholder buy-in
Over the course of a couple months, we worked in pods to refine brand guidelines and bring them into the Core design system (aka Greenlight UI or GLUI for short). We stress-tested the new GLUI by prototyping proof-of-concept pages that would shape the vision for the new site.
Phase 2: Design pages for stakeholder buy-in
Over the course of a couple months, we worked in pods to refine brand guidelines and bring them into the Core design system (aka Greenlight UI or GLUI for short). We stress-tested the new GLUI by prototyping proof-of-concept pages that would shape the vision for the new site.
Phase 2: Design pages for stakeholder buy-in
Over the course of a couple months, we worked in pods to refine brand guidelines and bring them into the Core design system (aka Greenlight UI or GLUI for short). We stress-tested the new GLUI by prototyping proof-of-concept pages that would shape the vision for the new site.
Homepage
Product feature page
Sitewide navigation
After presenting these and other prototypes to C-level stakeholders, we received enthusiastic approval to proceed.
Phase 4: Making it real
We rolled out the redesign with an agile approach - deprecating Emotion to Tailwind and aligning GLUI tokens in stages while we built the new modules from our website POC. We also continued our BAU web experiments and additional team priorities. I worked to use the latest Figma capabilities to keep our system up to speed and to serve an audience of both designers and engineers.
Phase 4: Making it real
We rolled out the redesign with an agile approach - deprecating Emotion to Tailwind and aligning GLUI tokens in stages while we built the new modules from our website POC. We also continued our BAU web experiments and additional team priorities. I worked to use the latest Figma capabilities to keep our system up to speed and to serve an audience of both designers and engineers.
Phase 4: Making it real
We rolled out the redesign with an agile approach - deprecating Emotion to Tailwind and aligning GLUI tokens in stages while we built the new modules from our website POC. We also continued our BAU web experiments and additional team priorities. I worked to use the latest Figma capabilities to keep our system up to speed and to serve an audience of both designers and engineers.