Mobile Menu Experience

While exploring every possibility with the navigation experience for our new mobile website, I was asked to quickly create a clickable prototype that could be tested on a phone and in the hand.

I prototyped this interaction in less than two hours using exported PNGs from Sketch, HTML/CSS & JS.

"Appy" Menu

Content in Menu

  • Too many clicks out
  • User loses sense of their location
  • Behaives too much like a native app
  • The closing animation not consistent

Conclusion

The phone was passed around the office and the general consensus was that the motion used from our first solution disorientates the user. The project lead asked if we could rapidly test a solution which treated the content in the menu like a page load instead of containing the information within the menu system. The UI designer made some layout changes, exported PNGs from Sketch, and we sat together for the rest of the day tweaking the timing, parallaxing, and easing of each interaction to refine and help orientate the user.

Prototype 1

Prototype 2

Streamate - Mobile Web Menu

Y: 2015     Type: Internal UX Design     Duration: 1 day
My Role: Interaction Design, Motion Design, Prototyping, UX Design

Vision Statement

Streamate is a private based camming web service. The UX team had been given the opportunity to redesign the mobile experience from the ground up.

Problem

Being an adult website, creating a native app was not in the cards for us. It was our job to create an "app like" experience inside a web browser. After extensive user testing, we found the more we departed from the stereotypical adult website style, the more it alienated our older user-base. We also determined in user testing that slick and refined did not convert as well as an utilitarian approach. This made our team careful in designing predicable and familiar micro interactions.

Solution

We erred on the side of caution with a more standard style navigation, snappier transitions, and avoided covering the landing page so as to appeal to our wide user base.

Credit where credit's due: UI/UX Design by Sr UXer Blake Hellman
View Case Study
View Prototype
View Live Site

 

more projects for your enjoyment