COLLABORATIVE WIREFRAMING

Doing great UX goes beyond making things better for the user;
it includes making things better for the team.




I wanted to see if there was a better way to wireframe out a website. For one of our redesign efforts, I led the team through an exercise of collaborative wireframing. Rather than go the traditional route of designing wireframes and then passing it along to the designers, developers, and accessibility specialists for feedback, I involved the whole team in a wireframe sketching party. From there, we discussed our ideas and worked through potential UX, design, development, and accessibility challenges very early on in the process.

Some key takeaways from the process included:

  • Early collaboration helps build team consensus and buy-in
  • This method presents more ideas and options to explore
  • Potential issues can be worked through early on and not at the 11th hour


SKETCHING

To kick things off, I gathered the entire project team, markers, pens, sticky notes, scissors, tape, and music for a sketching party! I briefed them on the overall goal of the party – to come up with some wireframe ideas for various pages/features of the site and then left them to their own devices to sketch out ideas. Everyone sketched ideas on their own and posted them on the whiteboard wall as they finished. This was a great way to introduce everyone into the world of UX in ways they might not have thought of before. After an hour and a half, we wrapped up and slept on our ideas.


DISCUSSING



The next day, we met with fresh minds and shared our ideas with one another. During discussion we picked features, layouts, and interactions we liked. Because each team member was there to provide their expertise and feedback, we were able to work through any potential roadblocks and hurdles before they became an issue in development. Since we took ideas from everyone and were able to agree on things early, everyone was invested in the direction of the project. It was more about what we decided as a team, rather than what has been handed to them from UX.


PROTOTYPING



Based on the sketches and our discussions, the developers and I decided to create a barebones, digital prototype in Drupal (the eventual CMS of our site). We decided on this method of wireframing because it was more realistic and easier for the client to understand. Because the developers were involved earlier on in the project, they knew how they needed to set up Drupal to create this digital prototype. This put them light-years ahead of schedule in terms of development. We worked iteratively solving dev/UX issues as they arose during this phase.


CHALLENGES

While this worked out really well for us, there were some challenges, which will get ironed out as we iterate upon this process. Some of the challenges include:

Getting everyone comfortable with sketching and sharing ideas.
While everyone was onboard with the idea, people got a little self-conscious when it actually came to brainstorming and sketching out ideas to try.

Establishing solid documentation of final decisions.
During our discussion phase, we were moving lightning fast with how features were going to interaction and how things were going to be displayed. We committed a lot of this to memory, but really we should have been more detailed with our documentation.

Incorporating user research.
This project’s scope did not include any user research, but figuring out how to brief the team on user research before the sketching is a challenge that should be addressed.

 

Created using Foundation (v4.3.2)
michelletchin @ mac . com

Twitter icon    LinkedIn icon    Instagram icon    Flickr icon