Designing a Product from Concept to Prototype

My Senior Project in the Interactive Media Management Program at Centennial College was to conceive an interactive project and develop it from that initial concept to a high fidelity prototype demonstrating a key user path.

ClientIMMT, Centennial College
DateApril 2017
Category,

Logo for Kapcel

Define

Choosing and refining the concept was crucial because this project would be the basis of our coursework for the semester. I knew the problem I wanted to solve involved capturing and sharing personal stories and memories in the digital age.

Through some initial market research, I concluded there was a need for a platform that would allow users to have secure control over their own material and easily curate, share and store their most precious memories all in one place. These digital memories could include videos, photos, documents, and audio files.

Building on the metaphors of family scrapbooks, personal archives, and enduring time capsules, my vision for a web application to function as a digital version of these metaphors began to take shape and with it the working title: Kapcel.

Explore

As I began to research and explore my concept for Kapcel, I developed three Personas to represent the key target markets of my project. These Personas were created in a brief window of time when my solution was still evolving. I conducted research mostly guerrilla style – through conversations with colleagues, friends, and family.  

Three User Personas

I also considered the human needs of my users and created a Creative Brief video to illustrate how I was planning to address these needs and how I hoped my project would make users feel.  This exercise was very compelling for me because it allowed me to tap into the emotional core of the problem – life is brief and memories are sacred and humans are storytellers seeking ways to record and preserve their stories.  It galvanized my intention to search for a viable solution.

Note: Music auto-plays with this video.

Create

In the development phase of the project, I began to consider the structure, features, and parameters. For the project I had “hired” two of my classmates to assist and collaborate with me. In brainstorm sessions with them, I was able to put together a list of key tasks that users would want to be able to complete.

I understood that for many, the task of creating a personal archive feels daunting so we focused on making that process as simple and streamlined as possible. This meant not re-inventing the wheel but using patterns that people are used to.

We decided each Kapcel would consist of Entries (albums) which I later renamed Stories. Each Story would consist of Artifacts (videos, images, audio, documents). There would be a limit to how many Artifacts could be included in a story in order to guide users to curate their Stories with the time and attention of future viewers in mind. The Stories could be kept private, or shared, and there would be the ability for the user to invite others to collaborate on Stories and add to them.

I explored some assumptions that users might have and how to address them in a video that depicts a possible conversation between my main Persona and the system.

Note: Music auto-plays with this video.

 

After a few whiteboarding sessions, I created a paper prototype in order to test with some representative users.

Image of home screen in Paper Prototype

home screen

Image of Share dropdown in paper prototype

Story screen with Share menu

Help pop up on paper prototype

Story screen with Help menu

These tests resulted in some fantastic feedback. Including a major breakthrough that informed my ultimate solution and which would set Kapcel apart from existing photo sharing platforms like Google Photos or Flickr.

In a time capsule, it is the letter from the past that describes why the items inside were chosen that is so compelling to a future viewer. What I discovered in my user testing was that users wanted to be able to use video or audio in addition to text to give that context. And so, I built in the ability for users to add a multimedia description (as text, audio, or video) to each Artifact, Story, and to their Kapcel as a whole.

After assimilating the user testing results from the paper prototype, it was time to create wireframes for the digital version.

 

annotated wireframesView full sample in PDF

These wireframes were given to my graphic designer who designed the main 8 screens of my final high-fidelity prototype. I then took her designs and used Photoshop to build upon and flesh out the design for rest of the prototype.

Deliver

Before the final prototype was built I reflected on the design decisions that I had made throughout the process in a report on design constraints and trade-offs.

sample from Design Constraints assignment

View full document

 

The culmination of the project was a final presentation which consisted of a walkthrough of the final Kapcel prototype. The prototype demonstrates the main tasks that a user could accomplish during one session with the application.

 

View prototype document

Reflect

If I were to pursue this project further, I would want to delve deeper into market research and user research to validate many of the assumptions that I was forced to make quickly due to the nature of the project and the timeline of the assignments.

However, this project gave me a thorough and practical understanding of the design thinking process and the progression from concept to prototype.

Beyond developing and building the prototype itself I gained experience in managing the lifecycle of an interactive project including leading a team, scheduling, budgeting, and planning for business, promotions, analytics, and technical considerations.