J&J Medical Devices
J&J Medical Devices Companies is a platform designed to support and connect with all of J&J’s medical device franchises and their users. It is to combine all individual brand websites into one cohesive system. The project consists of three teams the Platform, Health Care Professionals, and a Patients team to support specified content and user's needs.
As a lead designer on the project, I had the opportunity to work on the HCP team and the platform team. I focused on system development of the user experience for our front-end and back-end users, future enhanced capabilities, and individually highlighting the identity of a brand and its needs within one holistic system.
Role UX/ Interaction Design Lead
Studio Johnson & Johnson
Field Digital
Launched 2019
Process
Teams work within an agile system of two-week sprints, to prioritize and achieve oriented tasks for teams and collaborative goals and solutions.
To help organize and support teams in documenting and communicating the stage a task, we use Jira and Confluence. To track each phase in identifying and analyze concepts, identify problems, create future enhancements, or in development.
DELIVERABLES
UX Research
UX Design + Audits
Competitive Analysis
User Flows
Wireframes
Content Strategy
Design System
Prototypes
UI Design
Design QA
Identify and Analyze Concepts, Problems and Enhancements
Determining what design task to prioritize within each sprint is dependent on what requirements for a new feature or enhancements is most important to have on our platform. By analyzing each franchise's needs, the design and user experience would be determined by the best solution that's most beneficial for the user and supports content needs to pass SEO requirements.
I would create prototypes to test my investigation and receive feedback from our users. Also, provide visual context for franchises and the development team regarding how the user experience would interact with a new feature. Along with examples of different sites for teams and franchises visually understand similar concepts and trends of interactions and relatable user experiences that could be adapted to our platform.
Building out the UI Kit
I was also responsible for was to build out the design system in a documented UI Kit that supports our style guide, component libraries, and page templates that will work for the various content need for each business unit and users coming to the site. Along with the UI Kit, I also would work through the user experience needs based on specific country and business level requirements on how various audiences would understand how to interact, explore content, and engage with a site.
Key Design Principles
Follow brand guidelines for visual design
Extend brand guidelines for digital design
Strong usage of typography and images
Employ layout and responsive design
Consistency with UI elements: Atoms: Molecules, and Components
For the UI Kit we created a standard visual design for each element to follow J&J Brand guidelines, but to be flexible to for other franchises to customize elements with their own brand colors, and element styles.
Typography
The typographic scale is a harmonious scale that allows an ordered set of character sizes linked to each other by a common ratio. It makes the user to understand the hierarchy of the page and the type sizes have the flexibility change scale between break points, then to have to define type sizes for each screen sizes.
Components
Components library are a variety set of blocks created using elements and patterns within our design system. The components are to support the flexibility to build page layouts and be a unified system for the different content from our franchises.
Navigation
The global navigation menu functions as a masthead for J&J digital sites. The red logo against the white background ties our sites together visually, while the links helps the user understand the content of the site. There should be indicators for the user to let them know where they navigated to.
As the site has been evolving, one goal was to strategy the best solution to allow the user to navigate and search for particular content within different franchises. The secondary navigation menu is a sub-menu to focus on a microsite or business unit of a distinct franchise, to allow users to search for particular products and information that is geared towards their surgery profession.
A secondary nav menu also brings flexibility in addressing the accessibility needs of various audiences from different countries and what best practices to understand how users interpret content.
Page Templates
Pages Templates are pre-built pages using existing components within our system to create custom layouts for franchises to upload common content categories. It also allows users to understand and identify pages of similar content as they navigate through the site. Such as Product Detail Pages, Specialties pages, Overview pages, and many other page layouts that use specific components and features for the particular user and content needs.
Additionally, I had the opportunity to work closely with the Japan team to define the user experience and how our JJMD design system can follow accessibility needs for their users. As this was a challenge in making sure our system can be adaptable for their users. As I worked with the team and researched how the Japanese language is read, it informed me how the user understands visual cues and hierarchy. I created new modules, which the user can understand the behavior of each module to be able to analyze the content as they are guided through each page. The new modules also can be adjusted and flexible to follow our standard grid and designs if other sites have similar needs.
Final Step: Testing and Review
Once design discovery, prototyping, and receiving approval from POs, and Franchises. The design solution then goes through the development stage to be developed for the actual site, but before going live on the site, our team goes through a process of UAT and design QA to make sure it follows the final design requirements and user experience. Often goes accompanied by visual markups and critiques before final approval.
