Johnson & Johnson
Role
User Research, User Interface Design
Date
Oct 2021 - Feb 2022
This project was in collaboration with an incredible design agency JK Design, for their long-term client — Johnson & Johnson. The goal was to design Johnson&Johnson's Health for Humanity Report and Diversity, Equity, and Inclusion Report for the year 2021 in order to highlight their commitment to global health and inclusion. I led the UX research for this project, working closely with a design lead from JK.
Phase 1: UX Research
I started with evaluating the 2020 digital reports and preparing a blueprint for the new websites. During this phase I also compiled recommendations resulting from benchmarking of composite peer-set companies.
2020 Site Review
JnJ 2020 Healthy For Humanity - Navigation
Ways to improve Site Navigation.
There reports were extremely dense with information, with an overwhelming number of tabs in the navigation, creating a need for a more simplified UX. Specifically, users should be able to seamlessly navigate around the site while avoiding hidden pages, the report hub should communicate information in simple, digestible ways, and downloadable content should be clearly labelled.
2020 Diversity, Equity, and Inclusion Report - Home Page
Ways to improve Visual Impact.
Working with the teams at J&J and JK, we found ways to make the content really stand out. We wanted bold photography, fun icons, and eye-catching infographics to bring it to life. Videos helped grab attention, and animated elements like scrolling effects made everything feel more dynamic. The goal was to celebrate the content and create an experience that was as engaging as it was visually appealing.
Ways to improve Overall Experience.
There were also a few quality-of-life enhancements such as increased responsiveness across larger screen sizes, and using unique hero images which ensure global and regional representation; apart from working with J&J DO to maintain brand consistency. I also added a report archive to see all past reports, and implemented a URL strategy to future-proof links to content in iPDF's so users can compare JnJ's commitment through the years
Competitive Analysis
After researching both online and print versions of reports by 15 companies, I compiled key takeaways and recommendations to discuss with my project lead. The themes of a simplified navigation, visually-appealing graphics, and a strong narrative guiding the report, remained consistent and validated our existing research.
Key Takeaways
Insight-Centered Storytelling: Highlight key insights with impactful data visualizations and interactive elements like timelines or comparison graphs to keep users engaged.
Intuitive and Accessible Navigation: Use a simple structure with sticky navigation and accessibility features like font adjustments, dark mode, and screen reader options.
Dynamic Layouts: Keep users engaged with varied page layouts, animations, and parallax scrolling, while offering deeper content via downloadable reports.
Simple, Focused Homepage: Direct users to high-priority sections like highlights or featured articles with a clean, uncluttered design.
Understanding our Audiences and what they need
Looking for metrics and performance data to determine the quality of J&J as an investment. Also interested in content related to the CEO and strategy for future performance indicators.
Reviewing J&J's performance on specific issues and comparing them to other players in the industry. Policy makers may use this information to influence new policies or better understand trends in sustainability, both inside and outside our industry.
For ranking bodies who don’t request performance data in advance, this audience would be looking to pull data to rank J&J on their scale
People considering joining J&J want to know what they stand for and what issues they are championing. They want to understand their values and see if they align with their own.
Phase 2: Information Architecture
From our research on past microsites and competitors, I designed each microsite’s information architecture with simplified navigation, clear language, and intuitive groupings that aligned with user expectations. I focused on interaction patterns that effectively told each report’s story in an engaging and compelling way.
2020 Sitemap (Old)
H4H Sitemap 2020
Conducted A/B testing with internal stakeholders
To validate between two different sitemaps, I conducted A/B testing with internal stakeholders in a rapid and agile manner. Using remote collaboration tools, I gathered feedback on usability and clarity, iterating quickly based on insights. This process allowed us to identify which structure worked best for presenting the reports’ key insights while aligning with user expectations and business goals.
2021 Proposed Sitemaps
Proposed H4H Sitemap 2021 - Version A
Proposed H4H Sitemap 2021 - Version B
We selected Version B due to its simpler, more accessible language, which resonated better with stakeholders and ensured clarity for users.
Phase 3: Wireframing
I designed the mid-fidelity wireframes during this phase, focusing on a simpler navigation and creating an ownable and engaging look and feel - consistent with the J&J brand - for each new microsite.
2021 Healthy For Humanity Report Mid-Fidelty Prototype
2021 Diversity, Equity, & Inclusion Report Mid-Fidelity Prototype
Phase 4: Handoff
I completed pixel-perfect mid-fidelity designs for both mobile and desktop screens, covering every page in the main navigation. These designs were handed off to the team at JK for high-fidelity polish, ensuring a smooth transition in the design process. I then collaborated closely with JK’s designers, providing ongoing graphic support and ensuring the visual direction aligned with the project goals. This iterative process ensured a cohesive and polished final product.
Takeaways
Working on Johnson & Johnson's website as a fresh graduate was an incredible experience. It was one of my first large-scale projects for a major company, with high expectations and standards. I enjoyed conducting impactful user research, including competitive analysis and A/B testing, and designing the information architecture. Through mid-fidelity designs, I decided the entire hierarchy and layout for the reports, receiving positive validation through constant feedback from the talented designers at JK and J&J. Ultimately, the final prototype for both websites was well received and approved for development, which was very satisfying as I lived up to the team's high standards and contributed to the success of the project.
