Boehringer Ingelheim
02
PROJECT OVERVIEW
Timeline
3 months
Type
Re-Branding
UI Library
UI/UX Optimisation
Website Design
Team
Client:
Mark Müller
John Dave
Lucy Scott
Stakeholders:
Vinod Gowda
Himangshu Kalita
Anagha Bhat
My Role
Brand Study
UX Audit
UX Design
UI Design
Hand-off
Tools
Figma
GSuite
Life forward - Boehringer Ingelheim reimaging its brand strategy
Boehringer Ingelheim’s website needed to align with its new branding, featuring a fresh color palette and the brand identities claim “Life forward.” The project focuses on enhancing the user experience while reflecting Boehringer Ingelheim’s leadership in medical innovation.
CHALLENGES
The project was meticulously crafted through in-depth research, focusing on user needs and effective strategies to inspire adoption and trust in renewable energy.
01
How can we integrate the new branding seamlessly?
02
How can we showcase medical innovation and information clearly and simply?
03
How can we design for both medicals professionals and the public?
01
DISCOVERING
UNDERSTANDING THE Landscape
I conducted an extensive review of articles, research papers, and scientific studies on solar panels and their adoption in India. To focus my findings on the specific problem statement, I developed a research strategy that allowed me to streamline and filter the insights I gathered.
Additionally, I engaged with both current users and potential adopters through interviews and surveys, further enriching my understanding of their experiences and needs.
PRIMARY RESEARCH
With help from our client, we were able to identify frequent users of the website who shared their perspectives and pain points while browsing the website. From their comments, we observed a few patterns that we thought necessary to address.
"The website looks old. It should be more futuristic and reflect innovation"
- John Dave
INSIGHTS
01
Brand Integration
Incorporating the new color palette and the “Life forward” brand claim while maintaining a cohesive and intuitive design. The challenge is to reflect the updated branding without disrupting the user experience.
02
Clear Communication of Innovation
Effectively showcasing Boehringer Ingelheim’s leadership in medical innovation while making complex medical information accessible and engaging for a diverse audience.
03
User-Centric Experience
Designing an intuitive, easy-to-navigate platform that caters to both health care professionals and the general public, ensuring content is relevant and easily accessible for all user types.
02
DEFINING
UX AUDIT
Armed with our pain points from users, Google Analytics statistics and a study of other news platforms, we conducted an audit of the current homepage and outlined the major areas in which we wanted to intervene and felt would make a large impact.
Old Homepage
01 Orientating the User
Highlight what Boehringer Ingelheim is and does
02 Reorganise Content
Relook at information hierarchy
03 Clear Value Proposition
Display relevant content upfront
04 Simplify
Organise navigation and reduce clutter
05 Categorisation
Consider new ways of organising content
06 Migration
How new tech like AI and personalisation can impact new adaptation.
07 Dynamic Elements
Design more dynamic website to increase engagement
TARGET AUDIENCE
PRIMARY AUDIENCE
Secondary AuDIENCE
Patients, Caregivers
Doctors, Nurses & Pharmacists
UNDERSTANDING THE DATA
I conducted an extensive review of articles, research papers, and scientific studies on solar panels and their adoption in India. To focus my findings on the specific problem statement, I developed a research strategy that allowed me to streamline and filter the insights I gathered.
Additionally, I engaged with both current users and potential adopters through interviews and surveys, further enriching my understanding of their experiences and needs. This comprehensive approach has provided a solid foundation for my project, ensuring it is informed by both existing research and direct user feedback.
INFORMATION ARCHITECTURE
I created the information architecture of the app based on all of the features we outlined with my guide. The flows outlined the different screens and features we would need to create wireframes for.
This helped us group the features and also think of the different ways in which we would enable a user log in to the app.
03
DESIGNING
Imagery
The imagery for this project reflects community, optimism, and progress, aligning with Boehringer Ingelheim’s "Life Forward" vision. It captures moments of human connection, innovation, and well-being, evoking a sense of happiness, hope, and a healthier future.
Colors
A balanced mix of minimalism and depth, with a carefully curated color palette, ensures accessibility and clarity, making information both inviting and impactful.
At its core, this theme is about embracing change with innovation, creating an experience that is not just visually appealing but also meaningful—one that inspires people to move forward with confidence and purpose.
Button Hierarchy
I used an icon set from Nounproject that I felt was best in line with the positioning of the app to support the visual language.
Iconography
We rebranded the icons from the existing BI Global Design Library.
BEFORE AND AFTER
New Homepage
05
Reflections
Asking the Hard Questions
The Boehringer Ingelheim team initially approached us with a list of features they wanted to implement, without clearly defining their target audience. While their requirements were detailed, they lacked user insights to guide product decisions. Our team emphasized the importance of research-driven design and successfully used these insights to create a more user-centric and impactful final product.
Leveraging Team's Strengths
Collaborating with the clien's team required adaptability and a focus on understanding their unique strengths and interests. From the start, we prioritised creating an open and supportive environment where everyone felt encouraged and motivated. Our goal was to ensure the team remained excited and challenged throughout the process, so we could collectively take pride in the final outcome and celebrate our success together.
Adapting to Evolving Requirements
As new insights emerged during the process, we learned the importance of flexibility. Adapting to evolving requirements allowed us to refine the design and align it more closely with both user needs and the brand’s vision.
Balancing Innovation with Usability
The project emphasized the need to balance innovative design with intuitive usability. By grounding creative solutions in user insights, we ensured the platform remained accessible and effective for all users.
05
Accessibility Test
01
Carousel Nav Issue
The accent green color (used for icons) on white background does not have contrast enough to pass the accessibility criteria.
02
Light mode- The gray color used for disabled tabs is not visible
Dark mode - Atice tab color is not visible
Carousel Pagination Issue
Buttons
Checkbox & Radio Button
Carousel
Layout
NEXT STEPS
01
The True MVP(s)
Unfortunately I left the organisation and feel FOMO for not being able to grow with the product. However, Anagha and Himangshu were the most competent teammates and I'm certain that the project will be in good hands.
02
Detailed Interactions
The handoff process for this project involved a direct link to the designed screens. Given more time (and scope), I would have liked to be involved through the development in order to oversee the translating of the designs into the final product.
03
Putting it in the Real World
I didn't have the time to do user tests during this short process. Many decision decisions were made based on assumptions. It would be great to be able to test a prototype of the app with users and identify gaps (if (m)any).
04
What is Satisfaction?
I would also like to explore the different nuances of the layout. The audio feedback they give and what makes medical professional use a specific kind vs. everyday users. It would be interesting to see how the experience changes based on the mechanism we use.