Research Report

Name Steve Lacey

Student number 07501160

Project Title Speakr: Social Events Directory

Date 25th November 2010

Table of Contents

Project Requirements ....................................................................................................................................................... 1

Functional...................................................................................................................................................................... 1

Non-Functional.............................................................................................................................................................. 1

Research Questions .......................................................................................................................................................... 1

Competitive Analysis ......................................................................................................................................................... 2

Design ............................................................................................................................................................................ 2

Functionality ................................................................................................................................................................. 3

Page Layouts ..................................................................................................................................................................... 4

Task Flows ......................................................................................................................................................................... 4

Finding Upcoming Events in Bristol .............................................................................................................................. 4

Adding an Event ............................................................................................................................................................ 5

Summary ....................................................................................................................................................................... 5

User Research ................................................................................................................................................................... 6

Technical Research & Development ................................................................................................................................. 7

Languages & Frameworks ............................................................................................................................................. 7

Twitter ........................................................................................................................................................................... 8

Google Maps ................................................................................................................................................................. 8

Ticketing Services .......................................................................................................................................................... 8

Travel Planning Services ................................................................................................................................................ 9

Logo Scraping ................................................................................................................................................................ 9

References ...................................................................................................................................................................... 10

Appendix ......................................................................................................................................................................... 11

Entity Relationship Diagram........................................................................................................................................ 11

Page 1 of 11

Project Requirements

Functional

1. Allow users to browse events based on location, topic(s) and price.

2. Allow users to login via Twitter OAuth.

3. Allow users to post events.

4. To dynamically scrape event information and logos from their respective website.

5. Allow users to set themselves as an event attendee or speaker.

6. Along with the other location orientated search filters users will also be able to filter by price range and or

ticket availability / student ticket availability.

7. Enable users to see which conferences other users that they are following on Twitter are attending; with

recommendations pushed to them based on this information.

8. Allow speakers to provide information about their presentations and cross-post them on multiple events.

9. Allow attendees to rate and comment on presentations.

10. Provide users with a map of the facilities surrounding an event such as nearby hotels, restaurants and

internet cafés.

Non-Functional

1. Facilitate the process of users finding interesting events for their social calendar.

2. Require minimum input wherever possible.

3. Facilitate speakers in adding their presentation content and promoting their talks.

4. Recommend events to users based on their interests and previously attended events.

5. To take advantages of technology available in modern web browsers.

6. To degrade gracefully for older browsers.

7. Link data wherever logical possible and technically feasible.

8. Consider future extensibility of the application, and where it can be taken forward beyond the project.

Research Questions

Who are the competitors to an application such as this and what are the paths users must take to complete tasks

alike those that would exist in the system I intend to build?

What are the interests of my target audience and how could they relate to my project?

How can I integrate Twitter OAuth into my application and what are the benefits of doing so?

How does the Google Maps API work and what would be the best way to integrate and make use of it?

Is it feasible to integrate ticketing services such as Amiando and Eventbrite and travel planning services such as

Dopplr and TripIt via their respective APIs into the website and what features could be built around them?

Page 2 of 11

Competitive Analysis

Design

Criteria

Navigation Items Home

Profile

Settings

Sign Out

Calendar

Conferences

Profile

Conferences

About

Blog

Navigation Style Simple blue, textual primary horizontal navigation parallel to the logo all contained within the main heading bar and aligned to the right. The hyperlinks are underlined on hover, no indication of current page provided.

Simple blue, textual primary horizontal navigation along-side the angled logo. Displayed to the right below a bar with login/logout functionality and an ‘add a conference’ button. The hyperlinks have a slight white shadow and highlight a lighter blue on hover.

Simple white text navigation against the dark orange background, align to the right parallel to the logo. Hyperlinks (and logo) move down one pixel on click to represent a natural button feel. At the very top of the page there is a smaller navigation for account management and authentication.

