Overview
OBIC (One BI Client) is Boehringer Ingelheim's (BI) operating system, available in two versions—OBIC 2 and OBIC 3—designed to suit different user needs. Users select the version based on their daily tasks.
The OBIC Gadget is a tool within OBIC, allowing users to manage support tasks (install software, report issues, grant IT remote access, etc.) and view device details (name, model, etc.). When the project was initiated, the existing version of the Gadget was already in use. Extensive research was conducted to assess its usability and determine whether changes were necessary.
Objectives
The goal was to test user interaction with the existing Gadget, evaluate its usability, identify pain points, and uncover opportunities for improvement to enhance the overall user experience.
Methodologies
-
Survey
-
In-depth Interviews
-
Concept Testing
-
Usability Testing
-
Design Critique Session
Research Overview
User Research Brief
Survey
-
A general company-wide survey was conducted on OBIC devices.
-
Focus areas: Order, pick up, set up, performance, and gadget experience.
-
11,000+ responses were collected.
In-depth Interviews
-
12 potential users with differnt profiles were interviewed.
-
General thoughts about their devices and specially the gadget were gathered .
Insights
-
Insights from the survey and interviews uncovered a few pain points in the gadget's usability, guiding the development of a clear problem statement to address user needs.
Problem Statement
The OBIC Gadget, part of Boehringer's first user-centric PC experience, needs a redesign to better align with users' needs and usability principles, as many users are unaware of its functionalities or struggle to utilize them effectively.
Original Gadget Overview
Purpose
-
Display PC details (name, model and OBIC version).
-
Enable specific User Actions.
Gain Points
✓ Every BI computer has it.
✓ Provide quick access to IT help and support.
✓ Easy ticket raising for issues.
Pain Points - UX heuristics
✘ Low awareness & familiarity (users may not understand the interface).
✘ Heuristic Usability Guidelines not followed:
✘ Inconsistent Standards (info shouldn’t look like input fields)
✘ Aesthetic and Minimalist design (remove irrelevant info to the users from the interface)
✘ Recognition over Recall (avoid hiding key actions in dropdowns)
Insights Gathered
A general survey and in-depth interviews on OBIC devices revealed that many users were either unaware of the Gadget's functionalities or dissatisfied with its interface, actions, and available options. This prompted a usability test with over five users, leading to the following insights:
Users find the Gadget aligned with BI’s needs.
Users see it as a hub for device info and support
Users can easily access device name and software info
Users can easily access and run the OBIC update.
Users struggle to navigate and use the OBIC Gadget.
Users are not actively engaging with the Gadget.
Users lack Gadget customization option
Users require better visual appeal in the Gadget.
Design Overview 1
Design Objectives
Based on pain points identified through the survey and interviews, we established the following design objectives:
Improving user experience of the gadget.​
​​
​
Increasing gadget usability.​​
Potential customization design.
​
​​
Aesthetically pleasing, more modern design
Ideation
After gathering insights from usability tests, we initiated the ideation phase by conducting a workshop with our design team, applying the "How Might We" technique to generate solutions.
During the HMW workshop, we:
-
Defined and refined the problems.
-
Transformed the problems into "How Might We" questions.
-
Generated multiple solutions and voted on the most relevant ones.
-
Reviewed and selected the best ideas based on viability, desirability, and feasibility, refining them into actionable designs.
HMW raise users awareness of the OBIC gadget and its functionality?
HMW redesign the Gadget to improve users' familiarity with its functions?
HMW design a
modern version of
OBIC gadget?
HMW redesign the Gadget to be user-friendly and visually appealing?
HMW improve
the engagement
with the gadget?
HMW redesing
a customizable
gadget for the
users
Selected "How Might We" questions
Sketching
We moved the selected ideas to the sketching phase, exploring concepts to address the HMW questions. After team evaluation, we identified the top three ideas:
1
2
3
Wireframing
Wireframing of the selected ideas began.
1
2
3
Concept Refinement
Following meetings with stakeholders and developers, we incorporated feedback and made adjustments based on the discussed requirements, resulting in the mid-fidelity concept shown below:
Action Cards
Device Information
Navigation Bar
Usability Test
User's Insights
After refining the concept, we conducted a usability study with over five users, organized the insights into thematic groups, and developed targeted UX recommendations for each theme to address user needs and enhance the design.
​​
​
-
Functionality
-
Design
-
Information
-
Navigation Buttons
-
Other
Functionality and Information
Usability Study Results
Users prefer manual function cards in the Gadget over automated functions, such as the OBIC update, which is intended to run automatically in the background.
Users think they must do something with ‘Open Tasks’
Users mention that they normally seek tips and tricks in Help/FAQ not the DWP card.
UX Recommendations
Consider other “manual” useful functions such as install printer and/or change system language.
Change the ‘Open Tasks’ with ‘Open Requests’
Change the ‘Tips and Tricks’ to something non-misleading for the users.
Usability Study Results
Users understand the pin concept and found it useful.
User’s needs, as revealed in surveys and interviews, indicate that the meatball menu lacks crucial functions such as Citrix reset, change system language and help/FAQ options.
Users are happy with the functionality and the icon.
UX Recommendations
Keep the button – Only unify it with Boehringer design system.
Add user-identified key functions to the meatball menu and maintain it to hide less crucial functions due to enhance the gadget usability.
Keep the button – Only unify it with Boehringer design system.
Navigation Buttons and Design
Usability Study Results
Users try to click on the whole card instead of play button.
Users are confused that after hiding a card, where they can find and retrieve it again.
Users couldn’t distinguish close and hide buttons.
Changing the CTA colors while hovering the mouse over each component was not clearly noticeable for users.
UX Recommendations
Make the CTA clear for users.
Consider a place for hidden cards.
Design clear user flow for both buttons.
Use other colors with better contrast.
Usability Study Results
Users do not notice the PC model in the first glimpse - Computer name placeholder seems editable.
Users do not identify “open company portal”
Users perceive that ‘create ticket’ and ‘create calling card’ should place together as they are related.
Users do not notice these three icons as buttons at first
UX Recommendations
Use a high-contrast color following Boehringer design system for better visibility as well as text field UI principles.
Incorporate action and reference (webpage/company portal) alongside an icon for each button.
Rearrange the order of buttons.
Follow the UI design principles as well as BI design system guidelines
Design Overview 2
Company Design System
After analyzing user feedback and grouping insights into themes, we conducted design sprints and collaborative discussions to refine the gadget design. The process integrated the corporate branding's minimalistic and cubic style for consistency across digital materials while addressing users' pain points.
An overview on part of Boehringer Figma design system
Our approach to the GOAL
PC Information Section:
-
​​Highlighted gadget name aids users in easy and rapid identification.
-
PC name appears uneditable, and the copy button has been retained since users found it helpful.
-
PC model has been enhanced for improved recognition with a subtle blue circle and better contrast.
-
Meatball menu and pin buttons stayed due to their usefulness, and their positions has been changed following UI symmetry principle.
-
Meatball submenu needs to be aligned with the user’s needs.
Card Information Section:
-
CTA button has been added to prevent user confusion from multiple clicks on each card and to ensure clarity for each card’s action button
-
‘Close’ and ‘hide’ buttons functionalities combined and shifted to the top right corner of each card to avoid use the same function with two buttons
-
Show hidden items option has been added for users to find closed cards and to be able to retrieve them
-
Information provided in each card has been classified in four categories of card image, card title, card explanation and source notification
-
Action and reference provided for each button to make them more recognizable.
-
Buttons order has been changed to help users identify related buttons together.
-
Comprehensive icon for each navigation button with a good contrast has been provided to help users identify them as clickable buttons quickly
-
Hovering the mouse and selecting an item will change the button color, enhancing user navigation across the buttons.
Navigation Bar Section:
Hover
Selected
Final UX Concept
Post Development Process
In the final stage, after several meetings with the development, content, and material teams to ensure alignment for the live version of the Gadget, we implemented updates to the "Cards" and improved various sections. New categories such as "Information," "Tools," and "Services" were introduced to enhance user access and maximize the Gadget's functionality.
Different Functional Sections
Corporate Brand Icons/Images
Responsive Cards
Lessons Learnt
-
User-Centered Design Matters: Early user feedback and usability testing are critical for identifying pain points and guiding design improvements.
​
-
Alignment is Key: Consistency with corporate branding enhances usability and strengthens the overall digital ecosystem.
​
-
Collaborative Processes Drive Results: Regular discussions with developers, stakeholders, and content teams ensure cohesive and practical solutions.
​
-
Iterative Refinement is Essential: Design sprints and usability studies revealed actionable insights that significantly enhanced the final product.
Steps Taken
-
Integration and Observation: Following the integration of the new Gadget into OBIC systems, user behavior was monitored to evaluate adoption and satisfaction.
​
-
Pilot Study Insights: During a short pilot study:
-
Over 90% of users interacted with the new Gadget.
-
More than 95% expressed general satisfaction, as reflected in data dashboards.
-
​
-
Feedback Implementation: Insights from the pilot informed refinements to features and usability.
​
-
Awareness Campaigns: Targeted initiatives were launched to enhance user awareness of the Gadget's functionalities.
​
-
Scalability and Alignment: Regular updates were implemented to ensure scalability and alignment with evolving requirements.