D3C Portfolio Blog

Well what can I say? FMP finished!! amazing… So that heralds the end to my degree.

Great week, have managed to achieve lots of targets, good thing also, as Friday was the hand in date, got the following sections completed this week.

• Find Friend
• Account page
• Profile Page
• Linking media titles from the main page
• Linking the users on the friends list to their profile
• Adding the delete function to the reviews page for user replies

Had a couple of problems with the delete function, have created one before but that was for inside a CMS system and the way that this had to work was slightly different, it had to be user friendly and that meant re-writing the script, that coupled with my domain provider going down for 1-2 hours when I was about to start working on the delete function helped build an extra air of tension, which was sawley inconvenient.

Acknowledgments

I would like to thank my wife Ally for putting up with me over the past few years, my Mum and partner Trevor for letting me stay at their house and feeding me over the past few years, to fellow students for inspiration and fun times. To the University and the tutors for the support and facilities and lastly to anyone else I’ve missed off that has had to put up with me recently.

1. Problem solving & methods of working

Problems, something we all have to overcome in design and development, how do we go about solving them and what does it mean in regards to the overall piece of work.

If you have read through my blog you will instantly notice that my main burden for the project was the design. Now let me be the first to stress how far I am away from being a designer, a million miles. Mirupa.com has been through 6 major designs finally settling on its current version you see today.

The major problems regarding the design always laid squarely on the fact that it either didn’t feel like a social media reviewing site, or the layout didn’t make proper use of  the space and the flow/usability was poor. To overcome these problems I endeavoured to research into my competitors, www.rottentomatoes.com, www.ign.com, www.last.fm etcetera to see how they achieved to create a clean yet usable space. Thankfully over time that research did help, it created; to what I feel a clean open design that manages to use the data (to which is a lot) in an efficient way.

Other problems, and there were plenty, came in the form of the development aspect of the project, largely residing in the functions seen on the site. The “Online Friends List” which has been talked about at large in the bulk of the blog;

FMP week #26

FMP week #25

Regardless of the linked posts I shall still, in brief, talk about this problem, suffice to say that when the problem arose, my main focus to overcome the problem was to first, think of all the possible ways of coding this function, talking to my peers if they had ever come up against such a problem and how they overcame it ? (sadly no-one I knew had)  and then step by step coding it and working around problems as the appeared, finally coming up with the solution and getting it working 100%

One other major problem was a plethora of smaller troubles, mainly  centered around coding for SQL, jQuery and learning about Cron Jobs, these all started as problems but I overcame them by taking the time to learn, practice and simply get better at it.

Problems are there to challenge us and make us better at what we already know, they push our boundaries and form an important part of learning practices. My project certainly gained from overcoming my problems.

2. How the product works

Mirupa is a user based social media reviewing website, in short what that means is that users can form a community on the site in which they, themselves, create the content and shape the site itself.

Following that up in detail, how a user and the product works is as follows, after registering on the site the user will be sent an email with their details, at the moment there is no activation system required for users to complete the registration process, that is a function to be built for the future and you can read more about that later in the post. The user will then login to the site, from that point things will look rather empty, this is to encourage them to start using the site, there is also a find friend system that will enable users to help populate their site and start building communities.

The main part of the site is for a user to login into the site after watching, reading, listening too a title, finding that title in our database, or if not present still writing their review and submitting that for the admin to add.

Users can then also reply to their friends reviews, don’t agree with what your friends have to say on a title? then get them told, this is a key part to building the community aspect within Mirupa. Users have the ability to edit and delete any replies they might not agree with after they posted.

Users can get lots of statistics from Mirupa regarding the titles they search or review, stats like, release date, cast, writers, tracks, country of origin and how popular the title is on the site, among many other stats. These stats form another bulk service that the site offers, this service gives users and guests the opportunity to get an idea as to the popularity of a certain title, as per the general public and not glorified critics.

Example: If a guest is thinking of watching a film that was released a few weeks ago at the cinema but wants to gauge an idea as to what the general public think of the title in question they can visit Mirupa.com use the search function on the homepage and that will bring up the stats on the title, its average score, how many reviews etcetera which helps the guest relate to the stats and then form an opinion as to, will they watch the film or not?

