UI/UX
Designing the Add Menu for Strands Fitness
The Add Menu is the launching pad for most content on Strands Fitness. I thought I’d share a little about the process that led to this.
Most content was added through the “Share Something” menu which combined a Twitter-like status update input and buttons for launching modal windows where new content is added.
The UI wasn’t very intuitive – especially to new users – and most options could only be accessed by first opening a modal window, then using the left side menu. Geez!
A quick fix was to use muttons.
Also explored a global restructuring approach where all navigation and adding options were combined into a full-width, branding bar.
To help reflect the simplicity and workflow of our iPhone app, I played a bit with a big button menu, sometimes along with a global mutton for those frequently needed items. Kept the matching yellow button for both web and mobile app.
I loved the idea of a one-stop-shop and toyed with a super menu with every add option including the Status input.
Finally I settled on a context sensitive mutton.
By context sensitive, I mean that the button part of the mutton changes based on where you are in the site and this didn’t require much explanation once in place.
New and old users have found the Add Menu intuitive it has worked so well, we were able to remove the left side menus of the modal windows, further simplifying the site. Import options, which were previously hard to find, are also included here.
