Asthma Revolution

With new guideline changes for asthma management, there was a need to update and educate doctors on the implication towards patient management and drug effects.

The objective of the project was to leverage on global materials provided by my client and adapt it for the China market.

My Role

I was responsible for the user flow, and creating hi-fidelity wireframes for their H5 mobile mini site by using their creative assets and guidelines.

Process

At the start of the project, I worked with my client’s team to come up with the overall structure of the H5 mobile mini site.

I created a couple of sketches with the layout of each page. They were used to help my client understand how the content will be laid out, and to share my ideas about components that could be used.

Card, sliders and accordion components for each lecture module

Layout of the homepage while using their creative assets

Wireframes

I converted my sketches into low-fidelity wireframes, and combined them into a user-flow diagram. This was shared with the developers to help them understand how each page is linked, and the interactions for each component.

The low-fidelity wireframes were then converted to hi-fidelity wireframes, by making use of the creative assets and guidelines. I also created a page which contained all the export-ready assets for the developers.

Low-fidelity wireframes with a user-flow diagram underneath

Hi-fidelity wireframes with creative assets and styling added

Outcome

The whole process was completed within a week. From being briefed on the project, to delivery of the hi-fidelity wireframes and assets for the development team. The client was appreciative of the quick turn around as they could meet their launch timeline.