Navigation Summary Very conforming to standard terms that are widely accepted and understood as representing their respective functionalities, the simplistic design allows for easy navigation.

Very focused on the needs of the customer with less standard terms, but appropriate for the content. The main call to action seems to be the ‘add a conference’ button, which whilst integral for data gathering probably isn’t something a large percentage of users (e.g. attendees) would need to use.

Quite focused on the organisation, with only one link being functionality and the rest informational. The design gives a very professional impression, a slight shadow and subtle glow on the background around the main navigation gives it prominence on the page

Colour Scheme One main shade of blue for all links and buttons and shades of light grey for structural element with occasional bits of orange for contrast.

Various shades and gradients of blue as well as yellow and orange gradients for buttons. Also, occurrences of pink and red buttons.

Strong orange theme, with a central white ‘page’ and contrasting light blue hyperlinks and green call to action buttons (with grey less important ones such as ‘back’).

Page 3 of 11

Functionality

Functionality

Public Content

Event Logos

Map to Event Image of map with a

hyperlink to Google Map Image of map with a

hyperlink to Google Map

Event Tagging

Users -> Event Relationships

Attending Attending, Organising, Speaking & Tracking

Event Sharing Facebook, Twitter,

Google Buzz & E-Mail Twitter,

Short URL (on own domain)

Event Exporting iCal, Google Calendar &

Yahoo iCal

Multi-Event Feeds iCal, Google, Yahoo & RSS feeds for both your friends

and individual users.

iCal feeds for your own calendar or a location

(city, region or country)

Add Event Fields What, When, Where

(Links to add: Description, Link)

Title, Tagline, Website, Location, Online?, Start/End

Date, User’s Event Status Twitter: #tag, @user

Title, Location, Start/End Date, Description, Tags

Authentication Requirements

Sign in required, login available via Facebook or Twitter or via normal username, password combo via registration. Little public facing content.

Full-site accessible for unauthenticated users, login available via Twitter for personalised content and extended functionality (marking one’s self as an attendee, speaker, etc.)

Sign in required, website is current in an invite-only mode, unexplained but most likely due to still being in beta. No public facing content.

Embedded Content (Slides, Video)

Favourites

(Presentation Content)

Additional Features Merge duplicate functionality for events.

Events have related books. Users can add books they’ve written to their profile. A speakers’ profile lists those who have spoken at the same events as them, ordered by most spoken-with.

Users can specify tags they are interested in.

Page 4 of 11

Page Layouts

Home Page Event Page Event Listings Page

Task Flows

Finding Upcoming Events in Bristol

Plancast

Lanyrd

Keynotes

Login/Register Select ‘Local’ Tab Click Change Location if needed

Search: “Bristol” Select “Bristol, UK” Location

Login/Register Search: “Bristol”

Page 5 of 11

Adding an Event

Plancast

Lanyrd

Keynotes

Summary

Plancast have made clear effort to implement simplified interfaces, all their forms require as little input as feasible,

with ‘what?’, ‘when?’ and ‘where?’ being the best example of their ‘add event’ form, which demands the least

required input from users out of all three websites assessed to be able to add an event. I think this is probably the

best route to take when designing interfaces and encourages users to enter more data into the system, simply

because it is quick and easy to do so.

Lanyrd and Keynotes’ approaches to these interfaces I found rather more clunky, in that significantly more

information was required from the user, information that it is likely the user would not know such as the twitter

hashtag and username for the event- meaning that the form is best suited to event organisers, who are not always

going to be the person wanting to submit the event to the website. Whilst these fields are not always required fields;

they more than likely present an off-putting interface to the user- I think a good strategy for my project would be to

have simple forms to add an event with then extended interfaces from the public event pages for adding in the extra

information.

Blue and orange seems to be an on-going theme across these websites, blue even features on Keynotes’ primarily

orange theme for most of the hyperlinks on the website. This makes good sense with them being contrasting cool

and warm colours conforming to complementary colour theory. These colours can also be found giving prominence