Moving onto the construction side of the site, as a developer my main passion is for coding and unfortunately it can become very hard to stop and think to do research and mock up designs for a new site project, sadly that was the case for Mirupa.com. I hastened into creating the index.php file and the index.php file for the user login page.

Mirupa went through 6 iterations in design until I arrived on the theme and layout you see today, to start with I was creating the theme on what I thought was correct, not what others might want. It took a while for me to realise this and that help came from Jay, he kept re-inforcing that fact to me until It sunk in.

Once I had the design sorted and was happy my main aim was to look at competitors for inspiration, too see how they went about similar services, having got enough research development started and I aimed to get that to a level as to open the site up to beta testers, this was the best idea I had. The invaluable information and suggestions gained from the testers helped create a greater site.

Trial and error was a key factor to a lot of the functions as many of them involved learning new techniques and languages to be able to write them myself, I am proud to state that Mirupa only uses one plug-in (the tooltip plug-in) for the whole site, every other function was hand built by yours truly

3. Testing & feedback

User testing was an invaluable part of the creation of Mirupa, on my own I could never find every bug within the site and think of every idea that could help improve it. To start with I created a questionnaire template that was emailed out to a handful of respected friends and family, it asked them to visit Mirupa and then give feedback on their views and opinions via set questions and a section to give their thoughts. Questionnaire below.

User Testing Questionaire

After collating that feedback I then set to implementing which ideas were viable and achievable, that helped in improving the site as a whole. And after that, the site was opened up for a small number of beta testers to register and hopefully give some great feedback, to aide in that I created a form in which beta user’s could leave any comments/suggestions, this was used but not as much as I first hoped, mainly users would relay that information via text, email, facebook or in person.

If any suggestion came about often it was a clear sign that it was worth implementing it into the site, if it was something I might not have had confidence in creating at first I would go about researching that and over time get that successfully integrated. Of course some suggestions no matter how often would be either un-viable or totally out of my reach.

4. Evaluation & Appraisal

4.1 Self appraisal

It was a very slow start to the module/project, trying to find time to work on this project when we were working on two other major projects was hard, before the year started I had every intention to be working on the FMP 4-6 hours everyday, how wrong was I! The reality was managing maybe a couple of hours a week until around January/February and this time was spent solely on design.

Once we entered the second semester of the year I found it a lot easier to find time, enough time to get the work done, the site in which I was trying to create was huge, and within the time constraints I always believed some aspects that were outlined in my proposal document would have to be dropped.

I found it increasing hard to create a good design and layout for Mirupa, this is certainly not my strong point, never having had a creative flare I pretty much stumbled along until I ended up with the design you see today. This design I am very proud of, my design skills have come along in gargantuan proportions since I first started this course and even more so in the last year. A healthy portion of this comes from advice and guidance from my module tutor James Field, he pushed me often to challenge the the reasoning and understanding of the design for Mirupa and for that I will be always grateful, hopefully that will certainly help me in my future employment.

I never had any qualms regarding the development of the site, coding and logic are my forte and the only problem would be/was the time frame before hand in. Don’t get me wrong the project challenged my intensely I had to learn many new languages, coding practices and systems all taking up valuable time but I have come out of this project with a great strength and greater portfolio of skills having attempted it.

All in all I firmly believe I handled this project well, better than I actually hoped, some parts of the site are missing as detailed within my proposal document, they were namely the virtual book club, concert listings, applications and calendar. These features would help create a greater user experience and also a greater community, I know my tutors were keen on the virtual book club and it was a feeling I shared, Mirupa is a huge site that caters for 5 different media types, it is unknown of on the Internet; a site that caters for all 5 and even the ones that cater for just 1 have a team of designers and developers to help create it. So advanced fancy features simply had to be ignored in an effort to achieve the hand in date and for me to be able to produce and display a working site.

I enjoyed this project a lot, the challenge and the outcome, Mirupa will I hope to go on and become a love site, of course more work will have to be done after hand in, after University and thankfully I already have a couple of friends keen on taking the challenge on with me and see how it goes.

I really wish that we had other projects like this throughout the other years, but then maybe if that was so, I wouldn’t of enjoyed this as much as I did.

4.2 Improvements

I hoped to achieve everything that was set out in my proposal document, don’t we always? that’s the whole point of proposing something. Sadly though time is always a major factor and that time forced me to realise that some features would have to be sacrificed. On the up-side with Mirupa being a live site, I really do hope it will go on after University to become famous and create a name for itself.

