Hoffmann-La Roche
presentation app for medical representatives
My tasks
UI/UX design
interaction design
testing & research
Roche iPads app preview
While working at Softwebo (design agency), I was entrusted with the design of an app for Hoffmann-La Roche. It is a Swiss multinational healthcare company that operates worldwide under two divisions: Pharmaceuticals and Diagnostics. In this particular case, I was designing iPad based app, for medical representatives.

Problem formulation
When starting to work on the project I was given a basic PowerPoint, desktop presentation, that had to be converted into a mobile format. The main aspect that had to be designed was the navigation. Users had to have quick and easy access to presentation’s table of context, as well as “medical terms” index.

After several iterations of navigation, I have decided to use the above layout as the core. First of all, navigation starts, by familiarizing the user with the possible use of swipe gestures, while suggesting the possible use of the arrow. In the next step users see four core navigation elements. What they all have in common is adaptability through continuous animations, which relate to their changing purpose, function. In other words:

• burger menu shifts to “X” - initial list opening function converts into closing one
• arrow buttons rotate by 90 degrees - starting position suggests left to right swiping navigation, while the shifted position correlates to horizontal list of the chapters
• graduation hat - creates memorable connection with learning function, in this case “medical terms” index
• Roche logo disappears on menu open - it serves core branding function, link to presentation start, as well as divides slides from menu when slowly fading away, when opening the menu

What is also worth mentioning is the three dimensional aspect of the menu. In case of Roche app, it has created very clear division between being in and outside of the presentation slide, while still being able to see current position.
eSkate Lights color grid
Another interesting element of the navigation, was very literal “burger menu”. It has allowed to follow the presentation chapters without additional division and restructuring of the menu. As a result, it is easier to follow presentation’s material, as it has been divided, in an intuitive manner.

How I got there
All of the material presented has been a result of the decision process combining user data, constraints and client requirements. Below, we can see how initial sketches influenced final form of the iPad app.
Softwebo UI sketches
Initial navigations ideas were different. I remember being split between the use of classic, left navigation, burger menu and top bar, slider menu (violet). Both were promising, but early stages of UI testing have proven me wrong. Users were more used to classic burger menu (rule of familiarity) and did not understand how sliding menu worked.
Softwebo UI sketch iterations

Final Design
eSkate Lights color grid
Roche app preview Roche app preview Roche app preview Roche app preview Roche app preview Roche app preview
Above you can see the preview of screens that have been shipped in the final version of the app.

Overall, I consider the final design to be successful. App is easy to navigate and thus fulfilled its core task. I have most definitely learned the importance of listening to the user primarily and adjust my choices to their taste and way of thinking. After all its medical representatives that are going to use the app and no one else.