What is it all about?
Another challenge, three days to create and define the flow and a couple screens for an app. The scenario was the following: the client was a big pharmaceutical company that has recently released a new pill.
I had to bring their vision to life by creating an easy-to-use and engaging game (based on the structure they requested) for the attendees of a huge Zoom event to be entertained while learning about the pill. Challenge accepted!
Understanding the requirements
The flow of the game was given to me, the users would have to access the game, have a quick way of learning what it was all about and start playing. They had to diagnose the patients with the new “Onapill” and learn while doing it.
Getting started I had some things in my mind:
With a clear flow of how the app should work I started ideating the screens and creating different wireflows until I decided what could really work.
I wanted the log in to be easy, no time for signing up, emails, passwords, etc. After all this was a one time use app, exclusive for this presentation.
So, to make things easier I went for a pin log in, this pin code would be included on the invitation for each guest.
Let's Dive In
After the Log In, there were two main sections to tackle:
1. Onboarding: it had to be simple and clear. Three screens with a very concise title and a short description.
2. The case: the presentation of the scenario was next, it had to give all the relevant information to the user, it’s the last step before starting the proper gaming experience.
The materialization of the required quiz was one of the main interfaces for me to develop. I wanted to use very simple illustrations, because of time constraints and because I wanted the UI to be neat and simple for all users.
I wanted to play with elements of real life when illustrating the screens. I played with the display of pills when choosing an option in the quiz and created little pill bottles as the buttons to choose the right diagnosys for the patients.
The rest of the screens were left as simple wireframes, since the challenge was to work only two in high fidelity. You can see all the screens below!
In order to communicate my ideas more clearly, since I only had to deliver the sketch file, I created a style guide to List all crucial UI components I created.
It's in Spanish, sorry about that!