Product Design Lookbook

Web Applications

Enterprise Course Page Redesign

Codecademy’s learning experience was originally designed for a consumer audience. With plans to create an enterprise version of the catalog, course pages, which provided descriptions of the courses and CTAs for starting/resuming courses, language needed to be updated for an enterprise audience.

Company

Codecademy

Roles

  • UX writer
  • UX designer

The lead product designer and I separately sketched a number of new designs that we then reviewed together for commonalities and differences. It was during this session that I proposed a different design for enrolled and unenrolled learners, which would later be included in this round of redesign.

I developed several different variations of the course metadata design, with two options based on breakpoints, taking into consideration available space and readability.

This mockup of the redesigned course page features the final metadata design we agreed on for its simplicity and efficiency.

Mobile-to-Web App Design Translation

After a strategic pivot to launch their web application first, the product design team needed to translate finalized mobile designs for web users.

Company

Sunnyside

Roles

  • UX designer

This is the web app screen for users saved articles podcasts.

This is the web app screen editing your saved lists.

Growth

Updating the Codecademy for Business Product Page

The Codecademy business product page needed to be updated to focus on its lower tier business offering while directing people interested in an enterprise plan to the Skillsoft site for the new Skillsoft-Codecademy integrated solution. Updates needed to highlight the differences between the two plans while ensuring this page still converted prospective buyers with a need for a more basic plan.

Company

Codecademy

Roles

  • Growth designer
  • Copywriter
  • Product marketer

This the final design of the updated product page launched in collaboration with the Codecademy Sales team and Skillsoft marketing team.

ibi Site Redesign

With the launch of a new brand campaign under development, there was a opportunity to address the website's overall user experience with an eye on growth optimization.

Company

ibi

Roles

  • Growth designer
  • Copywriter
  • Growth marketer

I developed a wireframe to communicate how a proposed design could streamline our new messaging and improve conversion rates.

In partnership with Product Marketing,  Marketing Design*, and Brand Marketing teams, this was the final design of the homepage we launched with our new brand campaign.

*There were several design decisions in which I advocated for responsive design best practices, but I ultimately didn't have a final say on them, including the hero image.

eBook Bundle Landing Page

To support a new ABM (account-based marketing) program, a top-of-funnel offer was developed to drive engagement among prospective buyers from a list of target accounts and enable the marketing team to nurture them throughout their buying journey.

Company

ibi

Roles

  • Copywriter
  • Growth marketer

This is the final design we landed on, incorporating landing page learnings from previous tests and simplifying the form fields for contacts whom we had company data on.

Internal Tools

Codecademy for Business Sales Wiki

The library of internal sales enablement and customer-facing collateral was growing to the point the sales team could no longer keep track of it all. They needed a single repository where they could easily access the content they needed to effectively sell.

Company

Codecademy

Roles

  • UX designer
  • UX writer
  • Product marketer

I leveraged Notion, the company's primary tools for sharing internal information and aligning cross-functional departments, to create a central repository for all the information and content the Sales team required.

Project Management Template for Product Design Team

Each member of the product design team had their own method of managing projects, most of which were in Figjam and required time-consuming maintenance of basic information and project management functionality. I identified a need for a simpler template that could be easily replicated and maintained.

Company

Codecademy

Roles

  • UX designer

Notion was the closest to a company-wide project management tool all employees had access to and it's what the design team used to manage team updates, so I leveraged Notion Database to create a template all design team members easily use.

Research

Competitive Site Analysis

Codecademy needed direction for an earlier iteration of its business product page, which had to be designed for an entirely different audience than the company’s primarily consumer business.

Company

Codecademy

Roles

  • UX designer

I analyzed sites from competitors that offered plans similar to our lower tier and new enterprise tier as well as two other B2B companies from different industries to expand learnings and possible inspiration.

I grouped the strengths, weaknesses, opportunities, and threats from all the pages I analyzed, identified top themes across each area, and used these themes as guidelines for analyzing our own product page.

< BACK