Mirion Web Information Architecture Redesign
A seamless and integrated website experience to improve engagement and the overall experience for the next iteration of Mirion.com (for medical and industrial).
My Role
Prototype Development, Design System, UX/UI Design, IA Concepts, Stakeholder Facilitation and Implementation, Design Strategy, IA Mapping
Timeline
May - Sep ‘22
Deliverables
Key Frame Templates, Web Design System, IA Sitemap, Userflow Charts, Brand Style Guide, IA Concepts, IUX Framework, Customer Insight Report
Lifting the Brand and UX Design of a B2B Platform
Industry
Industrial radiation solutions
Manufacturing processes
Company Size
2,700+
Timeline
June - Sep '22
My Role
Prototype Development, UX/UI Design, IA Concepts, Stakeholder Facilitation and Implementation, Design Strategy
Objective
Due to a decade of acquiring various subsidiary companies, the incorporation of multiple brands over time led to inconsistencies in the public presentation and accessibility of support services on the Mirion website, making its current structure inconvenient, unhelpful, and unappealing.
Solution
The call for brand acquisitions and difficult customer support access allowed for my team delivery of the informed Mirion customer website, a stakeholder-guided design system, brand style guide, multiple user flowcharts and sitemaps for IA definition, alongside customer research insights that informed the designs.
1,100+ pages
Distilled to 15 key frame templates
96%
Estimated conversion rate from customer base
23%
Estimated decrease of bounce rate
How might we enhance the Mirion website's usability by adopting a new navigation structure, minimizing top-level options to promote efficient search, discourage manual drilling down, while preserving the existing site's framework?
Main Deliverable: Screen Captures
Key frame templates showcase the visual lift and revamped information architecture that has been applied to the Mirion website (now with a combined taxonomy of medical and physical sectors).
In this solution, users garnered more customer support through less product searches (over 1.1k pages distilled down to 15+ key templates).
Navigation Revamped
Global navigation infrastructure became consolidated and eliminated the disconnect between the medical and industrial sectors as requested by client team.
LANDING
Before //After Redesign
UNFURLED MENU
Before //After Redesign
Updated Functional Keys & Tokens
Search bar mainly focuses on itemized pages seen in Products and Solutions tabs rather than all items included in the company sitemap (such as ‘Events’ or ’Company News’).
The Mirion account access was removed in favor of providing more support development and the drive toward hands-on customer service after discussion.
PRODUCT SUPPORT & REPAIRS
Before // After Redesign
SEARCH
Before // After Redesign
Distilled Infrastructure
Secondary navigational space was allocated with definitive sub-pages for easy access for returning customers.
Product details pages now include more interwoven support access and are guided by a narrative centered around storytelling, connecting high-level elements and resources throughout the platform.
PRODUCT DETAILS
Before // After Redesign
KNOWLEDGE HUB
Before // After Redesign
ABOUT PAGE
Before // After Redesign
COMPANY NEWS
Before // After Redesign
CONTACT
Before // After Redesign
Preliminary and Subsequent Screen Captures
Here are a few final UI mocks to showcase the visual lift and revamped information architecture that has been applied to the Mirion website (now with a combined taxonomy of medical and physical sectors).
Major improvements for measurable impact:
-
Global navigation infrastructure became consolidated and eliminated the disconnect between the medical and industrial sectors as requested by client team.
-
Search bar mainly focuses on itemized pages seen in Products and Solutions tabs rather than all items included in the company sitemap (such as ‘Events’ or ’Company News’).
-
Secondary navigational space was allocated with definitive sub-pages for easy access for returning customers.
-
The Mirion account access was removed in favor of providing more support development and the drive toward hands-on customer service after discussion.
-
Product details pages now include more interwoven support access and are guided by a narrative centered around storytelling, connecting high-level elements throughout the platform.
Before //After Redesign
LANDING
DESIGN PROCESS
Team Credit
Team management was restricted to two design researchers, one digital experience director, and myself, one user experience designer. My involvement began in June 2022 upon introduction to the project and I constructed a low-fidelity desktop prototype for usability testing in order to gather insights from Mirion customers at the Mirion Connect Conference.
Client Focus
Due to a decade of acquiring various subsidiary companies, gaps in medical service offerings became apparent. The incorporation of multiple brands over time led to inconsistencies in the public presentation and accessibility of support services on the Mirion website, making its current structure inconvenient, unhelpful, and unappealing. Both employees and users alike had difficulty referring to the site.
Constraints
Owing to a series of acquisitions involving child companies over the past decade, gaps in medical service offerings emerged. The team did not refer their current design system, or lack thereof. This created the need for a newly recognizable system for reference and showcase future growth.
Main Industries of Focus
Laboratory & Scientific Analysis Systems
Radiation Measurement & Health Physics Instrumentation
Search & Radiological Security Systems
Cameras for Extreme Environments
& More...
Early Stakeholder Findings
This is a selection from the map for the existing Mirion.com site. As the primary goal for the project, we will look to optimize the navigation and elevate key features & content. We began by taking a look at the existing information architecture of the UX website.
Relevant Goals
-
Increase ease of use for 1st time visitors
-
Hide organizational complexity of business units
-
1 clear set of patterns to more clearly map to customer mental models
-
Reduce steps to find products and services of interest
Surface Opportunities
-
Reduce depth of site hierarchy (Currently up to 8 layers beneath ‘Home’.)
-
Fully leverage filtering controls to reduce layers of sub-categories
-
Establish clear hierarchy within navigation menus
-
More centrally promote search to visitors
-
Consider contextual contact forms to connect visitors with appropriate Mirion personnel
-
Consider surfacing ‘Favorites’ feature so new visitors can save products of interest for review and encourage account signups
-
Consider ‘Comparisons’ feature to help visitors distinguish similar SKU’s
Emerging Customer Personas
In refining Mirion’s web information architecture I also collaborated alongside the research practice to ensure that the correct terminology and interaction points were covered in the testing prototype for the assigned persona archetype definition.
Proposed IA Concepts
Leveraging the ongoing learnings from Phase 1 (Discovery & Design Strategy), the team explored design concepts intent on addressing user needs to drive a more seamless and integrated iteration of the Mirion web experience.
Suggested Key Screen Templates
“Direct Access”
Wide and Shallow
By default, for new visitors, expose the major customer segments at the top level of navigation. Provide direct access to the all the major Mirion customer sections.
“Customer’s Choice”
Hub and Spoke
This model allows each ‘spoke’ of the site to have its own specialized content for the audience while retaining a consistent navigation scheme and templates.
“Deceptive Minimalist”
Narrow and Deep
Similar to the current architecture, but with as few top-level navigation options as possible to encourage search and discourage drilling down manually from the menu. Has the potential to preserve most of the existing site’s architecture.
Preliminary Research Findings & Initial Testing
For the IUX framework, I participated in guided workshop sessions with the Mirion team where we broke down each page to its base components - working collaboratively to deliver the UX concept initially chosen after a switch-up coming out of our high-level research findings.
For sensitivity and confidential reasons, the IUX framework has been blurred out.
Keep in mind - this is not an evaluation to see how well a user performs a task. This is an exploration and witness account of their take on the navigation system and how they would go about solving their job to be done.
High-level Findings
Based on what was found, both the team and stakeholders understood the correct prioritization and hierarchy shift that needed to take place when narrowing down and providing new ways to fully experience what they offered to their customers. With a combination of all three concepts, we moved toward a global unified IA that would encompass and meet the needs garnered from these main customer insights by breaking down the granular components of each page, specifying on the featured offerings, and elevating the ‘Product’ and ‘Solutions’ categories.
UX Global IA Definition
The chosen design direction required quick output for easy transfer on web. With the developer and system requirement stakes, technical decision-making had to be clarified swiftly. The preference looked at solutions versus products with terminology clearly delineated. With this in mind, we combined the first two concepts together along with stakeholder feedback.
Refinement after customer feedback
After synthesizing our customer feedback, we updated our preliminary wireframes to communicate a single intended experience. This will become the foundation for a detailed blueprint of how the system should behave to guide developers.
Identifiable developer specifications
In addition to visual design development, we asked questions about development-ready specifications outlining the interaction behaviors, layouts, colors, and fonts for each key screen state and UI element.
An exemplifier of how we went through each chosen key template with our stakeholders.
Visual Content Infrastructure
I took the needed components and made multiple variations in visual exploration while playing around with the state of these items and how they fit together in short segments based on our research findings, competitor web analysis, and target market. Focusing on both the taxonomy and nomenclature, each page correlated to a style of consistency and hierarchy.
Low-fidelity Wireframe Development
We were focused, at a high-level, on the major pages that could be accessible through the global drop-down menu and were commonly used by the key customer groups. This gave us a top-down plan for design strategy and simplified developer hand-off.
Layout Template Specifications
Buckling down into development, the team worked directly with HappyCog for vision execution. By speaking to topics related to XYZ, we broke down each major page component in weekly sessions.
Applying Stylistic Themes with Stakeholder Feedback
An exemplifier of how we went through each chosen key template with our stakeholders.
Templatizing Solutions
Once aligned on key content prioritization and page specifications, I went in to apply the chosen stylistic theme with stakeholder feedback. With each iteration, the team set up regular check-ins and group meetings to ensure the end result doesn’t differ too much from the expectations. Collaboratively tweak design as new technical requirements are uncovered.
Screen grabs from the design system below:
✏️ My top 3 learnings from Mirion
Leveraging a brand - the need to craft a narrative that accentuates the user journey of the ideal customer while keeping in mind the main research insights and the needs of other users.
Bridging understanding of design to front-end development and hand-off - learning terminology and business expectation. Speaking to one can be speaking to all.
Personal time management - building a design system (or the intent of a system) takes up a lot of time outside of facilitating client sessions. We may have had more time on this if both the concept and taxonomy of the website were in a better place prior to design development.
🚩 Painpoints from Current Mirion Web Experience
Sitting down with the stakeholders customers from their medical and industrial sectors, we centered on areas of strength, problem spaces, and feature gaps. Starting points for the project’s beginning looked at rationale such as:
-
Lack of available product information, in the right order and level
-
Navigation access caused customers to go to the wrong pages and would not solve their problem
Conference Testing Plan
Moving ahead from our stakeholder and customer interviews, we decided to test early concepts at the Mirion Connect Conference. Research identified conference learning goals for points of engagement and user needs addressed within three modalities: navigation, search, and paths to connect. I worked directly with stakeholders on incorporating the data findings that informed the IUX framework for Mirion’s customer bases into task flows for the conference test prototype that I drafted alone.
Wireframe Development
As a team, we went through multiple iterations of clean, structured design layouts and formats alongside a lift to the web information architecture and relevant content in each key screen template. We aimed for an AA level of conformance under global WCAG guidelines and the current customer base.