An app for the Marseille area firemen
Damien Lockner
Here is a little come back on one of our first 'full-stack' project, from the UX research study until the application publication.
To open this new blog, let's start with a veteran project from 2013, that has really set my heart.
This project is an application from Mermed, the association of the practitioners of the Bataillon de Marins-Pompiers de Marseille (Marseille Area Firemen).
Context and project holder needs
Emergency practitioners have to intervene un many varied, complex situations dans des situations variées, with a strong time pressure. More, much knowledge and skills are required for the diagnosis, the treatment choices, or the relevant acts.
Yet, cognitive capacities for remind, synthetic analysis, and decision can be affected by the stress or the level of experience.
Thus, historically, emergency practitioners were using a book when they needed references. However, this volume suffered from drawbacks: it was somehow heavy and cumbersome, and it was not so quick to consult.
Mermed thus developed a first iOS application in order to get a digital alternative to the cumbersome but essential book.
Mermed identified several limits to this first version:
- Many usability issues (identified by our user researcher colleague Florian Such)
- A distribution limited to Apple devices
- Content updates requiring systematic and continuous application updates and re-publications
Indeed, knowledge and protocols are not frozen nor universal. The content proposed through the application come from an important synthesis work realized by the association of emergency practitioners, identifying the good practices, and combining the recommandations of each practitioner.
Thus, a background editorial work constantly feeds the application with new content.
In that context, Mermed contacted Spicy Life to design a new version of the SMUR protocols application.
Proposed solution
Before getting fully involved in the development process, we began to reconsider the project holder request: the essential stage of "reformulation of the initial request", characteristic of any user-research process. From this reformulation, we identified the goals to reach, the corresponding use experience, and finally the technical solution to implement.
This approach is quite usual for most of our projects:
- Reformulation of the initial request
- Definition of the use goals
- Definition and design of the use experience
- Selection of technical options
- Realization
Therefore, developement is just the tip of the iceberg; a rigorous process was implemented before.
Initial request and use goals
General usability
The study from Florian highlighted usability deficiencies in the pre-existing version. He pinpointed issues with location, consistency and informational density.
The specific context of use is particularly stressfull; stakes are important, time pressure is strong, and environmental conditions are rarely calm. In this specific context, our cognitive limitations may be reached. Usability issues are therefore particularly important to quickly locate an information:
- Facilitate the location
- Limit the navigation steps
- Accelerate long page browsing
- Facilitate the application learnability by a consistent and rigorous information design
User expertise
The project holder early brought up differences in the use styles according to the users level of expertise. The "beginners" need precise and comprehensive information in order to fulfill their training, notably outside of a field practice. On the other hand, the "experts" need the application during their interventions; they require a synthetic, clear, and quick-accessed information.
Thus, Mermed proposed the idea of a "summary" mode, which could actually complement the rich and sharp information of each protocol with a short and operational alternative version.
Content update and offline use
An other issue consisted in the infrastructure matching the specific editorial procedures of the practitionners. Several design constraints were identified:
- Changing content independantly from the application code.
- Having "draft" content at disposal, unpublished, facilitating the collaborative work of the editors.
- Synchronizing the client applications.
- And allowing an offline use of the application.
All these "use goals" established a set of "design constraints", shaping the optimal use experience.
Use experience
The first step of the design process consisted in the identification of the constitutive items of the overall set of protocols and therapeutics (medicine treatments). The legacy structure used by the firemen was already quite clear.However, the structure was not systematically identical, and the labels sometimes varied.
An information architecture study, with a controlled vocabulary setup and a rational use of the pre-existing color code, standardized and improved the consistency of the protocoles structure, constituted by more than 600 components.
This architecture design guided the transformation of the screen layout in order to optimize the location and the navigation in the application. Several options were hold:
- A summary mode and a detailed mode, switching for one or the other being performed by a simple button, and this choice being saved for the later sessions.
- A search engine, filtering without having to validate the input.
- A "favorites" mode for protocols and therapeutics, allowing to build a set of "critical" or often required protocols and therapeutics.
- A secondaty navigation using the defined color code scheme, in order to get short access to a specific section.
Besides the presentation of information pages, the application proposes as set of calculation tools, for instance to quickly indicate a burn level, a new born vitality, an IV flow rate.
A particular care was taken to render a fluid interaction, and minimize the number of the required actions to obtain a result.
Technical options
We chose to build an hybrid application on an HTML5/CSS3 basis. Indeed, bound to Phonegap/Cordova, a single development effort allowed a publication both on iOS and Android. A WebSQL local database access was also provided by Cordova. This infrastructure allowed to synchronize the application content with a distant database. The editorial content management system was deployed from a customized code in order to simplify and accelerate as much as possible the data capture tasks. Also, interactive items (images and tables to be displayed fullscreen) had to be encoded to be recognized by the client application in JavaScript. We really appreciate minimalist and effective CMS, but this will be the subject of an other dedicated post...
The application was then composed in a global structure whose "pseudo-pages" were dynamically loaded with JavaScript. Several options of infrastructure had been compared at the time. We had chosen jQuery Mobile before finally turning toward an exclusive development. None responsive framework was then proposing both a rich transitions and interactions library, and an easy to customize CSS structure. I think we will never build any project with jQuery Mobile! Since then, "one page" application frameorks matured, and they would have drastically sped up our development process...
At last, most of the visual graphics are presented through SVG, for the icons going with the labels, as for the interactive graphics required by certain pages, such as burn calculation.
Finally...
This collaboration with Mermed will have been particularly rich: this wasd one of our first "full stack" projects, from the user-research study until the applications publication. We could therefore propose interesting design orientations, in terms of information and interaction design, and to identify technical solutions matching the specificities of the requirements.
The application can be downloaded on Google Play and the AppStore.
If you have any remarks, questions, or comments, do not hesitate of course to send a little message. It will be a pleasure to discuss with you.
