Pfizer Oncology

My Role as the lead UI designer, I was responsible for:

• Designing the interface to align with Pfizer's updated branding.
• Incorporating new design elements like frosted glass effects and motion to enhance the visual appeal.
• Prototyping key interactions and collaborating with developers to translate the design vision into a seamless digital experience.

The Process

Discovery & Stakeholder Collaboration

• During the initial phase, I worked closely with Pfizer’s branding and marketing teams to deeply understand the nuances of their 2021 brand refresh.
• I conducted stakeholder workshops to identify the core priorities for the portal, such as ensuring readability, emphasizing trustworthiness, and incorporating branding elements without overwhelming the content.
• We reviewed Pfizer’s internal guidelines for frosted glass and motion effects, clarifying how these elements should function in a digital context.

Visual Exploration

• One of the challenges was translating Pfizer’s new branding—designed primarily for print and static media—into a functional digital experience.
• I developed several style explorations to test the application of frosted glass effects, ensuring they added depth without interfering with content readability.
• Collaborated with motion designers to test subtle animations for interactions, such as menu transitions and hover states, aligning with the new branding guidelines.

Wireframing & UI Design

• Designed wireframes to establish the portal’s structure, focusing on creating a clear hierarchy for medical resources, clinical trial updates, and development program information.
• Converted wireframes into high-fidelity mockups using Pfizer’s updated color palette, typography, and frosted glass elements.
• Special attention was given to creating a clean, professional look while ensuring that essential content like clinical trial updates and oncology program details were easy to find.

Prototyping

• Built interactive prototypes in Adobe XD, showcasing transitions, hover effects, and subtle animations. These prototypes demonstrated how the frosted glass and motion elements enhanced the user experience while staying true to the brand.
• Conducted reviews with Pfizer’s internal teams, iterating on feedback regarding the balance of branding elements and content emphasis.

Collaboration with Developers

• Partnered closely with the development team to ensure the frosted glass effects and motion transitions were implemented as intended.
• One technical hurdle involved ensuring smooth animations across various devices and browsers, especially on lower-powered systems. I worked with developers to optimize performance while maintaining the desired aesthetic.
• Regular syncs ensured the UI designs translated perfectly into the final build, with no compromises on branding fidelity.

Challenges Overcome

• Brand Adaptation to Digital: Pfizer’s frosted glass and motion elements had been developed for print and video but required rethinking for the web. Through close collaboration with the branding team, I created digital-friendly adaptations that upheld the brand's integrity.
• Balancing Aesthetics & Usability: While the frosted glass elements were visually striking, they risked reducing readability. To address this, I incorporated subtle gradients and adjusted transparency levels to maintain clarity.
• Motion Integration: Introducing subtle animations while keeping them professional and performance-friendly required meticulous testing and adjustments.

Outcome

The Pfizer Oncology Portal successfully launched as the first digital product to embody the company’s refreshed branding, setting a benchmark for future releases. The portal’s sleek and modern UI was praised internally and externally for its professionalism and usability. Pfizer’s stakeholders appreciated the seamless integration of frosted glass effects and motion, which elevated the digital experience while maintaining focus on content.

Takeaways

This project highlighted the importance of adapting branding elements thoughtfully to digital platforms. By focusing on collaboration and user-centered design, we created a visually appealing, functional portal that resonated with Pfizer’s new identity and set a standard for future digital initiatives.