This is part of a large web transformation project with one of the local universities. I was responsive for creating several interactive (click through) prototypes to perform usability testing on different primary navigation models, especially for mobile mega menu designs.

 

The following are two sample prototypes created for mobile. Both were produced on Axure and run on real mobile devices (e.g. iPhone) for usability testing, which received very positive feedback from the participants indicating they were almost the same as real sites. The main point is to demonstrate the possibility of creating prototypes for complex mobile navigation that can be used to test the initial design consideration then quickly iterate.

 

The mega menu on this prototype is a traditional push down model. Giving the fact that the proposed information architecture of the site was complicated and large, therefore the mega menu was designed to be able to reach down to level 3. In addition, dual access points were used for every item on the top two levels, i.e. tapping on the label of the item will navigate to the landing page, tapping on the 'arrow' on its right will expand the next level items under the current one.

The following is an alternative of the traditional model. The major difference is the top level items are listed out under the header. Tapping on a top level item will expand its next level items below.