Roche Diabetes Care

Roche Diabetes Care

Roche Diabetes Care

Case study

About Roche Diabetes Care

About Roche Diabetes Care

Unified platform project for health professionals and patients for diabetes care and Roche Accu-chek products.
Roche Diabetes Unified Portal (and Accu-chek) is a portal that seeks to organize and unify in a clear and concise manner all the information, products and solutions - both digital and product - that both patients and health professionals need for the treatment of diabetes. diabetes.

Unified platform project for health professionals and patients for diabetes care and Roche Accu-chek products.
Roche Diabetes Unified Portal (and Accu-chek) is a portal that seeks to organize and unify in a clear and concise manner all the information, products and solutions - both digital and product - that both patients and health professionals need for the treatment of diabetes. diabetes.

Project goals

Project goals

The project consists of the creation of the professionals' portal, taking into account its extensive content tree as well as the diverse needs of each potential user - what information they would need to access, how they currently access it, etc. At the same time, this had to be integrated with the design and brandbook system already acquired and currently in use on the site, providing new solutions for the most complex and extensive processes without losing sight of the identity of the product.

The project consists of the creation of the professionals' portal, taking into account its extensive content tree as well as the diverse needs of each potential user - what information they would need to access, how they currently access it, etc. At the same time, this had to be integrated with the design and brandbook system already acquired and currently in use on the site, providing new solutions for the most complex and extensive processes without losing sight of the identity of the product.

The construction

The construction

For this project we used a methodology reflecting the five stages of the Design Thinking method but with some adjustments related to the project needs like the relevance of the prototyping stage and the evolution of the navigation and design elements.

For this project we used a methodology reflecting the five stages of the Design Thinking method but with some adjustments related to the project needs like the relevance of the prototyping stage and the evolution of the navigation and design elements.

Business information

Related areas:
* UX/UI Design
* Project management & Delivery management

The process

DEFINE

  • User Persona

  • Pain Points

  • Desktop research

  • CardSorting

  • Insights

IDEATE

  • MVP

  • Sitemap

  • Low-fi Wireframe

PROTOTYPE

  • Hi-fi Wireframe

  • Mockup / Sample pages

  • Functional prototype

VALIDATE

  • Improvement report

  • Heuristics

Defining the goals

Roche -and Accu-chek- consists of a product with an identity already formed and known among its users, so part of our challenge was to integrate this new section within the existing design system, while establishing a consistent and easy-to-follow logic for its users with the expectation of solving their main needs.

  • A complete portal, with clear navigation that allows you to find the necessary information easily

  • A trusted product that also serves as an introduction to the documentation necessary to operate the various Roche / Accu-chek products and platforms

  • A reliable source of information for updates and recommendations for both patients and professionals.

Unify user experience

Friendly, approachable UI

Organized, clear information

Empathize with users and their needs

Business information

Related areas:
* UX/UI Design
* Project management & Delivery management

The process

DEFINE

  • User Persona

  • Pain Points

  • Desktop research

  • CardSorting

  • Insights

IDEATE

  • MVP

  • Sitemap

  • Low-fi Wireframe

PROTOTYPE

  • Hi-fi Wireframe

  • Mockup / Sample pages

  • Functional prototype

VALIDATE

  • Improvement report

  • Heuristics

Defining the goals

Defining the goals

Roche -and Accu-chek- consists of a product with an identity already formed and known among its users, so part of our challenge was to integrate this new section within the existing design system, while establishing a consistent and easy-to-follow logic for its users with the expectation of solving their main needs.

  • A complete portal, with clear navigation that allows you to find the necessary information easily

  • A trusted product that also serves as an introduction to the documentation necessary to operate the various Roche / Accu-chek products and platforms

  • A reliable source of information for updates and recommendations for both patients and professionals.

Unify user experience

Friendly, approachable UI

Organized, clear information

Empathize with users and their needs

DEFINE - the design process

DEFINE - the design process

DEFINE - the design process

The design process at Roche went through several instances of feedback, iteration and revisions, not only to ensure that the product was as complete as possible but also to establish the foundations of competition, the proper use of established design elements and their correct integration. both with navigation and with the design of the other areas on the same site.

The Research

The Research

The Research

One of the main concerns when starting the project was to understand how other products in the field developed and showed their technological advances, while recognizing the lack of progress in this area to date. The existence of multiple sites, platforms and products led to the need to create a unified and clear space where information can be received, evaluated and used with ease.
Some of the more important findings were:

  • Easy contact with remote assistance

  • Dedicated information for both patients and professionals

  • Patient found by name, ID or filters

  • Training resources & user support options

  • Video tutorials for setup and use

IDEATE - MVP construction

IDEATE - MVP construction

IDEATE - MVP construction

In this step we definey the scope of the product, creating an MVP of most relevant and needed features. This will then be passed to every other part of the group, or in this case created alognside with them.


MVP

An MVP in Product Design is a Minimum Viable Product and it refers to creating the core features of a product. By defining the main features of a product, it helps teams prioritize its development goals and validate the product concept quickly with minimal effort and cost. This allows teams to receive feedback on the product early, identify issues or areas that need improvement, and stay focused on developing a product that customers will benefit from.

Clear and useful guides and FAQs

Reports easy to share & print, High Quality information

Patient list with name, tags and filters

HCP can modify pump settings

Separated tabs and sections, easy to navigate

Multiple language options.

Multiple data sharing / clear compatibility

Profiles for patients and HCP

Technical aspects to keep in mind:

Technical aspects to keep in mind:

Technical aspects to keep in mind:

  • Multiplatform usage: made for both desktop and mobile view is important that the information the users dispose of is readily available whenever and wherever they need it, being a mobile, tablet or PC user. For this reason all pages are designed contemplating the three main breakpoints.

  • Information is key: The organization, divisions and pages focuses specially in the distribution of information, allowing users with all technological approaches to read and evaluate the information provided according to their profile - patient or healthcare professional.

  • Integration with an existing system: Roche and Accu-chek have not only an already stablished identity that needs to be respected when working in products related to them.

IDEATE - Navigation and hierarchy

To mark the navigation hierarchies, in this case, a 'mega menu' was created where the necessary categories can be easily accessed. This format provides the ability to incorporate or remove sections depending on the needs of each site, taking into account that Roche's offers or properties in different regions may vary, with products enabled or products not available.


Information Architecture

IDEATE - Navigation and hierarchy

IDEATE - Navigation and hierarchy

To mark the navigation hierarchies, in this case, a 'mega menu' was created where the necessary categories can be easily accessed. This format provides the ability to incorporate or remove sections depending on the needs of each site, taking into account that Roche's offers or properties in different regions may vary, with products enabled or products not available.


Information Architecture

To mark the navigation hierarchies, in this case, a 'mega menu' was created where the necessary categories can be easily accessed. This format provides the ability to incorporate or remove sections depending on the needs of each site, taking into account that Roche's offers or properties in different regions may vary, with products enabled or products not available.


Sample menu

Sample menu

This iteration was mainly made from an scalable point of view, in a site that’s constantly expanding with new products and new information it’s crucial to be able to adapt and overcome any potential problem before it presents itself in the developing or implementation process.

IDEATE / PROTOTYPE - Low-fi & Hi-fi wireframes

IDEATE / PROTOTYPE - Low-fi & Hi-fi wireframes

To establish the fundamental interactions and adaptations to the original system, before the mockup design can begin, it’s recommended to create a low content version of the same screens - This is often referred as ‘Low Fidelity wireframes’, ‘fidelity’ meaning how close it is to a finalized design.
Since this step we were already keeping in mind the existence of these breakpoints where de design should adapt, making the first wireframes responsive al well for an easier passage to Hi-fi wireframes or mockups.

IDEATE / PROTOTYPE - Low-fi & Hi-fi wireframes

To establish the fundamental interactions and adaptations to the original system, before the mockup design can begin, it’s recommended to create a low content version of the same screens - This is often referred as ‘Low Fidelity wireframes’, ‘fidelity’ meaning how close it is to a finalized design.Since this step we were already keeping in mind the existence of these breakpoints where de design should adapt, making the first wireframes responsive al well for an easier passage to Hi-fi wireframes or mockups.

PROTOTYPE - Hi-fi wireframes

PROTOTYPE - Hi-fi wireframes

One of the main objectives in this design is the insertion of the visual features currently used in Accu-chek products within a unified platform, therefore attention to detail was one of the main characteristics when managing wireframes and mockups.

PROTOTYPE - Hi-fi wireframes

One of the main objectives in this design is the insertion of the visual features currently used in Accu-chek products within a unified platform, therefore attention to detail was one of the main characteristics when managing wireframes and mockups.

One of the main objectives in this design is the insertion of the visual features currently used in Accu-chek products within a unified platform, therefore attention to detail was one of the main characteristics when managing wireframes and mockups.

One of the main objectives in this design is the insertion of the visual features currently used in Accu-chek products within a unified platform, therefore attention to detail was one of the main characteristics when managing wireframes and mockups.

PROTOTYPE - Wireflow

PROTOTYPE - Wireflow

PROTOTYPE - Wireflow

To reinforce this journey and the importance of clear and consistent navigation, another of the elements that were kept in constant iteration was the construction of various 'wireflows', showing the connection and route of the various screens on multiple devices.

Wireflows are incredibly useful in UX/UI projects because they combine wireframes and flowcharts to map out the user interface design and user journey simultaneously. This integration provides a clear, visual representation of how users will interact with the interface, highlighting the navigation path through different screens and user interactions. Wireflows facilitate early identification of usability issues, ensure a cohesive user experience, and enhance communication among team members and stakeholders by providing a common, easily understandable visual language.

To reinforce this journey and the importance of clear and consistent navigation, another of the elements that were kept in constant iteration was the construction of various 'wireflows', showing the connection and route of the various screens on multiple devices.

Wireflows are incredibly useful in UX/UI projects because they combine wireframes and flowcharts to map out the user interface design and user journey simultaneously. This integration provides a clear, visual representation of how users will interact with the interface, highlighting the navigation path through different screens and user interactions. Wireflows facilitate early identification of usability issues, ensure a cohesive user experience, and enhance communication among team members and stakeholders by providing a common, easily understandable visual language.

The conclusion

The conclusion

The conclusion

The importance of an accessible product that solves user problems.

This project not only allowed us a more active participation in a role with multiple characteristics from research to the comprehensive design of the system shown, but also the implementation of several tools that were constantly updated in favor of the health and support of users.

Do you want to create a complete and innovative experience?

Do you want to create a complete and innovative experience?

We're here to help you achieve it

We're here to help you achieve it

Barcelona - New York - Buenos Aires

Barcelona - New York - Buenos Aires

Do you want to create a complete and innovative experience?

We're here to help you achieve it

Barcelona - New York - Buenos Aires