on the mood board I created, they are most likely used to try and create a warm and welcoming feel to the website,

encouraging users to come back and enjoy using the website. Keynotes make good use of contrast, and I think I will

go with a design at least chromatically similar to theirs, perhaps inverted with blue being for the majority of the

design and orange for small amounts of contrast where appropriate such as call to actions.

Structurally I found Lanyrd’s design very inconsistent, with significant layout changes across many of the pages in the

website. Generally I found this confusing, and it did not aid my ability to interpret the underlying system, the

navigation between pages also seemed somewhat mysterious to me- even now I expect there are many features on

the website that I have missed because I failed to understand how to get to them. This is something I aim to avoid in

my project, it is clear that they have worked with community to bolt on new features as per the demand of their

users; but it is very evident that these are bolt-ons rather than seamless integrations with the existing system. It is as

per the nature of building community-driven websites like this that users have a great impact on the design and

development process, but it is important to invest time in ensuring that consistency is adhered to and that new

Details Check for Duplicates via Search and URL

Click ‘Add a Conference’

Further details via FancyBox, Where, When (Schemaless input)

Login/Register Type Event Name in “What are you planning to do?” text box

Login/Register

Login/Register Post a Conference (Available on Homepage)

Details

Page 6 of 11

features are reviewed to ensure they are implemented gracefully with the website and do not begin to overload

users with information and unnecessary functionality.

Researching into web conferences in particular; I created a mood board (see appendix) reflecting the needs and

interests of the people that attend these kinds of events. I found there was a clear theme emerging regarding the

desire for linked information such as the availability of accommodation, food & drink and WiFi access in and around

venues, noting that people travel all over the world to attend conferences, and often will be unfamiliar with the

surrounding area. It is also evident that the use of social media and community input are very prevalent aspects,

which is something I feel is important to be reflected in this project.

User Research

In order to assess the target audience I decided to research

the general thoughts people are having and social media

exchanges regarding some upcoming conferences.

Doing a simple Twitter Search for #naconf an upcoming

conference in Nottingham (of which trending results are

shown to the right) I found that aside from the standard

“looking forward to see [speaker] at [conference]!” there is a

lot of activity discussing accommodation and travel plans. In

particular people looking for hotel recommendations in the

area and or what other people are doing and how they plan

to get there.

Also, from my own experience I have found similar patterns

emerging during events such as tweets looking for food,

coffee and WiFi- needs all shown in my mood board. This is

something that I think could be aided by a website such as

the one I intend to build, thus; the solution I have proposed

and prototyped is a map much alike ones competing sites use

showing the event location, but also displaying related

facilities as additional markers as per this example:

[Note: these markers are for demo only; more appropriate and descriptive

images would be used in the final version]

I think this is a good example of the various linked data that

could be utilised to provide useful contextual information to

the end-user. An extension of this for future development

could be more specific hotel recommendations and or

sponsorship- including room prices for the day of the event

Page 7 of 11

retrieved from some kind of vendor-specific hotel reservations API; allowing users to assess the true cost of

attending without having to leave the website.

Additionally, from talking to course mates in informal user-interviews it is evident that cost is an important factor for

students. A useful feature proposed would be to be able to filter conferences based on discount prices for students

and or integrate the system with ticketing APIs in order to retrieve live ticket prices and availability directly from the

service which the organisers have chosen for ticket distribution such as Amiando or Eventbrite.

Technical Research & Development

Languages & Frameworks

There were a wide selection of languages and frameworks that I considered when doing preliminary research in

order to create my project proposal document. In light of the large body of work that I had already decided to take

upon I decided to go with technologies that I knew well in order to enable more rapid development and more time

for research into areas of the project that I am less familiar with.

Taking this into consideration I decided that the application I plan to build will be built in PHP, a language I have over

five years of experience including last year in which my skills grew significantly post-introduction to object-

orientated programming in PHP. Other languages that I was considering were Python on Ruby; whilst I still have an

