The Brief Boehringer Ingelheim is one of the bigger pharmaceutical brand we worked with. Respimat is one fo their prodcuts. It is a propellant-free inhaler that delivers a unique mist. We were asked to create a web appliction for Respimat users, and show a 3 stages user guide to help Respimat users operate it correctly.
I worked with Art director Paul Duncan who ran this project. He had already created the style guide and art direct the look and feel. I was responsible for designing the home page and creating the best way for pop up information box to appear on the application page.
Work for Respimat Web Application has won the best App Silver at the IVCA Awards.
I designed many versions of this home page, trying to figure out the easiest way for users to operate this application. To learn how to use the inhaler is already a task, to keep users happy and struggle-free, our goal is to make the site as simple as possible. The images below show design round 1. The feedback from the team was: Information hierarchy is not clear, the buttons are a bit confusing and quick dosing should be the biggest button among all.
From a psychology point of view, circles are always more friendly then squares. Hence I decided to try with circles. The feedback on the left design from the team was that the quick start button with the other 3 buttons are not individually distinguished enough, so users won't know they are functional buttons. After a few sketches, the almost final design appeared (see image at the below right).
Following from the almost final design above, I applied icons, but they distract the CTA buttons, and the blue arrow in the daily dosing section is seating too height, misleading the eyes. These are the design decisions we made through out the journey and they lead us to the final design (image below on the right).
The first design placeed the navigation bar was on the left. The problem with this design is: Buttons are not consistent with the home-page ones, users need to take extra effort to find buttons and figure out how the site works, users are not clear which sections they are in. The solutions were: Place the buttons to the right to keep them consistent as users are often familiar with navigation on the right. Finally the little pie circle beside the title was added, the pie circle will gradually filled up when users finish with each section.