A digital blueprint

Building digital solutions alongside OSDE

When we met the OSDE team, the company was going through a process of transformation and adoption of a digital culture. With this as a starting point, we joined the UX team to enhance and build processes and methodologies that would enable organic growth of the area and its impact within the organization.

The slogan 'With You, Always' would be the centerpiece of the digital experience for members and providers.

The challenge

To empower teams and build the foundations of OSDE's design process.

What we did
  1. Empower and structure
  2. Build the Design System
  3. Design digital products

1 / Empower and structure

We designed the design process for a digital product

From the first day, we worked alongside the OSDE UX team in defining processes and methodologies that would enhance the growth of the area and accelerate the adoption of a digital culture within the company

We create processes

Transparent and predictable management involves all parties and promotes projects.

We foster collaboration

Teams composed of diverse roles sharing a common goal.

The mission was to enhance the growth of the user experience team, internalize the digital culture, and bring the OSDE philosophy to its digital products.

CHAPTER 1

Relieve. Prioritize. Execute. Revise. Repeat.

Processes provide the ideal conditions for creating user-centered solutions. Don't get us wrong, embracing inspiration and spontaneity is very important, but within a digital product design process where there are various teams, interests and objectives, planning, organization, and predictability establish safe spaces where creativity and solutions can flow.

The 6 premises we apply in structuring our processes are:

In sprints we trust

We believe in planned incrementality and the definition of short-term goals.

Use mappings sessions

We survey and organize all tasks and objectives of the project.

Use Plannings to prioritize

Everything everywhere all at once is a great movie, but projects really needs to prioritize.

Check in the meantime

Beyond the team's daily communication, check-in instances are defined during sprints.

Weekly follow up

Task status is reviewed on a weekly basis to detect problems and/or deviations.

Learn to improve

Retro sessions are the perfect tool to review what happened in the sprint.

CHAPTER 2

We redefine the design process

As teams grow along with the demand placed on them, the margin of avoidable error must be reduced. That is why it is very important to document business needs, start from existing patterns, and rely on the design system.

1

Requirement

The starting point will always be a requirement and/or user history documented and prioritized.

2

Design

Interfaces should initially be based on the Design System and existing design patterns. If not applicable, new solutions should be evaluated.

3

Prototype

Every flow and/or functionality will be accompanied by a prototype for better understanding.

4

Documentation

Components, interactions, and accessibility features will be documented to ensure proper interpretation.

CHAPTER 3

One stack to rule them all

Processes and collaboration are at the core of a design process. That's why we choose a cloud-based technology stack that is accessible from any device, allowing collaboration at all stages and also allowing us to document everything.

With Slack, we stay connected, while in Notion we document everything and track tasks and assignments. Figma is where our designs, prototypes, and Design System live, and Figjam is our playground for exploring and brainstorming.

Adding EGO to OSDE User Experience team was part of our digitalization process, and it's yielding excellent results. We share a people-centered vision, which empowers us and unites us as a team.
Juan Pedro Danculovic Head of User Experience. Grupo OSDE

2 / Build the Design System

Building the OSDE digital experience

The OSDE digital platform consists of countless interfaces that respond to needs as specific as they are important. That's why the solution is not to unify everything into a single solution, but to build a unique language, the digital language of OSDE: flexible, scalable, and consistent across its digital products.

This digital language is what we call the OSDE Design System.

The Design System, a language to build digital experiences

As teams grow and demand towards them increases, the margin of avoidable error must be reduced, which is why it is very important to document business needs, start from existing patterns, and rely on the design system.

CHAPTER 1: DEFINING A CONCEPT

The OSDE experience

All experience design will be centered around people: users, providers, partners, and beneficiaries among others. The focus will be on the need to provide dynamic and everyday solutions from the different digital platforms in which OSDE is present.

Define users
Define principles

Building the experience on a solid foundation of "Principles" that allow us to make decisions throughout the experience design process, which define the personality and added value of our experience.

Dialogue
App → User

Generate conversations with the user. Close and transparent communication that conveys trust.

One thing at a time
Faceted and dynamic

Being clear in communication, one thing at a time, simple and predictable, conveying confidence in every user interaction.

Start with a clear path
Visual order

Being consistent in organizing interfaces, respecting users' cultural patterns.

I want to do it
Predictable & secure

Actions anticipate what will happen. Feedback communicates and guides us. Uncertainty is not a limitation.

Immediacy
For every day

Prioritize actions that solve everyday situations.

Build messages

Interfaces are built around content, and the way it is structured will determine the user experience.

Context
Know the user

OSDE works for +2,000,000 members and +160,000 providers throughout the country.

Service
as a message

Build a message that is close, human, and simple. Take into account the user and their way of understanding. Adapt to their evolution over time.

The foundations
of the message

Colloquial and respectful, simple and concise, we speak like people, offering clear actions that promote certainty.