Below is a list of features that didn’t make it into the site in time.

• Virtual book club
• Online calendar
• Applications
• Concert listings
• User email system
• Media video’s and image galleries
• User friendly and more feature full text boxes
• Image uploader for user profile
• Visual scoring system
• User notification system

The above, baring the concert listings, are planned to be implemented into the site after University.

Having more time would of certainly improved the site, but that is an obvious one On a serious level there were many things that would of helped improved the site and below I’m going to list all of them out.

• Being better at design (Took far too long getting to the final design)
• More user testing (Feedback was slow and hinder the rate I could improve the site)
• Being better at developing (We always need to improve and better ourselves and that would have sped things up)

I have great confidence in my own abilities and feel that these simple factors above factored in the project not achieving everything it intended to from the off-set. Saying that I am very happy with what was handed in and hope the markers can see that in the project and that the site goes from strength to strength.

4.3 Future Scope

The future could be very bright for Mirupa, since the start of the project one of the aims was to continue this project on after University, the scope the site has is great, it’s a site that has competitor’s but not on the level that Mirupa tries to achieve. Already I have managed to gain the interest of 2 friends that are willing to come on board and help take the site to the next level.

A lot of work is still required to bring Mirupa to a level that id happy be make live, If it does go live I want the site to have as many strengths as possible and be able to challenge the reputable competitors immediately.

I’m looking forward to working on Mirupa after University ends and hope it serves well into my portfolio and gaining employment.

Appendices

Below are some files pertaining to research and user testing that might be useful for the reader.

Proposal Document

Final Major Project – Presentation #2

User Testing Questionaire [Dave Carr]

User Testing Questionaire [Susan Wrigley]

In this module along with the work I achieved on Mirupa.com I also work hard on getting the degree show up with my fellow students, creating a showcase site that will show off my work for possible employers.

On the literal long (which happens to be quite short in reality) road to finishing my project.

This week I have mainly been working on the functions required to put the site in a good usable condition, also after a tutorial with Jay and by his recommendation, to which I agreed, I have re-worked the main page to the site (logged out page) made it more in formative and functional also re-designing and re-enabling the registration form.

Inside the login section work has been done on the x-browser compatibility, 1 style-sheet works for Firefox, Chrome, Safari, Opera, IE7 & IE8.  Also been working on auto complete function for the site, it works on 4 levels, the media search, find friend, quick review & media review sections. Been having trouble getting the drop box not to show when any data is inputted into the input box, this I am happy to say has been overcome, through some magic in the jQuery the input now only drops down when a result is delivered.

I just want to take time to iterate the fact that I have designed Mirupa.com in such a way that the design works across all browers baring IE6 (haven’t even looked at the site in this version) using only one style-sheet, I am the only student to achieve this feat and am very proud of that fact. You maybe reading this and thinking “what a shameless show off” but I’ll tell you what, I don’t trust for one second that this would of been picked up by any markers and it is a great skill of design and coding to achieve this level of autonomy.

Areas worked on on the site this week are as follows

• Linking all the data through-out the site so users can access information easy
• Updated the .htaccess file to handle multiple ways of accessing data template pages
• Worked on having the site conform to W3C standards, strangely Opera’s webkit for CCS3 isn’t covered by W3C!
• Turning the static design for the media page into dyanmic and tidying it up

At last! the problem with the “Online friends list” has been resolved!! what cured it was a the fact of using a switch statement to do the logic, having changed to a simple if/elseif statement the code works perfectly now. I suppose that’s what you get for trying to hard to be more efficient with your code and persistent in that and thus ignoring the obvious. OK the if/elseif statement may be deemed less efficient in the developing world but it gets the function working 100% and for that I don’t care what anyone says about the issue

Again a list of the sections I have been working on in the past week.

• Re worked the media search function, also re positioned it as to give it more prominence and make it easier for the user to see and use.
• Having had a tutorial with Jay he mentioned the need to have a visual showing which page the user is on under the links. Implemented now
• Making the top 10 functions dynamic and scripted for the media pages
• Re worked the way in which the switch statements display the image icons for the data it pulls back. It now puts the img in the markup and not within a class background, this was in effort to make the hover function work in IE7
• Started to make the media page template, wanting to implement video and image gallery for each title, just not sure time will permit me to have that fully functional

