Timeline
April 2022 – Today
Role
Mobile Design
Lead Product Designer
Product Features
Redesign and addition of features across all screens in Carnet Mobile.
Tools
Figma
Figjam
Matomo
Notebook
The Carnet app makes it easier to handle administrative and medical procedures at a healthcare facility. It allows you to prepare for your stay and manage information related to your care: complete pre-admission procedures remotely, send and receive medical and administrative documents, view your appointments and related instructions, access facility maps and information about services, and securely save and store your own appointments and documents on your phone.
The Team
Carnet mobile is one of the products in the Enovacom Patent Link suite, which includes Carnet mobile/web for patients, as well as EPL Admin and EPL Établissement—solutions designed to help hospitals manage and edit Carnet records. EPL is one of many products offered by Enovacom, a major player in the e-health sector and a subsidiary of Orange Business.
The EPL product team consists of a Product Owner (PO), a Product Manager (PM), two front-end developers, a mobile developer, three full-stack developers, a Quality Assurance (QA) specialist, and me as the Lead Product Designer.
Product Issues
The screens for the Carnet app, originally designed and developed by a Paris-based communications agency, did not comply with current UX standards, which made the service confusing for users. In addition, new features were constantly being added to the service, which is why I took over the project entirely in-house.
Kickoff
The Organization
Together with the Product Owner (PO), we decided to stop working separately and instead collaborate by holding weekly design meetings. These sessions allowed us to work together on the UX and discuss workflows. It was also an opportunity to present the new mockups to the developers, gather their feedback on the feasibility of each new feature, and understand future requirements identified by the Product Manager (PM).
Take stock of the current situation
The Answer to the Solution
In light of these numerous issues, we decided to take stock of the most frequently used features, rethink those that were essential to the app’s proper functioning, and finally, ensure consistency between the mobile and web versions
Step 1: Understand the users' workflow.
The development team quickly implemented Matomo, a tool for tracking user behavior within a given application.
We were able to extract some key data, such as:
– The average time a user spends completing a pre-registration.
– User utilization of the document upload feature.
– The typical user journey and identified opportunities for improvement.
Step 2: Ask users for their feedback.
Carnet’s main goal is to streamline the hospital pre-admission process, which involves receiving appointment information and uploading identification and medical documents. After this essential step, the PM and PO decided to solicit user feedback directly through a fun and quick-to-complete satisfaction survey.
Step 3: Defining the pathways.
Once the research phase and the collection of user feedback were complete, I began defining the user flows using the Figjam tool.
- What steps would the user go through?
- What relevant information should we have shown him, and when?
Once these user flows had been tested and approved, I was able to start creating wireframes for the various screens.
Step 4: Developing a visual identity and a design system.
From the very beginning, the product featured an orange “DA.” Building on that foundation, we had to create an entire graphic and visual universe. First, I created illustrations that helped simplify certain pages, such as error pages, empty states, and other redirect pages. These illustrations were used on both the Carnet Mobile app and the website.
To create the design system, the agency drew on the Material component library, specifically MUI. We used this as a foundation for the typographic scale, but we modified the colors to better reflect Carnet’s identity.
The Results, Two Years Later
Over the past two years, the app has evolved in terms of both user experience and visual design. Below are screenshots of the new interfaces, an example of how the app is featured in app stores, and the product’s website. Find the app in the App Store or on Google Play.
Available on the app stores
The app had already been released on Google Play and the App Store before I joined the team. I was responsible for creating the visuals for those platforms. To test the app in a real-world environment, the developers would publish it to the Microsoft App Center. If the app’s behavior was approved by the QA team and us designers, the product owner would then decide to release it to the app stores.
Creating a one-pager
To introduce the Carnet service and provide access to the website, a page has been created to highlight Carnet's benefits, its key features, and user reviews. You can view it on the website by clicking right here.
What happens next?
Let’s take stock after two years of work on the Carnet project, both for the web and for mobile. We’ve succeeded in moving the app in the right direction: more than 98% of the screens have been redesigned, and the user experience has been improved. There is now true consistency between the web and mobile versions, thereby resolving the initial issue.
However, there is still work to be done; a digital product is never finished and is constantly evolving—whether that means adding or removing certain features or adjusting the product’s branding. The app is being rolled out in a growing number of healthcare facilities, and their feedback will have a direct impact on its development.
When it comes to work organization, it’s essential to take the product design into account at every stage of its development to ensure consistency across all screens. Today, my contributions to the Carnet product have allowed me to take on a more cross-functional role, involving the implementation of a Design System and the management of a Front-End Guild that impacts all Enovacom products. Feel free to to contact me if you’d like to learn more.