interest in them I deemed them a too steep of a learning curb of which to take on and remain within the scope of

this project.

Having sampled a variety of PHP frameworks on industrial placement at a Bristol-based web development agency I

narrowed down my choices to Symfony1 and Yii2. My reasons for choosing Symfony in the end were mostly based on

the amount of community backing and plugins that

the framework boasts when compared to Yii which

is relatively new and again would be a steep

learning curb with fewer resources available to aid

development.

An article3 by Karol Sójko on his blog Binary

Thinking sums Symfony up fairly well, and as par

the diagram to the right- shows how Symfony was

designed in the mind-set of taking the best features

from other frameworks and libraries in order to

build a feature-full and highly scalable web

application framework to industry standards.

Sójko’s reasoning for Symfony being the best choice for a framework to start with centres on the extensive

documentation provided by Sensio Labs4, which includes the industry renowned Jobeet tutorial5 which walks you

through a 24 days build process for a simple application starting from setting up your server to the finished product.

Sójko also referenced the impressive selection of plugins available, of which the Symfony community deserves

applause for and how the object-relational mappers (ORMs) serve as an excellent means of abstracting database

constraints away from code.

Symfony offers the choice of two main ORMs Doctrine6 and Propel7. I have had experience using both of them and

have decided to use Doctrine for this project due to its more natural (and often guessable) method abstraction for

manipulating data and naming conventions along with the selection features it supports including improved join

functionality over that of which is supported by Propel.

Page 8 of 11

Twitter

There are several options for integrating Twitter with my application; for

example the sfTwitterAuthPlugin8 is more than likely the most viable option,

being an actively maintained Symfony plugin. Unfortunately it is only

marked as compatible with Symfony 1.2, which is about a year old. This

plugin would more than likely be the best option considering that it directly

integrates with the Doctrine ORM.

It is common for Symfony 1.2 plugins to not require too much alteration to work with newer versions of the

framework, but should this be an issue there are also other options such as using modules of the Zend Framework

such as Zend_OAuth9 and Zend_Service_Twitter10. Whilst these are not directly designed for Symfony, due to the

heavily modularised and dependency-free nature of a majority of Zend plugins, should not be too difficult to

integrate into the project.

Google Maps

Both Lanyrd and Plancast have made use of Google Maps’ static

map functionality, to provide an image of a map of the area

surround an event on an event page. This decision I can only

assume was to ensure simplicity, speedy page loads and mobile

compatibility. Whilst those are both important considerations I

think there is still scope to add more useful information by either

using a static map with extra markers for other points of interest

(POI) or by embedding an interactive map with POI marled

allowing a user to zoom in and out and examine the area

surrounding an event, perhaps falling back to the static image functionality for mobile devices or browsers that have

JavaScript disabled.

Ticketing Services

Amiando and Eventbrite are commonly used as ticketing solutions for events like these and both have at least some

API functionality that I have research to assess its viability for integration into my project, and how they could add

features that would be of use to the end-users of my application.

Amiando have two main API’s, a restful ‘EventSense’ API- which whilst

easier to use seems to only be capable of returning information about

events in a given area. Their second API is their XML-RPC API, which is

based on an XML specification which briefly, is based on pushing XML data

to them in order to request an XML response. Whilst this is less simple to use, and somewhat unknown to me- I

deem it the most viable solution as it allows for searching their database based on various criteria, and retrieving a

significant amount of data about a given event; which could potentially be of use improving the quality of the data

when users are adding new events.

Eventbrite offer a completely restful API for pretty much all of their functionality,

including searching events and retrieving event details without the need of

authentication or pushing XML to them. This seems a lot simpler and is much more

familiar to me, with these features being more of an addition to the main build it is

more than likely I would aim for this kind of integration first due to the relative ease in

getting data out of their system.

Page 9 of 11

Travel Planning Services

There are a variety of travel planning services such as Dopplr11 and TripIt12 which I had

