NEXUS UDI
The Nexus UDI application was initially built in the early 2000s and was never looked back. It needed a complete revamp to better the user experience, implement the current industry standards. My role was to analyze the existing web app, gather user inputs and make it up to date also minimize the clicks to get the work done. I lead a team of 2 designers, while coordinating with cross functional teams and clients.
My Role
User Experience Design Lead
Support for Visual Designs
Design Team
Poornima Parvathy
Ankita Tripathi
Time and Method
8 months
Agile Methodology
What is Nexus UDI website about?
This website provides UDI (Unique Device Identification) information at the point of use in support of rapid and accurate device identification. Users can acquire the UDI-DI barcode, create post-case logs to track what is used during surgery, create, share and print custom ortho set inventory sheets, and acquire an Excel or PDF GTIN download . The UDI information provided on this website is limited to the Johnson & Johnson hospital medical devices portfolio of products.
Problems
- The users took too long to complete a simple task like 'downloading a pdf' or to 'generate barcode'.
- Unclear navigation and visual standards
Following this, usability analysis of the existing site was done using Heuristic principles.
Snippets of the Usability Analysis
1. Post Case Implant Log
2. My Set Templates - Forming Sets
3. Post Case Implant Log - Search Results
3. GTIN Download
3. Overall Observations of Buttons, Icons
Solution
Information Architecture
The navigation model should match with the actual hierarchy on the website to avoid confusion.
The UI should align itself with the user’s mental model to provide intuitive user experience.
The categorization and labelling must be exclusive and intuitive enough to let the users easily know what to expect within
The hierarchy of the site should enable easy findability and access to all the content and features present on the site.
Navigation
Alternate modes of navigation should be present in the website to aid users to navigate. (Does not include Search)
Redundancy should be kept to a minimum to avoid confusing the users and adding unnecessary complexity
The navigation system should be kept simplistic in order to avoid cognitive overload and extra effort on user’s side
The same function / label should do the same thing everywhere throughout the application. Looping of steps should be avoided.
Presentation and Interactions
The representation of the UI elements should allow easy recognition and understanding.
There should be a visual grouping of UI elements to establish easy association of related content and options.
Call-to-action buttons should be clearly highlighted, affordance of UI elements align with the task to be performed.
Typography and Iconography should be consistent across the site, consistency of micro interactions.
Inform the user about what the system is doing, notify user when a task is completed.
Show progress achieved toward goal, particularly if operation takes more than 10 seconds to complete, make available tools/options visible to user (no scrolling required).
Content
The content relevant to the current context should be prioritized over miscellaneous information.
The UI should facilitate only relevant content, in an intuitive simple format so as to provide rich information in an easy-to-understand manner.
All content from the product inventory or the website (global content) should be searchable and accessible.
Wireframes
This is an addition in the new concept to give an introduction to the users, help them navigate through different pages and give some functions upfront to save multiple clicks.
This page gives extra features to users who have access to login data.
The trays were initially aligned one below the other and that was now placed horizontally - 1. to view all data at once 2. to allow easy drag and drop from one tray to another tray. 3. All the edit and settings are grouped together for ease of navigation and lower the cognitive load.
This is an addition in the new concept to give an introduction to the users, help them navigate through different pages and give some functions upfront to save multiple clicks.
Challenges Faced
- A site for medical professionals has its own limitations as it gets too technical to understand.
- Less room for creativity as it is for medical professionals and patients.
- Converting few of the functionalities like 'changing the trays from vertical to horizontal layout' meant that there's an increase in development efforts and had to involve in a bit of convincing.