Rapid Prototyping for the Win
When exploring the layout for Mobilizer Canvas, we had many ideas on how to display the library of devices available. Starting with sketches and simple user tests, I quickly ruled out several options and found that users liked the idea of a device "drawer" that wouldn't sacrifice much real estate or add visual clutter. With a general direction, I usually moved straight into a rough prototype to get additional feedback.
Note: The following Codepen examples are best viewed full screen by clicking "Edit on Codepen" in the top right corner of the iframe.
Once confident with an approach, I'd continue to provide additional interaction details before migrating the code into the production environment where it was enhanced further and refined visually as the Canvas mode was iterated upon.
Improving the User Experience
A place of contention among our small team was how the sidebar filters should behave in the Canvas device overlay. While sorting wasn't a priority for the number of devices at launch, we knew that the number of devices available would be increasing as time went on. We also had questions that required research and user testing, such as: Should the filters be additive or subtractive? Is it confusing that items such as iOS and Apple overlap directly, while Android overlaps with several brands? Filtering vs. sorting, what is more appropriate?
Filter Dependency Method
One filtering method I explored and tested with users was based on dependencies. For example, if a user selected iOS as an operating system, only iOS devices would display and any individual filters that shared the same attribute would be highlighted as well. Problems quickly occur with dependencies, as seen in the final step of the flow below, where another click on an unselected filter would result in every filter being selected.
"Only This" Method
Another attempt we subjected our users to, the "Only This" method, left users confused and not sure why they would want to "filter back up".
Back to Basics
In the end, we ended up nearly at square one, making few changes to the way our filters behaved originally. However we did disprove many assumptions, and gain more insights with user feedback:
- Users understand that different filter categories are likely to have overlapping items and results and it's OK.
- Users expect to see a current device count that updates according to the options selected.
- The words "filter" and "sort" are ambiguous, necessitating a move towards trying "narrow", "refine", and eventually landing on "choose".
Consistent Design and Interaction
With team members iterating rapidly on numerous different sprints, the need for a product styleguides quickly became apparent. Since Mobilizer relies on forms for signups and payment subscriptions, it was important for the design of input fields and flow to be consistent and user friendly.
After a successful seed funding round and launch, Mobilizer continues to evolve with new features in the works. It's been an amazing opportunity to work through the entire product lifecycle, and I look forward to continued involvement.