JOEALLAM FORMATIVE ASSESSMENT PORTFOLIO MARCH 2012 This document is a work in progress for how my end portfolio will look showcasing the work for my final major project. This is a load of body text as a way of showing how my typography will look throughout my portfolio submission. The remaining text in this section is just placeholder text and isn’t very relevant for you to read. Sus quiatius maxim illisciatios eribearum re nectasp ernatem perepedio consed que nonse voluptatio que pelende ndissec ulluptaque dolorum, nonsequis asitae volorem consequ aerspicid quibus eos si dolor repellorio mo inus ut unt inus doluptate non ex enistium rehendae sed ut quas prae porionestia volorerum id que consediciis atur rernam, volore ea am verum sit, cum que nosapie nisciant, tet lacesto taturi anturis et ommos adita doluptat hillam cum rem aut volupta velitem sapero vel illant aperion re dolorem volore quos in coribus andam, ullaborerunt ad eos esti rescipi cilitati ditiori nis a dolorat iasped quati nullit que natem fugitem. Beriorem sitat. Et faccum ipsam exeratur? Orestia nist, ullita qui doluptate nonsed min rerion num endebit, ut et velendam re, aut officilitat.Evendelest, qui qui autemol uptat.Lest inveles eium ipsam repuda cullanto qui volupta turepudit, sundior ehenima.
INTRODUCTION TO MY FINAL MAJOR PROJECT JANUARY 2012 For the duration of my Final Major Project, I will be aiming to design and build a working online social network. The main principle is that it will allow users to sign up for a profile that will showcase their latest activity from other visual services such as Flickr, Vimeo and YouTube. Each piece of activity will be syndicated into a large grid that will fill the screen to give a great amount of visual impact for each viewer. I have created this concept based on previous personal experience of having to check multiple locations for my own recent favourites, likes and bookmarks and even uploads. By having everything available on one large grid, I am able to check the one place and therefore save a large amount of browsing time. Turning this concept into a social network allows me to open these features up to many other people and allow users to follow each other’s grids and generate commentary between them. YouTube is wellknown for it’s heavy amount of unrelated comments on videos which is why I hope that having my own comments system will enable friends and friends of friends only to see each others comments. The site will be built on the BuddyPress platform which has been built by the creators of WordPress, the popular online blogging content management system. BuddyPress is described to be a social-network-in-a-box because it handles all of the background processing regarding user accounts and registration, comments, posts and activity streams. I will then be able to add to this and customise the user experience/design to fit my own personal goals within this project.
LEARNING OUTCOMES By the end of my final major project I would like to be able to showcase an understanding of web design and d e v e l o p m e n t , p r i m a r i l y w i t h i n t h e Wo r d P r e s s a n d BuddyPress environments. I will then be able to take these developed skills with me into employment once I have graduated from University at the end of the semester. List multiple other learning outcomes here...
TIME PLAN Shown opposite is my time plan that I am working towards.
FINAL MAJOR PROJECT PREDICTED TIME PLAN PORTFOLIO PROMOTIONAL WORK INITIAL USER TESTING
ADVANCED USER TESTING
SITE BUILD AND DEVELOPMENT
SITE DESIGN AND FUNCTIONALITY RESEARCH INTO SOCIAL NETWORKS
JAN
FEB
CONTINUED EVALUTION AND FURTHER RESEARCH
MAR
APR
MAY
AN INSIGHT INTO SOCIAL MEDIA Research into social media using a lot of TED talks and articles within the news. I have been looking to see why and how people interact with social networks and the importance of the user experience matched with the user interface design.
RESEARCH INTO THE FLICKR SIGNUP PROCESS Looking at the user interface design for the leading media websites online; Vimeo, YouTube, Flickr, Twitter and FaceBook.
RESEARCH INTO THE FLICKR SIGNUP PROCESS Looking at the user interface design for the leading media websites online; Vimeo, YouTube, Flickr, Twitter and FaceBook.
RESEARCH INTO THE FLICKR SIGNUP PROCESS Looking at the user interface design for the leading media websites online; Vimeo, YouTube, Flickr, Twitter and FaceBook.
RESEARCH INTO THE TWITTER SIGNUP PROCESS Looking at the user interface design for the leading media websites online; Vimeo, YouTube, Flickr, Twitter and FaceBook.
RESEARCH INTO THE FACEBOOK SIGNUP PROCESS Looking at the user interface design for the leading media websites online; Vimeo, YouTube, Flickr, Twitter and FaceBook.
Vimeo
YouTube
Flickr
Requirements for first signup screen First Name, Last Name Email Address Username Password Secret Question Survey Question Terms and Conditions Birthday Gender Mobile Phone Number Other Email Address Captcha Location Account Creation Welcome Message Tour Recommendations Video Explanations Support/Help Features Friends/Followers Subscriptions/Follow Comments Favourite/Bookmark Like/Thumbs Up Dislike/Thumbs Down Playlists/Collections Groups Forum Profile Pages Personal Messages Explore Blog Location Services Content Photo Video Big Screen Limitations Content Uploads Interactions Externalisation Sharing Links Embedding Social Media Links Vimeo YouTube Flickr Twitter Facebook Website Email Address Online Experience Media Queries Mobile Site iOS App Android App Publicly Visible Content
X X X X X
SOCIAL NETWORK CROSS REFERENCING Looking at the features offered on each of the social networks that I have been researching into. From this I have decided that I would like the following features on the network that I am building: Welcome tour including videos, support/help, friends/ followers, comments, favourite/bookmark, ratings/like/ dislike, forum, profile pages, personal messages, photos, videos, big screen version, limitations on content, sharing links, media queries for different resolutions, publicly visible content.
SCANS OF SKETCHES FOR INITIAL IDEAS
SCANS OF SKETCHES FOR INITIAL IDEAS
START OF SITE DESIGN The idea has always been to display each users activity within a grid based system. This led me to start the design process by working out the mathematics for different screen resolutions and therefore creating a series of column widths that I can enforce strictly.
Me
View
Notifications
Forum
Help
Search
Register
Sign in
Me
View
Notifications
Forum
Help
Search
Register
Sign in
Register
Sign in
Visual Network Visual Network
Me
View
Me
View
Notifications
Forum
Help
Search
Notifications 0
Forum
Help
Search
Register
Sign in
Notifications 0
Forum
Help
Search
Register
Sign in
Notifications 0
Forum
Help
Search
Register
Sign in
Notifications 0
Forum
Help
Search
Register
Sign in
Forum
Help
Search
Register
Sign in
Register
Sign in
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View You
Following Everyone
Visual Network
Me
View
Profile
DRAFT 1 - NAVIGATION
Visual Network
The most consistent piece of design
Me
Notifications 0
Favourites
View
Profile
Friends
Notifications 0
Favourites
Settings
Forum
Friends
Log Out
Help
Settings
Search
Log Out
across the whole site will be the navigation bar. This is also one of the most important elements of the user interface and is crucial to the user experience.
Visual Network
Me
View
Notifications 0
Forum
Help
Search
Register
Sign in
Notifications 0
Forum
Help
Search
Register
Sign in
Profile Favourites Friends Settings
Shown opposite is a collection of the
Log Out
designs from the process of designing the first draft of the navigation.
Visual Network
Me
Visual Network
Me
View
I aim to have a complete working d e s i g n o f d ra f t 1 t h a t I c a n t h e n rework into multiple variations and adapt as users begin testing the site.
View
Notifications 0
Forum
Help
Visual Network
Me
View
Notifications 0
Forum
Help
Search
Register
Sign In
Visual Network
Me
View
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Notifications 0
Forum
Help
Search
Register
Sign In
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
Visual Network
Me
View
Profile Favourites Friends Settings Log Out
CONTINUED DEVELOPMENT From the development of the navigation design, I posted it online to gain some feedback from external people. I listed all the edits that I had considered and got some suggestions back from other people. I then continued to code the design of the site right up to the profile design and the grid itself.
WHAT NEXT... I will continue to develop this portfolio as I progress through with my project. As you can tell, it is very basic at the current stage but I have every confidence that I will be able to create a coherent design and layout for this portfolio alongside the project itself. I will show my development for each of the elements of the site design and through to the informational videos that I hope to produce. I will be starting the basic user testing very soon and by the end of march I hope to have the advanced user testing in progress. It is still very much early days in terms of seeing how the end product will fully function.