Last week when I introduced the Groups PM Team , I briefly mentioned the User Experience team, whose members work to make sure Yahoo! Groups look good and are easy to use. It would have been more appropriate for me to refer to this team as the Groups Interaction & Design team.
This mighty team of four is responsible for taking the features and enhancements the Groups Product Team specs out and making them come to life visually.
Two kinds of designers are involved in the process, and they both have specific roles and considerations.
Interaction Designers focus primarily on the user’s experience when interacting with the new feature, including how easy it is to use, what the "calls to action" (typically buttons and links) should say and where they should be, what steps take a user from point A to point B, and the overall flow. Interaction Designers also think a lot about how the new feature should be integrated into the product and how the overall page layout should look.
Visual Designers focus on the best way to display information and new features, so they’re easy to read and understand, aesthetically pleasing, and consistent (in terms of color and layout).
The Design Team works very closely with Groups PMs and engineers, fostering an extremely collaborative and efficient environment.
Breathing Life Into New Features
When members of the Groups Design Team begin to think about developing a new feature or improving the user experience, they first develop what is called a "wireframe." A wireframe is a simple sketch that shows the steps a user takes to get from point A to point B, minus all the pretty designs. Once that flow feels pretty solid, visual elements are added and "mockups" are created. Mockups show what the feature will actually look like as a user goes through the pages.
When determining how a new feature should look, designers think about all the various use cases and conditions that can occur, based on the variety of Yahoo! Groups that exist. For example, how does the flow look to a user who is signed in, versus one who’s signed out? Or how might members of a Family Group use features versus members of a Fan Group? Designers also have to think through all the possible user paths through the features, as well as where and how users might go wrong—and what the error and help messages should say and look like.
Mockups serve an important role, as they stimulate conversation and allow for further iteration as the integration of the new feature into the product is fine-tuned. Mockups inspire feedback and give Groups PMs an opportunity to see what they’ve spent a great deal of time thinking about, and they help in determining if the team’s going about things in the right way. Feedback is not limited to Groups Team members; we also gather insights from Groups users through a variety of channels, such as focus groups and product advisory panels. Obtaining our users’ perspective is extremely important and useful in this process.
With more than 113 million users and 9 million Groups, the number of use cases and edge cases the team has to consider is exhaustive, to say the least. It’s not uncommon for a designer to go through dozens wireframes before a new feature is finalized—and that’s not including the consideration required for the internationalization of the new features. Yahoo! Groups is available in 22 languages, which presents the team with even more to think about in terms of spacing, how users in each language read (horizontally or up-and-down), and how the characters will look within the overall design.
Needless to say, the role the Design Team plays within Groups is central to the development of new features and the overall maintenance of the product!
Next week, I’ll highlight the role the Yahoo! Groups Engineering Team plays. (Engineering is the largest team within the Groups, so stay tuned!)
Best,
Jami
Groups Community Manager
In order to maintain sanity at work, one must take a break on occasion to let off some steam. What better way than by partaking in a little dance? I think Matt Harding might agree me on this.
