Intel® Developer Zone offers tools and how-to information for cross-platform app development, platform and technology information, code samples, and peer expertise to help developers innovate and succeed. Join our communities for the Internet of Things, Android, Intel® RealSense™ Technology and Windows to download tools, access dev kits, share ideas with like-minded developers, and participate in hackathon’s, contests, roadshows, and local events.

Related articles:
Developer's Guide for Intel® Processor Graphics for 4th Generation Intel® Core™ Processors
Touch and Sensors
How to Create a Usable Touch UI
How to Adjust Controls for Touch

Introduction

Touch-optimized for Windows* 8 and designed from the ground up to help virtually anyone tell their personal stories quickly and easily, CyberLink MediaStory* software greatly streamlines the process of organizing and accessing the mountains of pictures and videos stored across phones, cameras, tablets, PCs, and the cloud to assemble professional-looking videos that can be shared in minutes.

Cyberlink MediaStory: Innovating the Storytelling Experience.

MediaStory grew from the collaboration between CyberLink and Intel. The two companies' long history of working together has been well documented by Intel® Software Adrenaline magazine. Most of those earlier stories focused on how Intel and CyberLink engineers teamed up to ensure that CyberLink's consumer multimedia content creation and playback applications were coded and optimized to take advantage of the latest Intel® processor features such as multi-threading, Intel® Quick Sync Video hardware-accelerated media processing, and more. This time, the story begins well before a single line of code was written.

CyberLink MediaStory* lets users create videos to tell their stories using a more streamlined
UI than PowerDirector*.

The Story Behind MediaStory

In creating MediaStory, CyberLink and Intel approached the collaboration in a completely new way. "Complex video-editing solutions have been available for many years," Louis Chen, CyberLink's VP of Business Development, said. "We wanted a new user-centric approach to innovate in how we could bring the storytelling software to life." For two intense days in February 2013 executives from both companies along with a variety of stakeholders—engineers, product designers, user experience specialists, marketing people, among others—assembled at CyberLink's offices in Taipei to utilize the Design Thinking process to shape MediaStory. They interviewed end users to get a deeper understanding of their pain points and comfort zones, reviewed market data, and brainstormed possible solutions to address and delight the target users' needs.

Personnel from Intel and CyberLink brainstorming in Taipei.

In the end, they zeroed in on a specific market need by first identifying a challenge: The explosion of mobile devices capable of producing great-looking photos and HD video was inundating consumers with too much content. As Chen put it, "We realized that people are overwhelmed with media. They want (need) to easily create great-looking photos and videos, and keep track of it all on whatever devices they have at hand." With that in mind, the two tech companies kicked into high gear.

User pain points and comfort zones were noted.

Wanting to bring a solution to market as quickly as possible, they targeted a Q3 release date—which significantly shortened CyberLink's usual development cycle. The MediaStory design document was drawn up in less than two months, a process that normally takes four to six months. Taking MediaStory from idea to its first deployable iteration took just four months. "That was unprecedented for CyberLink," Chen said. During that time, iterative testing through numerous focus groups put the nascent software through its paces, and they shared their feedback with the design team so the team could further refine and add features.

Solutions were sketched.

Storytelling Software

According to CyberLink, MediaStory falls into a new category: Storytelling software. MediaStory helps users find their personal content and select the most interesting video clips or pictures based on their preferences and personal history. Then it compiles a 30-second (or longer) video "story" that can be easily shared on social media or video-sharing sites.

To help identify people in pictures and simplify the tagging process, facial-recognition technology was used. To help the software determine whether a photo or video clip belongs in a particular story, geo-tagging came into play. And to create context-driven stories automatically, MediaStory accesses events listed in the user's Google* and/or Outlook* calendars, matching them with the time stamps and date stamps in photo and video files.

Describing its geo-location service model, Chen explained that "When people search their photos, they're typically looking for shots from a specific place—'find my pictures from Japan.'" So CyberLink decided to build its own, in-house service. "We needed something simpler than a geo-service that's used for navigation—something simpler, but smarter."

CyberLink tailored its new location service to the MediaStory experience. "The precision and the definition of location is fuzzier than needed for navigation," Chen said. They used three levels of abstraction: country, city, and point-of-interest, leaving out details such as street name and house number.
The same fuzzy precision was required for tapping into calendar services. "More and more, people are using online cloud calendars, so by tapping into Google and Outlook, we could gather intelligence about events. We needed to use fuzzy precision to account for the fact that people aren't always on time to meetings, parties, or dinner," continued Chen.

Chen was quick to point out that, "All of the magic happens in the background without the user even knowing how it happens." The software plus service uses metadata to automatically cluster events in various dimensions and retrieves content accordingly. "We have to thank the mobile revolution for giving us all this content and the ability to derive intelligence from it so we can assemble meaningful, context-driven stories," said Chen.