Minimalism
Effective and concise

The content should be concise so that the person can complete their objective without distractions and with the least possible effort.

Visual support
Hand illustrations

Hands represent help, companionship, and closeness. We will use them to reinforce messages.

Investing time and effort in exploring design principles in the early stages of a project is undoubtedly one of the most important strategic decisions in the lifecycle of a digital product.
Julio Spinetto Chief Design Officer at EGO

CHAPTER 2: BEHAVIOR

Behavior patterns

Consistency and recognizability of interface elements are key concepts in building a scalable and consistent design system. It's not about making everything the same, but maintaining easily recognizable criteria that allow users to appropriate interactions and interact with them confidently and autonomously.

Feedback

Communicate the user the result of an action or process they have performed. It will depend on the moment they are in, its level of importance, how much attention they should pay to it, if a confirmation is needed, if it is informative, etc.

Splitter

They offer the user different actions on the same screen. Their function is to redirect, trigger flows, and communicate different states. The use of it depends on the importance of the decision that the user has to make.

Skeleton

Communicates to the user the content of a screen before it is actually presented on the screen.

Spinner

They are used when retrieving data or performing actions that may take some time, and they help to notify users that the loading is in progress.

Illustrations

Illustrations are used to provide better visual context, depending on the required instance.

CHAPTER 3: ACCESSIBILITY

Designing for all

In a broad sense, 99.98% of people in the world have some type of disability at some point in their lives. Understanding the accessibility of the product can improve usability for all users and thus a better experience.

Accessibility as a criterion

It's not just limited to the Design System guidelines, but also has references that update components, approve new standards, and instruct other teams.

Part of the design process

Accessibility has its own track of tasks, deliberations, and weekly meetings to constantly discuss updates and improvements. We take it seriously.

Within the design system
Chromatic palette

Contrast testing: colors used as backgrounds for text.

Typography

Use font sizes larger than 14px whenever possible. If using smaller sizes, ensure high contrast.

Iconography

Include nomenclature and alternative text for screen readers to identify the elements.

Keyboard navigation

Determine the order and appearance of keyboard focus when the TAB key is pressed.

It has been a very positive experience. We have formed a good team where there is excellent communication and a quick understanding.
Eduardo Bacca UX Analyst at OSDE

FINAL CHAPTER: THE LIBRARY

A knowledge base

The library has all the documentation for each element in the design system - including its uses, variations, use cases, and states. Make sure to use these components when building experiences.

Centralized

We have a team dedicated to updating components, approving new standards, and providing guidance to other teams.

Part of the design process

The Design System has its own track of tasks, deliberations, and weekly meetings to discuss updates and improvements.

Easy to use

The Design System is designed to be user-friendly and easy to navigate, making it accessible for anyone who wants to understand the OSDE digital experience.

Always beta

The Design System is constantly evolving to provide solutions for people's interactions and needs.

This is how it is composed
✨ OSDE Digital Experience
🔤 Typography
🦾 Accesibility
➡️ Buttons
✅ Feedback
📄 Surfaces
📐 Grids
🙌 Ilustrations
🧩 Behavior patterns
💬 Data Display
⛵️ Navigation
⌨️ Text Fields
🎨 Chromatic palette
😊 Icons and logos
🏗 Component directory
📱 Device System
🎚 Selection Controls
Solid and robust design systems enable the creation of flexible and consistent experiences.
Charo Espinosa Chief Production Officer at EGO
3 / Designing digital products

We design solutions for people

We work together with the OSDE team and their stakeholders to design solutions that meet the diverse needs of their users, all while following our design process.

Digital Credential

It's at the heart of a big habit change, and it's impossible to ignore its usefulness. With this new app, you can now easily manage your family's credentials and share them with third parties without losing control of your data and ensuring security for the providers.

Online medical consultation

During the lockdown, we discovered new ways of relating to each other, and one of them was through video calls. We realized that this could also be a valuable tool for getting medical advice quickly. That's why OSDE introduced online medical consultations, which offer greater flexibility for their members and new formats of care for their providers.


You can conduct consultations from any device, and all notes, prescriptions, and shared files are documented and archived for future reference

Emergency Assistance

It's a story told in two different ways: the associate who requests and informs, and on the other side, the medical staff managing the requests to provide attention to them.

Medical assistance

Request emergency medical attention directly from your phone by indicating which member of your group needs it, providing their current health status and symptoms to determine the best possible care.

Urgent care

The other side of the medical assistance coin: with this app, ambulatory medical staff can manage requested visits and leave extensive documentation of everything that happened with the member.

Thanks to OSDE's collaborative spirit and desire for improvement, we were able to form creative, fresh, and agile teams that know how to create user-centered solutions. We are grateful to be part of this ambitious project.
Emiliano Porterie Chief Operations Officer at EGO