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
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.