A framework for designing a better user experience

The Mozilla Reps website team recently met to plan how to make our event tools easier and more valuable. We are a bootstrapping team, so this is the first time that we have worked closely with user experience and visual design experts Holly and Lee. This opportunity was a special treat for our team, and I think it also gives us a strong framework for improving the user experience in other areas of the Reps Portal. I am going to use this post to share the process we used, and I believe other teams can benefit from using this approach as well.

Defining our process

To guide us through our sprint, we adapted the product design sprint five-day recipe from the good people at Design Staff. We changed the recipe a bit since we were meeting remotely and not creating a prototype just yet. Overall the team really liked this approach.


To help us prepare for the meetings, Holly shared guide documents detailing the sessions and included questions for us to think about in advance. We also created a quick survey for Mozilla Reps, our main users, to give us feedback and ideas about event functionality on the Reps Portal. The responses we received gave us some great insights that drove our discussion and concepts. Before the meetings each of us was asked to look at other event sites for inspiration as well.


We met for four two-hour sessions on Monday and Tuesday, and each session was focused on a different stage of the user experience design process. During these meetings we discussed, brainstormed, sketched, conceptualized and identified assumptions and concerns. We started by defining our opportunity and finished by prioritizing our new concepts and solutions. This is a thorough process that helps the team gain a common understanding of what we want to accomplish and then find solutions we can use. Here’s what we set out to do in each session:

  • Understand. Dig into the design problem through research, competitive review, and strategy exercises. End up with user story that we all agree on to move forward.
  • Diverge. Rapidly develop as many solutions as possible.
  • Decide. Choose the best ideas and hammer out our user stories.
  • Prioritize. Choose what order to work on ideas.

Working virtually

Our team is spread out around the world, so we used Vidyo video conferencing to meet in a virtual room and we created a shared folder of documents and images for each step in the process. Because our team spans eight timezones, not everyone could join every session, but at the start of each session we reviewed our previous work so everyone had the same context.

Sharing our ideas over video

Sharing our ideas over video

To share our designs and ideas, we made heavy use of screen sharing and showing paper sketches using webcams. While we took lots of notes, I found the paper sketches to be the most useful tool for our sessions. In a few minutes we could draw out ideas and share concepts with each other. We also took photos of all the sketches that we added to our shared documents folder.

Next steps

Now that we have a solid understanding of how we want to improve our event tools, we can start executing on our concepts. In the next week we will start creating specifications and filing bugs. We’ll prioritize our events work amongst our other Reps Portal projects as well.

One thought on “A framework for designing a better user experience

Leave a Reply

Your email address will not be published. Required fields are marked *