Shift: Process Book

Cody Moiseve & Brandon Mannheimer 3

When designing, it’s easy to get lost in the gross interactions – the dialog boxes and system flow. However, the subtleties are just as critical to the success of the design. We need to pay close attention to these nuances as we’re working through our design process.

“

“–Jared Spool

4 Shift Process


In a world of networking and interconnected people, we are bombarded by a huge selection of sharing methods. From Twitter, Facebook, Tumblr, Flickr, and more, a person can upload an abundance of information for the world to see and read an endless amount of feeds. In the creative environment this high level of expansive networking is vital for exposure and finding new connections to continue work. However, sometimes it can become difficult and time consuming to keep up activity on all of these outlets. It is for this reason that a simple uploading and connecting application is necessary to simplify and speed up this process. By creating one application a user can upload a photo, link, video, or other form

of media to any or every one of these networks simply by clicking and dragging and read all important post by opening the application.

In a time where access to various applications is becoming as common as browsing the internet, it is necessary to not simply develop a “internet-like” application but give a look and feel that separates the user from a generic browser atmosphere into a personal, networking experience. Our goal is simple, to take what it means to network and redefine it; its will no longer be about the individual upload and feed reading, but a unison of all of these networks working together.

Introduction

6 Shift Process

Initially, we found most of people’s social networking is done while on a computer, and decided a desktop application would be best to explore. Technology, however, is always evolving into more practical and convenient interactions and we later decided to move to a more mobile solution. When we started looking into the most popular mobile platforms, there were a lot interface elements on the computer that we wanted to translate to a versatile solution. So naturally, we decided to go with a tablet sized mobile platform, and chose to go with the Apple iPad since it makes up 90% of all tablets shipped. With the introduction of social media, we felt receiving information about our friends and what they

wanted to share has really revolutionized the way we go about acquiring news and stories. The iPad has turned reading large or even small amounts of information into something that can be done while in a relaxed environment, or even while on the go. We really liked the concept of combining all of these social networks into one application received on a mobile platform to replace the idea of having multiple internet browsing windows open on your computer. This would improve the way you interact with these different networks not only at home, but also anywhere else you would like to bring your mobile device.

The Mobile World


RESEARCH

10 Shift Process


Application ResearchSince our application is designed to gather information from a number of different social networks into one platform, our first goal was to gain a true understanding of all the interface elements of these various sites. Each of these networks are used on a daily basis by millions of people worldwide and users quickly become familiar with the interface and functioning of these networks. For this reason we set about trying to understand these user interface elements and mimic their purpose. Our mission was to find out what worked and what did not on these various networks and combine them into a large collection of screen shots. Once we had collected these different elements we printed and organized them to analyze what

general purposes were and find any similarities and differences across platforms. Utility, Media Management, Feed, Tags and Credits, Menu, System Notifications, Find and Follow, and Statistics were the categories developed.

12 Shift Process

Utility is a expansive category that allows the user to customize their own world. Some of the features of utility include settings, creating content, updating personal information, and customizing look and feel.

Feed is the fuel that returns a user back to a network time and time again. These notifications and continues stream of new media can be fun, quirky, or downright awful, having one that is not only functional, but ascetically pleasing when combined is vital to the growth of this application.

1 2

2

1


Media Management is the keystone to media networking. These pieces of information are they purpose and calling of these networks. From text, photo, video, link, and even sound, these pieces of media and how you control them are vast and vital. Rather they are your own personal post or any of your “followers” the way these elements are displayed can make or break a network.

Tags and Credits are important and often overlooked elements of networking. For one to expand their viewing area and to be found they must tag their media so others may find it. These words and phrases can be used on many networks. Additionally, making sure one accurately give credit to all that is due is both necessary and respectful.

4

3

3 4

14 Shift Process

Menus are your road map to understanding. Although less in depth as other aspects of these networks. Menus must be simple, easy to find and understand, and most importantly allow you to do all the tasks that are necessary in that network.

System Notification is vital to keep the user informed on updates and notifications. These notification let the user know what is going on when they are performing certain actions or tasks. Some of these actions include when something is published, how much something has uploaded, or even if you are missing a required text input field.

5 6

6

5


Statistics are what excite the user. This keeps the user informed with important update including page views, popularity, when other members have joined. One of the main reasons people join these networks is to try to gain followers and followings to grow their social network. Statistics give the user hard facts on what is going on in their virtual world.

Find and Follow is a part of maintaining a healthy social network is continuing to grow. Part of ever y social network is the ability to find new people. Find and Follow allows the users to find people they may know, people with like interests, or people who follow similar people so they can continue to find new connections and grow their network.

8

7

7 8

16 Shift Process

SKETCHES


After the initial idea was created and we had resolved which user interface elements we wanted to draw from the existing sites, we were then able to sketch out visual ideations of how the application would look. Overall we were quick to come to the resolution of having a square based grid that outlined all the different networks into one scrollable plane.

The main purpose of the app was to be able to collect various network updates into one location. We decided it was best to compile updates of all the networks together based on the most recent update time into one grid. We then wanted to allow the user to filter these different outlets; by creating

a series of icons, this allowed the user to “filter” these networks and look only at the updates they wanted to. Additionally, it was vital to have the user able to distinguish which network each of these post came from, we initially resolved this problem by applying a different color band to the top of each post that corresponded with the network it came from.

The second element of our app was the ability to create different types of post, this was simply resolved by creating a left menu panel with each of the post types: Text, Photo, Video, Audio, and Link.

Ideations

20 Shift Process


Before we brought our ideas to the computer, or even had detailed sketches of our screens, we roughed out our basic ideas in sketches. This allowed us to do basic layout and decide where key elements from our research would be generally placed. This round of sketching was less about how it look,and more about essential functions of the app.

