As part of an upcoming release of Firefox OS we needed to extend the home screen functionality with a grouping feature. My role as the UX design owner was to generate a compelling concept and carry it through to a final interaction spec. I worked closely with a visual designer from the initial phase all the way to the released product.

I started by going through internal research that I and others had done at Mozilla around home screen usage and organization. Using insights from the research and ideas from a future vision design sprint I started sketching out concepts.

There were a number of factors that increased the complexity of this project. As part of a partnership Firefox OS used "smart folders" on the home screen - a feature implemented to help users find new apps and that looked very similar to a grouping function. We wanted to distinguish the grouping feature from the "smart folders" to not confuse users. In addition we needed a grouping solution that flowed well with recent changes and future plans for the home screen. We had just introduced a vertically scrolling home screen and had plans to incorporate widget-like rows of information in an upcoming release.

One direction stood out early in the concepting phase and I started honing in on an "inline" grouping concept. The idea was to let users open and close groups without leaving the context of the home screen. Instead of "entering" a folder of apps the user would expand and minimize groups from the home screen. The concept addressed the requirements we had identified and added flexibility to the home screen layout.

I started working on the interaction details of important functionality like accessing groups, creating, editing, and deleting groups. During this phase we had lengthy discussions within the design team. Some of our favorite ideas were not feasible to execute well on the affordable hardware Firefox OS ran on. Some ideas that addressed the technical constraints were just too cumbersome to use and didn't feel intuitive. I went through many iterations and reviews but did not feel like we had found the right solution quite yet.

After a number of iteration - review - iteration - review cycles I finally found a direction I felt comfortable with. Creating a group was the most important feature of all and it had felt off to me the whole time up until now. A colleague suggested I explore using the space in between groups in group creation which led to a concept where dragging an app outside of a group was the first step in creating a new group.

Once we had group creation in a better state the other interactions came more easily. Every now and again the design team would get stuck in disagreement on a particular interaction. To help us decide between different interaction options I created quick, interactive prototypes for the team to try out.

When the details started coming together it was time to test the design with users. Two colleagues built a prototype and ran usability studies that I watched and distilled into insights and design recommendations.

The feature went over well in the study and I moved into creating the full UX spec. The spec went through several reviews with engineering and product before I released the final version to the engineering team.