considered as feasible integrations with the project. Having researched their respective API

documentations and possible functionality I have decided that integrating these services

would offer little benefit to a majority of the target audience.

The only functionality that would really be of use would orientate around having

events that a user is attending automatically get pushed to these services. I plan

to output this data in a variety of open-source formats such as iCal and would

consider it the job of other applications to support this standard rather than tailoring a specific solution for each of

them. Additionally, Dopplr at present does not have any publically available documentation, it in fact looks like they

have neglected to maintain the hosting for it- which not only makes it an unusable APi without any prior experience

or extensive guess-work, but also gives question to the quality and maintained state of the API regardless.

Logo Scraping

A feature I had envisaged for this project is the dynamic pulling of an event logo from its website for use on event

pages and possibly in thumbnail version elsewhere. This posed a variety of issues, to my knowledge no-one else has

ever attempted to do this with any significant degree of success- mostly because there are near infinite variables to

account for and the fact that it would be near impossible to develop an algorithm with 100% coverage.

I have taken this as a good opportunity to take a look at Node.js:

Node.js is evented I/O for V8 JavaScript, Google's open source JavaScript

engine. With the inclusion of its DOMparser and jQuery modules it is then

possible to manipulate the DOM far easier than in the past via proprietary

DOM extensions for other server-side languages such as PHP.

As part of my research I decided to test the feasibility of this idea. Initially, I looked over the websites of various

conferences that I plan to attend to try and spot any similarities in mark-up; I acknowledged that there were

definitely common patterns, and at the very least for the scope of this project which is serving web conference

websites and hence should be fairly semantic, this would certainly be possible.

From this research I have pushed forward with a basic prototype which is available at http://logo.stevelacey.net. It

functions for the conferences at least on my upcoming/past schedule including the Bathcamp, Future of Web Apps

and Design and the Web Developers Conference. The availability of these logos will play a significant part in the

design process, enriching the data available with graphical context- without impeding on the usability of the system

by adding yet more fields for event submitters to fill out.

Page 10 of 11

References

1 Symfony: Open-Source PHP Web Framework [online] Available at: <http://www.symfony-project.org> [Accessed 09 November

2010] 2 Yii Framework [online] Available at: <http://www.yiiframework.com> [Accessed 09 November 2010]

3 Why Symfony is the best framework to start? [online] Available at: <http://blog.karolsojko.com/index.php/2009/08/why-

symfony-is-the-best-framework-to-start> [Accessed 09 November 2010] 4 Sensio Labs [online] <http://www.sensiolabs.com> [Accessed 09 November 2010]

5 Practical Symfony: Jobeet Tutorial [online] <http://www.symfony-project.org/jobeet/1_4/Doctrine/en> [Accessed 09

November 2010] 6 Doctrine Project [online] <http://www.doctrine-project.org> [Accessed 09 November 2010]

7 Propel [online] <http://www.doctrine-project.org> [Accessed 09 November 2010]

8 Symfony Plugin: sfTwitterAuthPlugin [online] <http://www.symfony-project.org/plugins/sfTwitterAuthPlugin> [Accessed 09

November 2010] 9 Zend Framework: Zend_OAuth [online] <http://framework.zend.com/manual/en/zend.oauth.html> [Accessed 09 November

2010] 10

Zend Framework: Zend_Service_Twitter [online] <http://framework.zend.com/manual/en/zend.service.twitter.html> [Accessed 09 November 2010] 11

Dopplr [online] <http://www.dopplr.com> [Accessed 13 November 2010] 12

TripIt [online] <http://www.tripit.com> [Accessed 13 November 2010]

Page 11 of 11

Appendix

Entity Relationship Diagram

Using data I have collected as part of my research I have built this preliminary entity relationship diagram, which covers most of the tables and fields that will reside in

the system. This is by no means an extensive diagram- during the build process it is likely to mutate as I get feedback from users, but is a good starting point.