Categories
Design Thinking

Prototyping for understanding

The menu structure of our application was constantly available for discussion as we had a series of partners and product owners who were always looking to “improve” this area of the experience.

As a left hand menu (in a left to right experience) … it is an established mental model for most users. We wanted to make sure we didn’t “break” anything by rearranging what most users expected.

Working with our lead researcher, I used Figma to build three prototypes that could be interacted with by the test participants.

The three experiences were similar with only the location of the menu icon or icon used for a menu to be the variations.

Original implementation

This second variation had no app icon visible in the closed menu version. The app name was visible when the menu was expanded.

No app logo, just the hamburger (menu) icon.

And, the third version, which replaced the menu icon (hamburger icon) with the app id.

Logo for menu control.

Hypothesis:
Using an App id for a menu function control would not be the expected behavior for the application.

Methodology:
Participants logged into Usertesting.com and filled out a Screener Survey (research qualification)

Participants interacted with 3 different prototypes:
They were asked to identify which elements controlled menu function, audio controls, and so on.

The users were shown the prototypes in varying order to minimize “learning bias” as they progressed through the prototypes.

Insights and Findings:
Only 2 of the 55 participants preferred the App Logo instead of a menu icon.

Recommendation:
Keep the existing icon for users to access menu.

Click on this image to see one of the prototypes.