MassMutual: Building a Design System

Project Timeline: 2019-2022
Team: Single Lead Product Designer, Engineering Team

A design system is more than just a collection of styles and components, it’s a system that enables consistent, predictable experiences for customers and facilitates faster, more accurate implementation.

A working design system requires a design library, documentation and specs, and a corresponding development library for engineers. When these three things work in tandem, designers, engineers, and product teams can effectively create scalable, consistent and reusable experiences.

The goal of this Business Design System was to enable the creation of experiences that:

• Are so intuitive, any designer or engineer can come in and get started

• Handle large datasets gracefully with fidelity

• Solve problems specifically for this audience

• Unite all business or advisor-facing portals both visually and functionally

Portfolio Slides

MassMutual: Delegate Access Feature

Project Timeline: 2020
Team: 1 Lead Product Designer, 1 Product Manager, 1 Business Analyst, 1 Engineer

Problem to Solve:
Advisors usually have a team of support staff who also need access to the digital products that advisors use, so that they can perform actions on the advisor’s behalf. We needed to be able to provide delegate access for these team members on two different digital applications.

• LeadsApp: a mobile application for lead management

• Spark: a desktop application for sending out an introductory survey

Design Plan of Action:
I would design the experience first for LeadsApp (mobile) and then apply the experience to Spark (web), creating continuity between the two applications visually and functionally.

Portfolio Slides

MassMutual: Advisor Search Redesign

Project Timeline: 2019-2020
Team: 2 Lead Product Designers, 1 Product Manager, 2-3 Engineers
My Contributions: Competitive analysis, user-testing, visual UI, final MVP design

Portfolio Slides

MassMutual: Fact Finder Advisor Survey

Project Timeline: 2018
Team: 1 Lead UX Designer, 1 Senior UX Designer, 1 Senior Visual Designer
My Contributions: Competitive analysis, advisor workshop, visual direction, final design

Problem to Solve:
Advisors (specifically new advisors years 1-4) needed a digital way to formally retrieve information from new prospects before having a first meeting. Advisors wanted this experience to feel fun and look playful for new prospects.

Portfolio Slides

Blue Cross Blue Shield of Michigan Landing Page

Blue Cross Blue Shield of Michigan was seeking to create a landing page to launch their new Healthy Senior Living initiative, intended to incentivize seniors living in the Detroit area to become more physically active. The site's intention is to reiterate the information online that users are receiving in their personal mailers. 

Wireframe - Homepage

Visual Design - Homepage

Gray Matter Analytics Redesign

Gray Matter Analytics is an analytics company out of Chicago that seeks to transform healthcare organizations into data and insights-driven enterprises. They were seeking to rebrand and redesign their website in order to convey a modern, professional appearance that looked more like other edgier tech and analytic sites on the market. I did all of the UX/UI and branding design from beginning to end. This is the style guide that I provided, and the live updated website. 

Gray Matter Analytics Homepage

Channel One News Homepage Redesign

The Channel One News homepage was redesigned to provide definition and organization to our original content, while making it easier to navigate and find said content. The daily news show, previously the most trafficked space on Channelone.com, was also moved front and center directly to the homepage, so that we gain those viewers immediately while providing them with additional content upon viewing the show. We also started including premium [locked] content on the homepage in order to tease the fact that we have a paid-for premium product. Clearer marketing units were also created to clearly promote the product and convert subscribers. 

I also updated the top navigation and the footer.

Click here for PDF of full responsive designs and specs.  Click here to see the live site.

Original Homepage

Homepage Redesign

Channel One News Template Design

There was a need for a new responsive template to be designed for ChannelOne.com that could be utilized for OneVote (the Channel One News election coverage), Sponsored Sweepstakes and Franchises (important content sections).

Wireframes

Click here for full wireframe designs.

OneVote Designs

Click here for full responsive UX designs.  Click here to see the live site.

Desktop

Tablet

Mobile

---

Sponsored Sweepstakes

The banner remains, but the top navigation is removed. Instead of content, a field form is provided for entry. Advertisers can customize the banner area and background color, can include a sponsorship logo in the right column and provide a large image, video or gallery for branding purposes. 

---

Franchises

Sample Franchise Header Designs

Channel One News and Go Math! Academy Registrations

Channel One News is a daily news program purchased to be delivered in schools for grades 3-12. There was a need to create a registration process that allowed Channel One News to have a direct to consumer purchase option (either for homeschool or an individual teacher buying for a single classroom).

This required a new marketing landing page and an extensive registration flow that included designs for subscription payment pages, coupon functionality, sign in pages (once an account has been created), and account info pages ("My Account" pages once an account has been created). Click here for the full designs.

Marketing Landing Page

Subscription Payment Page

For phase 2, I needed to create a new subscription payment page that acted as both a marketing landing page and a subscription payment flow for all users (classroom, school and home). This would allow external digital marketing ad campaigns to have a single comprehensive page to direct consumers toward. Click here for full designs.

---

Due to the UX work I was doing on the Channel One News registration, I was put in charge of designing the Go Math! Academy registration. These subscription designs were based off of the Channel One News designs, while applying the Go Math! Academy style and needs. Click here for the full designs.

Go Math! Academy Grade Pages

On Go Math! Academy's marketing site, there is the option to learn more about the product by grade. On each grade page, we were seeking to add an Instructional Video and the functionality to try out some sample math questions on the Personal Math Trainer, a feature available on Go Math! Academy. I provided responsive designs illustrating the video and Personal Math Trainer layout and functionality for desktop, tablet and mobile. 

Desktop

In-Page Video Functionality

Personal Math Trainer Launches in a Modal Window

Tablet

In-Page Video Functionality

Personal Math Trainer Launches in a Modal Window

Mobile

Video Plays In-Page or Launches on iOS.

Personal Math Trainer Launches in a Modal Window

Go Math! Academy Parent Dashboard

Based on the leading curriculum used in schools for grades K-8, Go Math! Academy is a web learning program that motivates kids to improve their math skills while having fun with numbers. There was a need for a Parent Dashboard redesign. From wireframes to final designs, I refreshed and simplified the look and experience of the Go Math! Academy Parent Dashboard. 

Sample Wireframe for Parent Dashboard - Full Wireframes Available Here.

Parent Dashboard - Full Parent Dashboard UX Designs Available Here.

Parent Dashboard Color Application and Profile Icon Design - Full Parent Dashboard UX Designs Available Here.

Parent Area for Curious World iOS App

Curious World is an early learning app, designed for kids ages 3-7, with over 500 fun and educational games, videos and books. I was tasked with creating the parent-secured section of the app, which includes pertinent information for parents: the Parent Dashboard (locked, unless a paid subscriber), Privacy Policy, Terms and Conditions, etc. With competitive research of other parent areas and button designs in mind, I created this section of the app for tablet and mobile.

Tablet

Main Screen

Parent Gate

Parent Menu

Privacy Policy, Terms & Conditions

Mobile

Main Screen

Parent Gate

Parent Menu

Privacy Policy, Terms & Conditions