A good week had.

On a quick side not the problem with the “online friends list” is still being problamatic and im sure it still lies within the switch statement, I just dont understand why, my logic skills are one of the reasons I love developing and things just dont seem to add up regarding this.

Anyway, onto the site in general, work is again steadily progressing and I am happy everything will be on schedule. the sections I have been working on recently are as follows.

• Review page (having to create a 4th column which spans two normal columns in an effort to give more space)
• Autocomplete function, nearly re-writing it to tidy it up, make it more efficient and visually rewarding
• Making sure  mirupa works on all browsers baring IE6
• Introducing a poll system; basic visuals at the moment
• Adding lots of media titles to the database so users can find more titles to review

So a productive week in all, one more down 4 or so to go.

Work continues on Mirupa.com, as the weeks close in and time verses work load becomes evermore conflicting I wonder how; and to what state, will my project site be in, come hand in. I have been vigorously working out a time plan for this and am quietly confident everything, as long as I can stick the plan will mean the work is finished in time.

I came to the blunt realisation that the site will not be 100% complete before hand in, the site I am trying to create on my own; and its size, is huge! this kind of project would require a team of a couple of developers and designers and probably a marketing team to pull off to a 100% complete stage in the time frame.

As design has taken up sooooo much of my working time it has felt insufficient time to develop everything I wished for at the time I started this project and maybe some of those could be what was on the original proposal submitted.

Well on to topics regarding the site in greater focus, the online friends list as mentioned prior in the latter blog post, has been giving me some problems, without boring you to death with overloading technical information, suffice to say that the function which updates on screen via some jquery magic is now and again showing a logged in user as logged out, even when the user is definitely logged in, the problem I am sure lies squarely  within the switch statement that governs the logic in which the cron job will update the database and show the user as logged out.

I’ll be working on this fervently over the coming days/weeks in an effort to improve this as it really shows a terrible visual bug.

So the time just keeps flying by!

This past week has brought up a major problem concerning the user login notification system. When a user logs in the database is updated to reflect a ‘1′ in a field and if that field is ‘1′ then the image in the Friends List changes. If a user clicks the ‘logout’ link when they have finished, the database is updated to reflect a ‘0′ and that changes the image back again.

Now the only problem with that is, that users are lazy… were all guilty of logging out of a site via the close tab/window button on all browsers..

Finding a way to still update the database, even when a user had closed the browser was arduous! firstly I decided to go down the path of javascript, it seemed like it could work but for some codes it would also run if the page was refreshed or a link was used; not very efficient.

So onto trying to find a new way, could AJAX be the solution? after trying that it seemed that AJAX would help do half the job but still if a user closes the tab/window, no script can run due to the page being closed.

It seemed like I would be needing the server itself to be doing the request, bypassing the need for the user to have the page loaded.  I had been informed that a Cron Job was needed.

So after copious hours of coding and trial and error I finally have a working script that will log the user out and update the database even if they close tab/window. Happy days.

p.s Also managed to get a very complex SQL query working for the ‘Most Popular’ system.

Design? such an important thing but alas it drives me insane at times!

I really have lost count how many times Mirupa.com had had its design changed, don’t get me wrong I’m the first to complain that I cannot design but I need to be happy with it and so do the users.

So again I try to get a look and feel that’s fitting with the sites core theme, that gives a decent user experience and is accessible.

Finally (well in my opinion) I have managed just that, I love my new design, the colours flow, the data is clean and tidy and easy to follow. It has been shown to a small handful of alpha testers and I have had no negative comments, everyone so far loves it.

Mock image: 9

So onwards and upwards and back to coding.

p.s wonder if Jay will like it or not?

A collective post this week, with time off University for a couple of weeks this post will catch up on whats happenned over the past few weeks.

• Dropped the module dragging system
• Working on the Friends Online List section
• Basic visual coding for the media & friend search sections
• Working on the seperate media sections, book, film, games, music & tv.
• Creating icons for use within the site.
• Created a 3 column layout for the content on the site
• Playing with ideas on how to show the footer
• Working on how to display the review forms and how they get posted

So quite a lot of work starting to happen now as the focus shifts towards the FMP project. Hopefully the design side of things is over now and I can solely concentrate on developing.