Nokia Media Sharing

Many Nokia phones have the ability to share media from the phone to other people. Because Nokia’s application development teams sometimes work without detailed knowledge of each other, several Nokia applications perform their sharing in a way unique to that application. For example, the music application shares songs in a different way than the gallery application shares pictures.

In response to this, an initiative was started to catalog these different sharing methods, compile the unique requirements of the applications that allow sharing, and propose a universal sharing solution. I was the lead designer on this initiative, and worked closely with a product manager to complete the project.

While the product manager gathered product requirements, I began to compare some frequent sharing operations and look for commonalities. I noticed that nearly all media sharing contained the same steps: select your content (e.g. music, a photo, or a map location), then select a destination (e.g. Facebook, email, or MMS), and finally add additional context (for example: the user’s location or a caption) and share.

I created a design proposal document that contained these insights and other, more general, design principles and user experience goals meant to help guide later design decisions. Below is a sample page from that document showing a map of several sharing interactions:

 

The different colors represent the different steps in the sharing process mentioned earlier. Visually mapping out the steps for each application made the differences between them clear. For example, the phone’s camera application skips the content selection step entirely, understanding from the application’s context that the user intends to share the photo that was just taken.

Using this interaction map and the design principles, I began to draw up wireframes for a consistent sharing framework. Working directly with the relevant stakeholders allowed me to quickly iterate on the flow and details of the wireframes. You can see an example flow below:

This series of wireframes highlights the wizard-like nature of the proposed design. Each decision leads to a contextually-relevant follow-up. Shown here, when the user chooses to email the content directly to a friend, she is taken to her contact list.

While these wireframes were presented to the relevant teams, the engineering team began developing a prototype using common components, thereby getting around the need for fully-fleshed out visuals at this early stage. I continued to iterate on the wireframes working with the engineering team.

As the wireframes were finalized, I moved onto another project but remained involved in an advisory role. The team continued to refine the designs and develop the functionality for upcoming phones.