Initial Sketches

22 Shift Process


Once we had refined our sketches a little more we were able to develop a clean, solid sketch of what our design would look like. Like the initial sketch, this was designed to be more about layout than design, but we began to add design elements at this phase. Some of these elements include the solid color line at the top of each post that identified which network a post had come from.

Finished Sketch

24 Shift Process

DEVELOPMENT


After the initial idea was created and we had resolved which user interface elements we wanted to draw from the existing sites, we were then able to sketch out visual ideations of how the application would look. Overall we were quick to come to the resolution of having a square based grid that outlined all the different networks into one scrollable plane.

The main purpose of the app was to be able to collect various network updates into one location. We decided it was best to compile updates of all the networks together based on the most recent update time into one grid. We then wanted to allow the user to filter these different outlets; by creating

a series of icons, this allowed the user to “filter” these networks and look only at the updates they wanted to. Additionally, it was vital to have the user able to distinguish which network each of these post came from, we initially resolved this problem by applying a different color band to the top of each post that corresponded with the network it came from.

The second element of our app was the ability to create different types of post, this was simply resolved by creating a left menu panel with each of the post types: Text, Photo, Video, Audio, and Link.

Wireframe

28 Shift Process


30 Shift Process


32 Shift Process


34 Shift Process


REFINEMENTS

38 Shift Process


Like all good design, Shift went through a number of refinements and changes, before it reached its final resolution. After some consideration and ascetic rethinking, we decided the definition between posts and the networks needed to be more obvious. For this reason our first alteration included creating framed boxes around the post and placing it on a dark, textured background. The second major reconsideration was the definition of what type of network a post was from. Instead of identifying each network with a bold stripe of color at the top of the post, we decided it was more simple and cleaner to do it with a small icon in the bottom right side of the post.

The second major alteration we made to the overall ascetic and function of the application was removing the left menu bar that took a large amount of space, and replacing it was a simple small icon in the top right that would bring you to a new menu. This change did not only allow there to be more room for the grid, it allowed the posts to be larger and more understandable from a distance.

Design Evolution

40 Shift Process


PRODUCTION

44 Shift Process


After a final look and feel of our application was decided on, we went forth into production stages. Here is where we focused on the interface studies we achieved with the screen shots and started pulling in the necessary elements from each network. We wanted to compose the interface with our own style, while still giving our user a taste of the elements they were familiar using on each network. One of the biggest challenges we faced when creating each screen is when you would tap into one of the posts. Here is where the grid would shift over and you would view an enlarged version of that particular post. Each network’s post has an enlarged screen with an interface created with elements not unlike those seen on their website.

Finished Screens

46 Shift Process

1


2

48 Shift Process

3


Like social networks themselves our app had to have a certain level of security and protection for the user. This login form is the first instance they user will run into when using the app on a regular basis. Additionally, this page also doubles as a introductory page to create a new account for a new user.

If a user chooses to create a new account, they are guided to this first page to the account. This page covers the basics for personal information, here the user will create a user name and password and attach an email.

The second step to the sign up form is the linking of the various social network. Step two of the create account process guides the user to give their personal login information from the various social network sites which will then allow them to get instant updates from any and all of these networks.

2

3

1

50 Shift Process

4


5

52 Shift Process

6


After the user creates their account or login (if they have already created an account in the past), they are then greeted with our Main grid which houses the key social network updates. This main page is where the latest feeds are compiled, where a user can create a post, customize the interface, and even change their personal settings.

If a user chooses to create a new post while in the app, they simply click the create post icon in the top right of the menu. They are then shifted to a new page where the user can choose between a text, video, photo, link, or audio post. The menu interaction changes slightly depending on the selection.

One instance of a user selecting a new post is the twitter feed. When a user selects a twitter post from they grid, the boxes shift left revealing a simple Twitter interface that shows all of the latest twitter updates that are happening for that particular user.

5

6

4

54 Shift Process

7


8

56 Shift Process

9


Twitter posts updates of user based on @notifications.

Twitter list compiled of favorite posts selected by the user.

Twitter personal profile information.

8

9

7

58 Shift Process

10


11

60 Shift Process

12


Flickr detail post updates shows the users posted photo and creates a frame around the photograph. The user can pinch and zoom around the photography or click the zoom icon in the bottom left of the image to explore the photo in more detail. Additionally, the user can also favorite the photo, share the photo, or leave a comment on the photo.

A Tumblr photo post acts in the same way as a Flickr post for the interaction.

A Tumblr post, like a Flickr post has the option for the user to leave a comment. When the user selects the reply button a comment box is dropped allowing the user to write a review, leave a comment, or just write about they image.

11

12

10

62 Shift Process

13


14

64 Shift Process

15


When a user opens a Facebook post from their grid, they will see the information regarding the post itself, the location if it is available, and any and all who are tagged in that post. From their the user has the ability to read comments in response to the post or post their own response.

Vimeo videos act very similar in the fashion of Tumblr or Flickr posts. The user can view comments, favorite the event, or share the post. However, there is one additional link that allows the user to flag a video as inappropriate.

You Tube performs many of the same interactions as the other video network Vimeo.

14

15

13

66 Shift Process


Twitter posts updates of user based on @notifications.

Twitter list compiled of favorite posts selected by the user.

Twitter personal profile information.

8

9

7

ENVIRONMENT

70 Shift Process


72 Shift Process

The icon set is the identifying feature of the iPad application when it is not open. The banner and “S” give evidence of the user interface within the z without over complicating or over busying the icon. The simple, clean design allows for quick and easy recognition of what application it is regardless of the size.

Icon Set


Documents

Shift: Process Book