COVID-19

Case study

Problem

The company were I worked: Inmersys was contacted by the government: department of healthcare, and the Mexican Association of Anesthesiologists. They asked us to develop an app that would help on the process for setting up an endotracheal tube with the lesser amount of risk for contagion. Many doctors were getting Covid-19 while performing this process.

The most challenging part: We had a total of three weeks to develop and post this product on the app in stores. To see the final app, do click on the image at the right.

Final Splash Screen of the home website
Drawings of the storyboard developed for the app

Approach

It was our second week working from home. And we were two Product designers working on this project, the Design lead and myself, so what we did was to spend a few hours studying all the videos and material provided by our clients. We needed to make sure we understood the process... So we set up a video call and while the leader described her ideas, I would share my screen while I sketch the ideas out on my tablet so we could have visuals ready to share. Normally we do this on one of the whiteboards we have at the office, or with many post-its on the wall.

Prototype

We started with paper prototypes, sketch them down in Photoshop very quickly and then we would make Low Fidelity of them in Adobe XD. When we agreed on the flow, we sent it to approval for the doctors.

Then we developed a clickable prototype in Adobe XD. There was some back and forth and we had to develop icons, outlines for the 3D models, working with modelers.

One of the most interesting parts of this app is the fact that, if you make a mistake, the phone would vibrate a little and display an image that is rather unpleasant.


Image of the prototype developed for this project.

We required about five iterations to reach the final prototype, that you are seeing in this screen. This is the prototype we sent to the doctors who evaluated the veracity and accuracy of the information displayed on the screen and how well landed the idea was. Also how playable the product was going to be.

Look and Feel

After deciding on the User's journey (And before the high fidelity prototype was finished) we went on to develop the look and feel. We had to work fast, and on the weekends. This is a screenshot passed on by our modelers, and some Photoshop and illustrator magic to make it look like a final app. We also developed numerous motion tests in very different styles so we could be all in the same page.

User testing was of the essence so we all showed the step by step to our families or friends before a single line of code was typed.

Image of the Look and Feel of this app


Rejected logotype options

After the prototype was ready, we started to brainstorm on the logotypes that the app would use. We tried a great number of ideas. About three hundred sketches and these were the most successful. We kept in mind our users, doctors that are already stressed out, and who would recognize the instruments better than anyone else. Also we wanted our Launcher Icon to be recognizable and useful.

Final Launcher Logotype

Next steps

At the end we delivered on time. It required some weekends of hard work and a great deal of communication among all the team members. Designers were talking with the Project owner, the modelers, the doctors, and the development team. This app is now out there and we are scheduling some meetings to talk about how can we improve it after we have more information about the users. This has been a great experience overall and I am grateful I a, a part of it.