CLIPLETS
In the summer of 2012, I interned with Microsoft Research on the Advanced Development User Experience team. My primary project was working on the early user experience design work for Cliplets.
What is Cliplets?
Cliplets is an application that allows users to create "cinemagraphs" - short clips that combine static and dynamic elements from a longer video. Basically you upload a video, choose a background still image, and animate one or more sections. Cliplets was developed by researchers at MSR and was originally available as a Windows 7 desktop application.
Design problem
The initial scope of the Cliplets project was to add share functionality to the existing Windows 7 application. However, the team quickly decided that they wanted to do more than that, and we began the work of transitioning the app to Windows 8. Sharing was still a high priority in the new scope, and although Windows 8 has a sharing interface built into the operating system, the Cliplets app had unique features that necessitated examining alternative ways of implementing "share".
We were also tasked with adding several features that were not a part of the original desktop application, such as an in-app gallery, an online gallery, and a hub (home) page.
What I did
Competitive Analysis
At the very beginning of the project, before I knew quite how far down the Cliplets rabbit hole I would go, I performed a competitive analysis of other cinemagraph and photo-editing applications available for iPhone, iPad, and Windows Phone. I looked primarily at how these apps implemented share functionality, because the initial scope of the Cliplets project was focused on adding a share feature. However, I also examined the creation workflows, gallery implementations, and other social features available for these apps.
We used this competitive analysis throughout the design process to help determine what features ours users would expect to see in a similar application. We also identified some potential opportunities for us to improve on the currently available experiences.
Let me know if you would like to see the full competitive analysis that I created.
Platform Research
Cliplets is a Windows 8 application, but while I was working on it, Windows 8 was still in beta. Although Microsoft had already released extensive documentation on what it means to be a great Windows 8 application, neither I nor my team and ever created one before. We had design language guidelines and a (small) slew of early applications to download from the app store and explore, but we were really forging our own way. I created several documents that showcased good and bad examples of the kinds of features we wanted to include in our Cliplets apps: online and in-app galleries, content creation, and sharing. I had to learn Windows 8 from the perspective of both a user and a designer in order to design an effective interface.
Information Architecture
I worked on mapping out the current workflow of the application:
As well as what the workflow might look like in our Windows 8 application, which includes several additional features:
I also worked on creating an IA map of the entire application. Since not all of the app screens were completed before my internship ended, the map has a couple of holes, but you can take a look at the work-in-progress. IA Map (pdf)
Sketching & Wireframes
I did a lot of sketching over the summer, trying out different ideas for various screens. I turned some of those ideas into wireframes. Here are a few examples of ones that were "final" by the time I left. They may have been tweaked since then, and they've almost certainly gotten a visual design makeover. These were all created in Adobe Illustrator.
The gallery home page:
Several "snapped views" of different screens:
One of the screens in the custom share workflow that we created:
