Product Design, Interaction Design, Rapid Prototyping  | 

As a UX/UI Experience Lead for Mobilizer under the direction of Ivity Labs, I worked with a team of 6 on a accelerated timeline and tight budget to launch version 1.0 of a SaaS web application. Daily collaboration consisted of wireframing the interface and user flows, conducting user surveys and interviews, prototyping front-end interactions, and iterating upon visual design while balancing business constraints.

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.

See the Pen Mobilizer Canvas Interaction Test by Sean Mateer (@seanmateer) on CodePen.

Click "Devices" for demo.

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.

See the Pen 2fd6611e348ad45335157ba434d6ddd8 by Sean Mateer (@seanmateer) on CodePen.

Click "Open" to see a prototype of the device drawer after additional iteration.

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.

Dependency Method (Click to expand)

"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".

"Only This" Method (Click to expand)

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.

See the Pen Mobilizer forms by Sean Mateer (@seanmateer) on CodePen.

Enter text in input to observe float label. Float labels make sure context isn't lost while maintaining a visually clean form.

Next Steps

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.

Recent Work

Thanks for viewing my recent client work. If you have any questions or would like to see more of my work, please contact me or return home.