Research Findings

Our research finding documents contains a collection of findings we gathered from doing preliminary research on our project topic. We conducted research to help orient ourselves with what types of social TV watching products and systems exist (if any), and to spark our ideation process.

This was the first step in our design process because in order to create something new, we needed to understand what already exists, and the current literature on the subject. After this artifact we began creating personas. Research helped us understand what kind of users might be interested in this system, and was essential in helping us produce initial personas.

• Research Findings - Luis
• Research Findings - Nicole
• Research Findings - Will
• Research Findings - Nathaniel

Close

Polished Personas

These are a pair of personas as examples of the types of users we would expect to use our system. We created these so we could keep specific people in mind while designing our system, always asking ourselves what the people in our personas would think of our ideas.

The traits of the personas we created were all based on our research findings in the previous part of the project. Furthermore, the personas are the people whose use cases we based the scenarios of the next section on.

• Personas

Close

Scenarios

Day-in-the-life examples of user’s using our system. These scenarios go into detail about when, why, and how a user might use Social Stream. We created scenarios in order to help ourselves under stand under exactly what types of circumstances someone would use our product. Scenarios help us envision how someone would use our system, which then helped us realize what features we would need to include. Scenarios take the polished personas one step further by bringing them to life and showing instances in which the personas created would use Social Stream. After creating the scenarios we were able to really understand what functions and features would be essential in this system.

• Scenarios - Luis
• Scenarios - Nicole
• Scenarios - Will
• Scenarios - Nathaniel

Close

Design Sketches

We came together as a group to collaborate and polish our ideas, creating a few very good looking sketches. We created this to have a unified vision of what our system would look like, based on a mixture of all of our ideas. The group sketches were based on the best aspects of each group member’s individual sketches. These sketches allowed us to have an idea of the process the user would have to go through to accomplish their goals, which is what our storyboards were based on.

• Design Sketches and Ideas

Close

Storyboards

After sketching and polishing our ideas, each team members created storyboards to convey the experience of our design. We each created 3 storyboards with different scenarios. Unlike sketches, storyboards convey the experience of using our design. It allowed us to create scenarios and current issues or experiences users may have.

After creating our group sketches and agreeing on an interface, our next step was to convey our design experience. Storyboards are great for highlighting experiences. Creating storyboards helped us establish the experience we wanted our user to have with our design. It helped define what our tasks should be and will help plan out our steps and views for a sitemap.

• Storyboards - Luis
• Storyboards - Nicole
• Storyboards - Will
• Storyboards - Nathaniel

Close

Sitemap

A sitemap helps layout and understand the information architecture of a service. It presents the apps organization in clean defined layout with high-level pages and sub-pages. Our sitemap helped us organize and plan the structure for our app. We established the steps and screens that would be displayed as a user interacted with our interface.

After creating our storyboards, our team knew what experience we wanted our user to have. The sitemap helped establish the exact steps and views the user would go through to achieve our app’s experience. By establishing our steps and views, our team was now ready to create and replicate our app’s task through paper prototypes. We now knew what screens we would need to create to replicate our app’s experience.

• Sitemap

Close

Paper Prototype

Paper prototypes allow ideas to be tested with real users instead of only showing and communicating the idea. At this point, our app’s idea, design, and implementation were well established, but we had not performed any testing with users. As a result, we needed actual feedback from users to improve and refine our design. Paper prototypes help us achieve this.

Paper prototypes are used to test an idea with real users, but before testing, the design, layout, and implementation of the app must be initially established. Our previous sketches, storyboards, and sitemap accomplished this. Paper prototypes are an easy and quick method to collect user feedback and refine our app. Once we received feedback we wireframes.

• Paper Prototypes

Close

Evaluation Findings

After testing our paper prototypes with users, we received feedback on the design, interface, and interactions. By collecting this data, we were able to incorporate changes and improve our app’s design and interactions.

The paper prototypes allowed us to test and receive user feedback in class. Using paper prototypes is a quick and easy testing method and by incorporating the feedback, we addressed major usability issues before creating wireframes.

• Evaluation Findings

Close

Annotated Wireframes

Wireframes are a blueprint and visual guide of our entire app’s layout and interface. They are higher fidelity than paper prototypes and incorporate the feedback received from users. They’re better for presenting the entire layout and expressing higher accurate details.

The feedback received from our paper prototypes helped refine our design and layout preparing us for our wireframes. It helped us spend less time testing with wireframes which take more time and effort to make. After creating wireframes and testing further with them, we are well into the process to create high-fidelity mockups our app.

• Wireframes

Close

Hi Fidelity Mockups

High-fidelity mockups are high quality representations of our design, layout, and interactions for our app. They are almost the last step of the design process and incorporate the feedback from multiple user testing. They show very specific design details such as fonts, colors, and structure.

It is the culmination of testing and changes made through the paper prototyping and wireframing. These high-fidelity mockup are also used to receive further feedback, but serve to present the polished product to our client or users.

• Homepage
• Dashboard
• Viewing

Close