Touch-based Usability

From its inception, CyberLink and Intel wanted to develop a new UI for MediaStory. One that, as Chen put it, "…didn't scare the user away from using the product." Video-editing applications, even some that are renowned for being consumer-friendly, such as CyberLink's own PowerDirector*, have been known to intimidate the uninitiated. "We wanted fewer buttons, more content, and fewer pop-up menus asking for data to be input," said Chen. The goal was to give users immediate results. If any refinements were needed, the visual feedback had to be immediate.

"Entry-level users aren't always able to express what they want to achieve until they see the results of what they're doing," Chen said. With that in mind, CyberLink and Intel set out to create a touch-optimized interface that dynamically scales to display more content as more screen real estate becomes available.
Touch-optimized interaction proved to be challenging. "Designing for both touch and a keyboard and mouse wasn't trivial," Chen explained. The usability team went through five design iterations over a period of two months to ensure that the usage fit both types of interaction and tested the iterations with focus groups. "How you select content from a library is very different when you're using a mouse versus gesture in Windows 8," he said. "We had to smartly detect how users were choosing to interact with the software—with a mouse or touch—and add UI elements to accommodate both."

Less Isn't Just More, It's Harder

The most difficult aspect of designing MediaStory was fine-tuning the trade-off between usability and features: what to expose to the user and what to handle under the hood. "We wanted to handle a complex task in a simple manner. That meant our application had to be very intelligent," said Chen. The goal was to create something that was different from a conventional video-creation product. Product designs are often driven by feature comparison charts—something that consumers often use to make buying decisions. "That old way of thinking didn't apply," said Chen, who for years was CyberLink's marketing director. "Mass-market consumers aren't just using their PCs to create content anymore, they're using mobile devices, Ultrabook™ devices, tablets, and 2-in-1s. To win them over, we had to create an app that looks simple on the outside but is incredibly sophisticated on the inside. That was our biggest challenge."

CyberLink PowerDirector* is a full-featured, consumer-friendly video-editing application, but its
UI is relatively complex.

Windows Portability

From a development standpoint, Windows 8 still offers the largest user base when it comes to storing personal memories. "We wanted to offer the experience directly on the most popular platform," Chen said. "That platform is Windows." In addition, Microsoft Windows 8 touch/gesture APIs gave the development team some needed flexibility. "We could code once and deploy the software across a variety of form factors such as Ultrabook devices and 2-in-1s." That said, CyberLink is investigating the idea of bringing the MediaStory experience to more mobile platforms—specifically Google Android* devices, including tablets with Intel Inside®.

Intel® Software Development Tools in Action

MediaStory's media pipeline, like most CyberLink multimedia applications, is optimized for 4th generation Intel® Core™ processors. With its years of experience optimizing code for Intel® architecture, it didn't take CyberLink long to integrate its existing video engine to deliver what Chen described as "a quick, responsive software experience."

Intel® VTune™ Performance Analyzer and Intel® Threading Building Blocks helped the team improve launch time and boost playback performance. They also used Battery Life Analyzer to monitor software and hardware activities that affect power management and battery life. "These tools can easily pinpoint potential trouble spots and bottlenecks," said Chen. "They help us improve and measure performance, and save us significant amounts of time when identifying issues related to performance and power optimization."

The Intel® Media SDK proved to be another tremendous timesaver. "It hides complex hardware design logic and keeps software architecture clean," said Chen. "Using the Intel Media SDK, we don't need to worry about each processor generation's hardware compatibility issues. Whenever Intel improves the quality or performance of a codec, the improvement is delivered to the end user in a simple driver update." CyberLink products benefit directly from the enhancement without having to write any new code. "With Intel Quick Sync Video technology, we're seeing a 10x performance boost. For users, that translates to lightning fast media conversions, especially for those who need to convert video files to formats required by social media sites or video-sharing sites." MediaStory is also able to leverage the Intel® Common Connectivity Framework (CCF), giving users the ability to wirelessly connect their smartphones, tablets, desktop PCs, and other gadgets.

Collaboration Through Ideation

Thinking back, Chen said that shifting the collaboration with Intel to the start of the product design process "…helped CyberLink stay focused and prioritized solving real user needs." This new model of collaboration shortened the planning cycle and introduced more iterations by gathering user feedback during multiple focus-group validation tests that were performed earlier and more frequently during the cycle.
"Our collaboration with Intel has reached a new level," said Chen. "It helped us prioritize end-user needs, shape the right technology solutions, and create better user experiences."

CyberLink and Intel Use Collaborative Design to Create MediaStory