Product Design

UX / UI Design • Design System Development • Design Ops

Design System Development

Abbott Nutrition

A division of Abbott Laboratories, the global healthcare company.

A leader in nutrition science, research and development, Abbott Nutrition is behind some of the world's most trusted names in pediatric, adult, and healthy living nutritional product brands such as Similac, PediaSure, Pedialyte, Ensure, ZonePerfect, and Glucerna.

Roles:

  • Internal interviews of stakeholders and team members

  • Research available tools

  • Train team members on new tools & processes

  • Design naming convention and organizational structure for the design system

  • Identify & design system components

  • Implement & maintain new system

  • Communicate ongoing status to stakeholders

I had the opportunity to lead all aspects of the Boilerplate's creation. Our small team leveraged design thinking and atomic design principles to build taxonomies, component libraries, user flows, wireframes, and prototypes. The progress we made would not have been possible without our extended studio team of visual designers, writers, project managers, stakeholders, developers, and business technology partners. 

Tools:

Sketch, Abstract, Overflow, Invision, Zeplin, Zeroheight, Adobe Experience Manager, Magento, Adobe Rendition, Whimsical

 

The Opportunity

We knew that several Abbott Nutrition brands were preparing for site redesigns. These brands have a very diverse selection of demographics and use-cases. The sites would require a variety of capabilities including: e-commerce integration, user registration and management, event calendars, and advanced education course implementation and maintenance. This effort would also include overall migration to the Adobe Experience Manager CMS platform.

The Primary Challenges

  • Design a central, scalable system that accommodates several brands both large and small while maintaining the integrity of the Abbott Nutrition corporate brand requirements

  • Be considerate of the tools and process change learning curve for a team of over 100 people

  • Use out-of-the-box tools (no development team available to build system elements)

  • Pitch the solution to an array of stakeholders with different levels of familiarity

The Solution

Our newly-formed UX team proposed a standardized “Boilerplate” design system. Each Abbott Nutrition brand uses the Boilerplate as a starting point to build its customized version of the design system. The Boilerplate is duplicated and styled according to the individual brand guidelines.

The Boilerplate is designed to accommodate the range of Abbott Nutrition user and business needs, knowing each brand is different. It is the baseline source of truth for the studio teams and project partners to build from–to maintain brand consistency, improve user interactions, create efficiency, and save money over time. This resource houses component catalogs, documentation, functional annotation, style & use guides with links to supporting software apps and platforms.

The Outcome

The Boilerplate was created to make our design process more efficient, scalable, and consistent, and to bring the various teams of off-shore developers, designers, and other project partners together. Our team advocated for the creation of the Boilerplate and adoption of new studio software and practices. We pitched the value of a repeatable design system to the leadership team emphasizing increased efficiency and savings over-time, by reducing instances of costly customizations and creating a more structured and guided way for our teams to build solutions for product brand needs. The response was overwhelmingly positive.

ANHI - Abbott Nutrition Health Institute

Multiple Site Merge & Redesign

ANHI LIVE SITE

A division of Abbott Nutrition.

ANHI is committed to providing therapeutic nutrition resources to both healthcare professionals (HCPs) and their patients.

Roles:

  • Sole UX/UI Designer

  • Project manager (phase 1)

  • Design lead & design production

  • Managed external creative resources

  • Primary client liaison

Tools:

Sketch, Abstract, Invision, Zeplin

 

The Opportunity

Consolidate multiple resource sites into a new comprehensive HCP and patient experience.

The Primary Challenges

  • Design for over 1000 pages of varying content (articles, events, video, LMS, podcasts, media resources) into a pleasing, intuitive experience

  • Integrate current third-party LMS

  • Design for new robust search requirements

  • Allow client-authoring of ongoing content

  • Design for upcoming localization

The Solution

Worked very closely with the client team to understand the needs of the various user demographics being served and their various use-cases. Broke out distinctive site design requirements over several months, iterating on each while keeping overall site implementation in consideration.

Due to limited budgets and a generous timeline, brought in an external creative resource to help with overall visual design and production.

The Outcome

The client was incredibly pleased with the overall result of the redesign and jumped right into publishing their frequent content updates.

Body for Life

iPhone & Android App

Body for Life (BFL) is a 12-week nutrition and exercise program. The program is based on a specific workout schedule and utilizes a low-fat high-protein diet.

Roles:

  • Sole UX/UI Designer

  • Design lead & design production

 

The Opportunity

Create a mobile utility app for a very loyal and dedicated fan base that allows the user to easily follow and track their journey through the program.

The Primary Challenges

  • Create an intuitive mobile experience that was easier to use than the traditional paper tracking method

  • Design additional functionality beneficial to the user base

  • Low budget, limited resources

The Solution

Having gone through the program myself, I was familiar with the practical requirements of the BFL program.

Proposed functionality:

• Workout log & timer

• Recipe resources

• Meal plans

• Exercise tutorials

• Progress tracker

• BMI

• Weight

• Body Fat %

The Outcome

The brand client was pleased with the design. The app was released for Android devices, however the project was later closed due to maintenance and budget concerns.

McGraw-Hill Education - ConnectEd

Pilot Web Application

ConnectEd (originally codenamed “Colorado”) is a robust toolkit of learning resources designed with the flexibility instructors need, to unlock the potential of a diverse student population.

Roles:

  • UX/UI Designer

  • Art Director

 

The Opportunity

I was brought in as part of a small team to help design the pilot program within a 10-month project window. ConnectEd is a companion program to McGraw-Hill’s Smartbooks, their eTextbook program.

The goal was to design an online platform for teachers, admins & students that:

  • Enabled access to the Smartbook catalog or assigned Smartbook materials

  • Empowered teachers and admins to manage students curriculum, schedules, profiles, etc.

  • Delivered student assignments

  • Enabled students to interact with assignments & other resources

  • Allowed teachers and admins to build curriculum

The Primary Challenges

  • Interview and learn the needs & requirements of internal stakeholders across McGraw-Hill’s subject matter departments (Math, Science, History, etc.)

  • Design a scalable & skinnable solution that could be customized per use-case

  • Fully comprehend and design for the intricacies of the curriculum, taxonomy and administrative requirements

  • Stay within the 10-month project window

The Solution

Our team integrated quickly with McGraw-Hill internal resources. I worked closely with a dedicated researcher and BA, helping to perform interviews and create various documentation. Simultaneously, I collaborated with internal design resources to develop complex UI solutions and aesthetics.

Using collected user demographic data, we developed and presented many potential solutions for the challenges listed above.

The Outcome

A very productive and successful pilot effort. Our team identified many obstacles and solutions for the impressive and ambitious project. We were able to bring previously separate internal groups together, allowing for ongoing collaboration long after our team contract was complete. The ConnectEd program (now called “Connect”) continues to be McGraw-Hill’s flagship online product.