concept framework 2
team’s fishbone 4
about ENVIRONET 5
how we got here 6
concept map 8
scoping the project 10
managing ENVIRONET 14
users test (part 1) 16
paper prototype test 18
users tests (1): results 20
mobile interface prototype test 22
interface design 24
information architecture 26
ENVIRONET website 28
ENVIRONET website test 29
report on interface design 30
technical specification 36
database and middleware scripting 42
about ADHOCIA 46
Digital Media Beyond Cyberspace
How can we add a virtual dimension to the physical world to create a new, collaborative, accessible
and democratised media space that intersects both the real and cyber worlds to enhance peoples’
experience of their environment?
Cyberspace is a term first coined by William Gibson in his novel “Neuromancer” to refer to a near-
future computer network where users mentally travel through matrices of data. The term is now
used to describe the Internet and the other computer networks. However, with
increasing development and use of wireless, ubiquitous devices, augmented and enhanced
reality, convergence and the ‘Internet of Things’ utilising RFIDs, ‘Cyberspace’ is going to
permeate ‘Real’ and ‘Social’ space. This may create an exponentially greater effect on our lives,
growing from ever encompassing media forms of TV, then Internet, and next Beyond
Cyberspace: the Internet of the environment.
“In the days before widespread literacy...Information did not come to people; people had to go to
information (Cathedral example)...Digital Networks finally make it possible to blow up the link
between rich information and its physical carrier... the traditional link- between the medium and the
message is broken” 1
Physical locations have information embedded to them. This information is authored, accepted,
directed and allowed by its ownership. Digital networks/media enable to create, storage and retrieve
information related to individual/collective experiences linked to physical location/places without
damaging its ownership. This allow individuals to virtually own their location/space
related experience and sharing it with others. Physical location/places and their messages/
information are no longer restricted to the laws of nature time/shape/space but enriched by
Mission Statement: To create an “Internet of the environment” that aims to be as open and
accessible as the Web Internet.
This project will work towards creating a democratisation of the environment, differentiated from the
corporate, mediated environment of the city space. It will take digital media beyond the confines of
the computer or ‘virtual’ space and incorporate it into the ‘Real’ environment. This will create a
collaborative virtual dimension within the Real World by attaching digital data to physical locations
using GPS and mobile technology.
Target Audience at this stage are early adopters of mobile technology who utilise GPS enabled
devices, who also seek an enhanced sense of autonomy, adventure and spontaneity within their
The application will enable people to associate (bookmark or ‘tag’) physical locations with digital
information, which will be made universally accessible. Other users with GPS enabled devices can
receive the digital data that has been left in a specific location (be it a message in text, a picture, a
video or sound clip).
One specific scenario involves people using this ‘Internet of the Environment’ to leave specific
information about the place (pointing out things of interest, an interesting story about
something that took place there, a picture of there from a different time, a clip of video created
there that says something about the place, an audio file which compliments the surrounding space
and perhaps info about where are other relevant or connected places). Other users who pass
through that space can then have their experience of the place enhanced with this additional media.
Users don’t find this information on the Internet, they come across it as they move within the
physical world by receiving it via their everyday devices such as mobile or PDA with GPS.
This adds a sense of adventure, mystery and unpredictability to the physical world by
incorporating a dynamically changing and evolving digital dimension.
References: 1 Philips Evans & Thomas S. Wurster (2000)“BLOWN TO BITS. How the new
economics of information transforms strategy”. Harvard Business School Press.
Focusing five individuals to work collaboratively is not an easy task. Each member has individual
values, objectives, visions, different personalities, cultural backgrounds, different defense
mechanisms and her/his own ways of interacting in a team. In order to focus the team to
develop the project successfully we used the Fishbone exercise. The Fishbone exercise enabled
us to focus our unstructured collection of our individual characteristics in a form of different
steps that lead to the completion of our project.
The Concept in Brief
“EnviroNet” is a Web-based application for location-aware (e.g. GPS enabled) mobile phones
and devices. It allows people to attach or to search for digital data that is relevant to their own
community and which is linked to physical locations.
Users can ‘search’ for data by inputting their community’s descriptor or by using keywords.
Leaving the application running on their mobile device, it alerts them when they pass a relevant
‘tagged’ location. Users can also upload data by ‘tagging’ specific locations, adding their own
messages, keywords and community descriptors to the system, to be subsequently shared with
EnviroNet is ultimately intended to create multi-layered community networks in which digital
media is superimposed over an urban area. Our aim is to enrich and enhance peoples’
experience of their environment, as well as to assist newcomers to various communities. We
also envisage EnviroNet helping to educate the many different types of people that inhabit the
urban environment about each other.
how we got here
During our first brainstorming session, all members of the team wrote their areas of interest
on a large whiteboard, we then linked these areas to one another until we had a large network
diagram covering many aspects of interactive media. We then identified areas where our
interests converged. One particular ‘node’ was that of ‘democratised’ media, which in our
definition, includes software and applications which are freely available for anyone to use, to
enable them to create their own digital media content.
In early June, we came up with the idea to do a ‘Locative Media’ project. Although at this stage,
we didn’t know it was called that, or that anyone else had done anything like this. We simply all
agreed the idea of linking digital information / data / media to physical locations was potentially
exciting. We termed our project ‘Digital media, beyond cyberspace’, with the aim of creating an
‘Internet of the Environment’. Our project manager, Christiana then came up with the name
Early concept research revealed there have been various projects involved with linking digital
information to physical locations. These include Locative Media projects / platforms such as
‘Urban Tapestries’, ‘Aware’, ‘Headmap’ and ‘Equator’ and Location-Based Services such as
‘Dodgeball’, ‘Jambo Networks’ and ‘Plazes’.
We realised we were going to need to be very specific to differentiate our project from others of
this type. We decided to focus on the local area of ‘Elephant & Castle’ possibly to do something
related to the re-generation project. We also looked at other existing locative projects, to see
how ours could build-upon or differ from them. We found that most weren’t ‘spontaneous’ in
the way we initially envisaged ours to be – i.e. that the user is alerted unexpectedly when they
pass though a location ‘tagged’ with digital data, rather than having to specifically look things
up wherever they are. We also found that most were text-based, so we sought to combine other
media if possible (images, then possibly video, audio).
Technical realisation of this type of media was the next area to research. We had to identify the
mobile devices (i.e. PDAs, Mobile phones, laptop or tablet PCs, Head-mounted displays etc), the
coding & applications (ranging from platforms such as ‘Mobile Bristol’ and ‘Geonotes’ to scripting
languages such as XML, GML and RDF) and location-sensing technologies (such as GPS, GPRS,
WiFi, Bluetooth) that could potentially be used to create our product. However, accurate and
affordable location sensing is something still being developed, and can become highly technical
and beyond our practical means.
During our Usability tutorial with Ella, who is very knowledgeable in this area, suggested we
focus more on the user-experience, rather than the technical aspects of this problem. She said
computer scientists were working on many projects to resolve these technical issues. Ella
suggested we could be more effective in differentiating out project from other ‘Locative media’
projects by focussing more explicitly on the users, and by asking questions such as ‘What does
it give people that they need?’ and ‘How does using it affect their behaviour?’ She suggested
we develop an open-ended model, conducting in-depth user studies to get an array of different
uses and generate new ideas for use. Ella also suggested a simulation might be worth doing, as
otherwise we may get too diverted into the projects technical implications.
We then thought about many different possibilities for our product, including ‘virtual’ notice
boards and locative-mediated bus stops. We were still undecided, when we went to meet Lee
from ‘Headshift’. He spoke about their work, and enthused about social software and social
‘tagging’ (‘folksonomies’) which he argued as a means of putting people back in control of
the powerful tool of language. He showed us Headshift created site ‘Brixton links’, which uses
geoURL to dynamically create a site with RSS-fed content all about the Brixton area. He also
talked about the idea of maps with ‘hubs’ of different communities ‘hotspots’ overlaying each
other. He suggested creating the application to work on existing mobile devices, to make it
more relevant than a complete simulation.
We liked this idea, and were already very interested in the concept of social tagging, Juan
specifically wrote about it thesis. We decided we’d like our product, which was already
intended to host user-created content, to combine the facility for ‘tagging’ to allow users to
categorise their own entries according to their own keywords. Our coder, Markus, set about
creating a system where this could be done.
We then had a talk with Russell Merryman, formerly of the BBC’s Interactive TV department,
and currently working on Al Jazeera’s Interactive TV. He talked about issues with setting up
Locative mobile services such as the cellular ops tight control over the medium, which
creates difficulties for developers due to the lack of interoperability between networks /
devices. Of creating a simulation, he said faking the real thing in order to prove our concept was
an acceptable, and often practised in industry method. By demonstrating the concept without it
being tied to one proprietary system would mean there would be more companies the product
could potentially developed by. He also stated that the customer ultimately dictates what the
providers have to do, so if something is created that people really want to use, the providers
have to adapt to it.
Our solution was to build it as a real dynamic Web application, but to simulate the GPS
location-sensing functionality. This would prevent it from being diverted by the overly
technical - which could potentially detract from our concept focus of user-centred design, and
take most of our time and resources. This would also to leave it as a more flexible application,
which could be used by anyone willing to link it to the location-sensing technologies.
Interface designer Marcela was also planning to design it using XHTML and CSS, to leave it as
open as possible, and so it would work on Web browsers on mobile devices, rather than needing
a special application installed for it to run. As a team, we had decided it would be an
application for mobile phones, rather than less common, more-expensive mobile devices such
as PDAs, although it would work with these, or any other Web-enabled mobile device.
We decided to focus our user research on the Latin American community in Elephant & Castle,
as we wanted to do something local, which would make it more unique to us, there are many
Latin people in the area and we also have Spanish and Brazilian Portuguese speakers on our
team. They would be one ‘example’ community to focus on for our research and user orientated
product development, although our overall concept was still to create the product to be used by
any community. An early user-scenario to demonstrate the concept was that of someone from a
particular community arriving in a new area (such as a refugee), and using our product to find
out about things of interest and relevance the area.
concept research blog
scoping the project
Project name: ENVIRONET
Initial statement of what we want to make:
How can we add a virtual dimension to the physical world to create a new, collaborative,
accessible and democratised media space that intersects both the real and cyber worlds to
enhance peoples’ experience of their environment?
Online project type: Internet/Mobile phone, Internet
Market Sector: Social/Public
Importance Size of section (large,
Ranking medium, small)
Company profile - - -
Information Yes M large
Information Yes M large
Retail - - -
Database access/ Yes M large
Online transactions - - -
Others: Yes S medium
*MoSCoW = (M) must have, (S) should have, (C) could have and (W) want it to have
**Information gathering and information dissemination will be between users only (information
Browsers: Internet Explorer, Safari, Firefox (website)
Platform: Cross Platform,
As many mobile phones models as possible.
Brands: Nokia, Samsung, Motorola, Sony Ericsson
For the team: Design and develop a dynamic website that can be accessed by mobile phones
and has the functionality of what the ENVIRONET definition describes.
For the users: Have the option to retrieve and post messages using the location aware ENVI-
RONET system. Get the chance to be authors and clients of the system and consequently to
have an enhanced experience with their physical environment.
Access and use
The audience/users: Ideally is general public. In order to prove the concept we are using the
scenario with the Latin ethnic groups in the community of Elephant and Castle. Therefore the
target audience is Latin American people that live in UK.
Mobile Site Promotional Site
Text 90% 50%
Graphics 10% 40%
Animation - -
Audio - -
Video - 10%
Written: Written content, i.e. messages, will be provided by people that belong to the target
Database: Build from scratch
Graphics: Logo and relevant graphics to be created from scratch
Video: Recorded and edited by the team
Time for development
Specialist in the team: Yes (Markus)
Dynamic pages required
Specialist in the team: Yes (Markus)
Focus Group: Latin American Group (Carnaval del Pueblo)
Usability testing: Paper Prototype Test, Prototype Test
Since there is no client or profit for the project there is no budget. However the team will share
possible expenses of the project. The expenses must be no more than 100 pounds.
scoping the project
ENVIRONET is the result of the collaboration between the five members of the team
ADHOCIA. The project took place in a ‘team culture’. A good ‘team culture’ is defined by
England and Finney in their book Managing Multimedia as a collaborative environment where all
members are pulling together to achieve well defined tasks, respect each other’s skills, share
success and failures and where there is mutual support when needed.
ADHOCIA was characterised by a good team culture since it enclosed all the elements
mentioned above. Each team member had well defined individual tasks that led to the
implementation of the project. Because of the nature of the project the management of the
team was not hierarchical, each member had individual tasks that performed with the freedom
and the responsibility of her/his own decision-making. For that reason, respect for each other’s
skills had been achieved. However, the team members had the chance to suggest ideas and
comment on each other’s work during the meetings, allowing this way the team to discuss and
develop the project collaboratively. Consistent group meetings were essential for maintaining
a successful communication between all team members and consequently achieving a shared
responsibility for success and failures in the project.
The management style followed in this project was a combination of the Collaborative and the
Delegation style. The Collaborative style occurred after recognizing that as a project manager I
did not have the right experience, knowledge and skills to take decisions for the different
specialized aspects of the project so I asked for the team to express their opinions to bring
together the experience required before reaching certain decisions.
The Delegation style was followed by breaking down the tasks of each member directing her/
him in a way to the right track for the completion of the project but at the same time
transferring her/him the power of decision-making within her/his role. However, the delegation
allowed by the individual members was controlled by the power of the collaborative decisions
the team made as a whole during the meetings.
The team-meetings took place every Wednesday. These meetings’ purpose was mainly to
evaluate the progress of the project and outline the next steps.
Methodology: A day before each meeting the main points to be discussed during the meeting
were publish in the group’s Blogger (also emailed to the members) in order to keep the meeting
Objectives: During the first few meetings I realised that it was very hard to keep the meetings
focused resulting to miss discussing important issues. The method of publishing the main points
the day before overcame the problem and kept the meetings focused to the main points. Also,
the members had the chance to think and prepare for the discussion points before the meeting
or to suggest any other issues they would like to discuss.
In the last month we had group meetings more often (at least twice a week) since it was the
most productive period of the project and more meetings were required to make sure that all
team members were pleased with the development of the project.
Methodology: The main points of what was discussed and all decisions made during the
meetings were published in the team’s Seedwiki making it available to the team for future
Some members of the team also met to work together when they had to carry out tasks
collaboratively. It is also worth mentioning that many members met ‘virtually’ using online
messenger services to test and evaluate each other’s first developed tasks.
Methodology: Each member was given a schedule with her/his own individual timetabled tasks.
The members presented to the team the development of their tasks during every meeting.
Objectives: This method allowed the team to see and evaluate the development of the project
as a whole (not just from the scope of their own role) and work collaboratively to overcome any
Team’s Seedwiki: http://www.seedwiki.com/wiki/major_project_group_1/major_project_group_
Seedwiki is a web tool that allows you to organize and publish your content for a wide audience
by using your browser. In this project Seedwiki was used to organize and publish the content at
the time the team was producing it. This way the team had access to the process of the project
at all times. The development of the project was saved and organized in the team’s Seedwiki.
This allowed the team to see the journey of the project, track its progress and access informa-
tion discussed in meetings.
The project’s Seedwiki can also be used as a reference for the team in their future projects.
Methodology: All assets produced for the final product (mobile site version, promotional website
and projector file) have been registered using Excel and published as a web page. Each asset
was organized by its name, size, format, date created, resolution, location and description. The
assets have been arranged alphabetically.
Objectives: Registering the assets is essential in multimedia projects because it helps members
locate a file, reproduce or change it easily avoiding time consuming searches. Also, colour
coding the different file formats and locations makes the essential information eye catching.
users tests (part 1)
Carnaval Del Pueblo ‘Places of interest’ Questionnaire
Usability Exercise 1
Tagging Exercise & Target Group
Carnival Del Pueblo, Burgess Park, Elephant & Castle 07.08.05
For the purposes of our user centred development and user testing, we chose to work with one
specific community, to focus on how they might use the application influence development.
We chose Latin Americans in London as our target group as there is a large Latin community
in Elephant & Castle, and members of our team are native Spanish and Brazilian Portuguese
Before we could test our proposed product, we needed content to include in the database. We
wanted to have real and relevant content, in order to demonstrate the application realistically,
and to put our concept and premise to the test – Would people want to ‘tag’ their environment?
What kinds of places would they choose to tag? What messages would they leave? What
language, slang or terminology would they use? And how would their input affect the
development of data fields within the product database?
We conducted a ‘tagging’ exercise, in English and Spanish at the ‘Carnival Del Pueblo’, in
Burgess Park. We asked people to name places in the area that are relevant to their community,
and assign these places with a primary keyword, then secondary keywords, a description, and
an image they would associate the place with.
Peoples’ responses showed that they were happy to share places of importance to them, even
though they were doing it ‘off the top of their heads’ they could think of several key places.
Some places such as the restaurant ‘La Bodeguita’ were mentioned frequently by people from
many different places including Bolivia, Columbia, and Ecuador. More unexpected results
included ‘Continental Links’ a money transfer shop, but tagged with the keywords
‘meeting-place’ by a Bolivian participant, as the shop is well located in Bolivia so many people
use it. This also reflects the aspect of many people in our target groups lifestyle, of coming here
to work and sending money back home.
We collected a lot of primary data, which revealed many places in the area that are significant
to the community, why they’re significant, and what language, terminology and imagery people
associate with the places. It not only provided data for the application and future testing
scenarios, but also an insight into our target groups lifestyles and interests.
PLACE COMMUNITY 1ST OTHER DESCRIPTION IMAGE
The London Brazilian Samba Meeting place, Every Sunday evening this school has Brazilian flag
School of Music, Dance a friendly relaxed Samba practice. with ‘G.R.E.S’
Samba Unidos De Lon-
dres’ (logo of
Elephant & -Brazilian(1) -Cafe -Bars, -The shopping centre looks like a real -An Elephant
Castle -Bolivian(2) -Meeting Restaurants dump, but the Latin cafes and bars
Shopping Place -Shopping, inside add much needed character to
Centre Latin Music this otherwise seedy place.
La -Columbian(1) -Columbian -Good Food -This is a really good place where you -The interior of
Bodeguita -Bolivian(2) -Restaurant -Good Drinks, can find Columbian music, food, beer the restaurant,
-Ecuadorian(1) -Popnillada Meeting Place and other dirnks. to show it is a
-Columbia -Cheap, Clean -A good, sociable place to be with big saloon, a
-Food, Latin, some nice food. nice space.
Music Service - Inside here it is a friendly and -Friends
comfortable environment. -Landscape
-This is a beautiful Latin place serving -People enjoying
popular food in a charming environ- their food
Los Arrieros -Columbian -Club -Restaurant -There’s good food here, but the place Show the place
-Bolivian -Restaurant -Bar, Music is small and the music too loud. is like a small,
Burgess Park -Columbian -Festival -Latin, Food, -We come here every year in August -Big, spacious
-Bolivian -Football Music, for the ‘Carnaval Del Pueblo’ park.
Performance -This is a good place to come at the -The church in
-Sports, Week- weekend, to socialise and play sports. the park.
Ministry of Bolivian Chaney Saturday, Music, -This is a fun place to come and hear Dancers inside
Salsa Dance, good music on a Saturday. the club.
Continetntal Bolivian(2) Money -Responsible, -This is a good office for sending -Elephant
Links Reliable money with a fast and reliable service.
-Internet -People meet up with friends here it’s
examples from the Carnival del Pueblo tagging exercise
also reliable place to use to send mon-
ey as it’s well located in Bolivia.
paper prototype test
Before we created the ‘real thing’ we made a paper prototype version of the application, in order to
help guide our product development according to users responses.
Our test ‘scenario’ was of a Latin American who has moved to the area arriving at Elephant & Castle
for the 1st time. They use EnviroNet to find out about their community. Therefore all our testers
were all from the Latin American community in London, but not local to the area.
The test was designed to take place ‘on the move’. We walked around the area and users input a
search, from a range of options generated from the real content from our ‘tagging’ exercise at
Carnival del Pueblo. As we were operating the prototype ourselves, the exercise was not primarily for
testing the interface usability, but to test the concept of the product - to see how they would use it,
how they feel about using it and what ideas they may generate to develop it’s use.
users tests (1): results
As we were operating the paper prototype and simulating the GPS location sensing, the user
wasn’t really ‘hands-on’ with the interface, however, they all stated that the interface was easy to
use and understand, the menu was clear and the content made sense. This reinforces the simple,
basic design and the following of existing conventions for Web and WAP layouts that our users
seemed to understand. But more results on interface from next test.
All of the users said they enjoyed using it, that it enhanced their experience of the area as it
bought things and places to their attention they wouldn’t otherwise have known about. ‘I only
knew about 2 restaurants around here, now I know there are many more Latin places’ (user 1)
‘I’m impressed, I don’t normally like this stuff’ (user 1)
‘Really useful’ (user 3)
‘The idea is wonderful, the whole thing is very nice’ (user 4)
Users commented very positively about how they felt about the way the application worked ‘in
the background’, i.e. that they input their community and keyword to search, and then just ‘put
the phone away’ and carried on walking, while the application would ‘find things for them’, as they
‘I like that you just leave it and it finds things for you’ (user 2)
‘You can look around, but you don’t have to worry about it, as the phone will look for things for
you’ (user 3)
We need to prioritise the simulation of ‘spontaneity’ in the demonstration. Our concept is based on
the informed premise that all mobile phones will have GPS within the next few (2-3) years. USA is
having all new model phones incorporate GPS to improve emergency services. We won’t be using
GPS, but this spontaneous effect was very well received and commented on by users. To do our
concept justice and demonstrate it effectively it would be great if we could simulate this effect.
Users really liked the product, even with only 4 keywords available for them to choose in the test.
However, they stated it would be more useful, personal and relevant if a wider range were
available, such as for other communities such as Sports players, Gay community, Music taste vari-
‘If this was more specific, it would be perfect’, ‘I would like to use it for festivals and concerts’
‘The more people use it, to add more varied information, the better it will get’, ‘This service would
be very popular for the gay community’ (user 4)
Again it would help to demonstrate in our show the concept of how the application will grow and
include ‘something for everyone’ the more people use it. Perhaps by listing possible keywords, or
on the interface itself, including a button with ‘popular keywords’ and entering some
interesting or unexpected terms which will demonstrate the potential diversity of content.
Also, as discussed, we can conduct a ‘tagging’ exercise during the next test, perhaps by recruiting
local people and going more into the concept to see if they can contribute less obvious content
(such as shops or restaurants) and include things like personal histories, experiences, stories etc.
More than one user asked if the messages were from ‘people’ or from the places themselves. One
user was concerned that the system could be easily exploited for marketing (locative ‘SPAM’) or
Create a visible ‘Rate this message’ or similar button on the message page. When users click they
will see how they can rate (or remove?) an inaccurate, offensive, or ‘fake’ (i.e. commercial)
message, to demonstrate our concept goal of the system as self-regulating.
Perhaps we could include a couple of bogus messages in the next test, to see if users understand
and make use of the self-regulating facility, and if they don’t use it, see how we can make it more
accessible for them, as this is an important feature.
One user suggested we may use the same system that’s used when setting up an email account
when registering and have people type out 4 letters shown in a warped image (that a machine
can’t read) to prevent system being exploited to create SPAM.
Some users wanted more detailed information such as Addresses, more detail about places (like
prices in restaurant etc). One user asked if users could leave their phone number if they were
using it for social purposes (but this could be risky?).
As we agreed with the general concept, it is up to users how they use it. This could include
leaving more details. If users were making these observations, it seems necessary to make it
clear in the ‘tagging’ section that users can input whatever they like – maybe on the ‘help’ link
from the tagging page, or in a more general ‘Instructions’ or ‘About EnviroNet’ page?
However we do it, it should be on the next prototype model that we use for the 2nd Usability test.
This 2nd stage test was conducted using the 1st working version of the application on a mobile
phone. Again, we walked around the area, this time users were able to search as well as ‘tag’.
We had to ‘simulate’ the GPS functionality. We did this by entering location ‘codes’ in place of
this being done automatically by the GPS device. This test focussed more specifically on
interface usability, however, it did give the testers a better idea of what the product really
‘It was nicer than last time because it was the real thing… It’s something that would make you
feel closer to home if you find something that’s related to you, for example if you’re away back-
packing’ (user 1)
‘It’s nice to give your opinion about a place, that you can say what you think’ (user 2)
Findings & Changes
Users found the ‘sign up’ process too long, and would prefer to do online, so we added
information to the sign up page stating users could also sign up online. They also noted that
after signing up, they still had to login in, so we changed it to automatically log them in.
Users were unsure whether they needed to fill out all fields, so we created mandatory and
non-mandatory fields and indicated the mandatory ones with an asterisk.
Users wanted to ‘add’ to an existing search to broaden their search, although this is not
possible, by showing that ‘communities’ and ‘keywords’ are optional, they can leave
‘communities’ blank and simply input several different keywords.
Users weren’t sure whether selecting the links would ‘clear’ a current search. We made this
clearer by changing ‘search’ to ‘new search’.
Users were confused by links appearing at the top of the screen- they weren’t sure if the results
were below or on another page, so we moved the links to the bottom of the page.
Users were confused when they didn’t see results at the top of the page, which was rectified
by moving the links and also removing the logo from the top of the screen (which also made
results load faster, and made data transfer smaller, thus decreasing cost for users)
When multiple results were shown, users weren’t sure which ones they’d already read, so we
implemented visited links in a different colour (although unfortunelty this is not supported by all
Users found it difficult to read the message they were typing, so we enlarged the size of the
The Langitude & Longitude fields (only included to simulate the GPS) confused users, so we
moved them to the bottom of the screen.
Tagging process was too long, so we indicated that not all fields are mandatory. The ‘subject’
field was also confusing, so we re-named this ‘name of place’
No real problems here, all users knew to navigate to the ‘home’ page to log out, however, we
decided to add a ‘logout’ link on all pages to save cost for users (as each page loaded costs
Mobile Interface Prototype Follow-up Test
We did some quick follow-up tests after implementing the above changes, to see if they helped.
These were on previous testers, as well as new, to give impartiality.
New and previous users alike found the system easy and quick to master and use, with previous
users stating they noticed definite improvements in ease of use, and stating there was nothing
more they would change.
Only two observations came up-
Firstly the ‘communities’ list was not alphabetical – which could be a problem when the
communities list becomes longer, which we’ve now changed.
Secondly, after adding a keyword using the ‘popular keywords’ and going back to the search
screen, the community button had became unselected. This couldn’t be changed as it would
‘keyword’ field above the ‘communities’, so users would choose ‘popular keywords’ before
selecting a community.
The interface design for the mobile phone website was done using the software Adobe GoLive
CS2. The software support mobile standards such as CSS, XHTML, SMIL, SVG Tiny, MPEG-4,
and 3GPP, all of which have been endorsed by global standards committees as well as leading
companies, including Sony Ericsson, Nokia, Opera, Access, Openwave, Ikivo, and others.
The enviroNET project requires implementing two different web sites. One that will handle the
enviroNET application interface for the mobile phone device, and a second one which purposes is to
promote and inform about the stages, processes and people involved in the enviroNET project. The
later one will also include features to interact with the enviroNET application.
Two approaches are put together to accomplish the navigation structure of both sites.
Firstly, the application of non-linear models to structure the navigation closely to how the user may
perceive the information. Secondly, the design of diagrams to help other team members to
implementing the website.
ENVIRONET Mobile Phone Structure
The smallness of mobile phone screens restrict extremely the opportunities of designing rich
navigational interfaces. The two dimensional space is almost limited to design vertically. Therefore
the design of the navigation has been conditioned primary by usability testing, and interface design.
On the other hand, a diagram reflecting the processes and paths available to users has been
Figure 1 shows the whole navigation structure of the mobile version. Figure 2 (page 27) is a further
description of the LOGIN SIGN UP Flow Process included in Figure 1.
It has been designed following the same principles that with the mobile phone interface. The
difference is that content is not created dynamically. Most of the site is made of different static
pages, with the exception of the section that allows enviroNET application users to edit and delete
posts through the site.
Although EnviroNet’s concept and purpose is to allow people to use the service when they are liter-
ally on the move, a big screen website was created, to promote the idea, and explain more about the
project. Containing explanations about the team, the members, the project, the
development process and the phases it involved and a video demonstrating a possible
scenario; the website also allows people to sign up for the service (since signing up via the
mobile browser might seem a bit difficult for some people), view their posts, edit them and even
delete them. A possible path that may be achieved in the future is to allow people to post messages
and search for places using this website.
Because of this functionality, the promotional website interface was built using pure basic HTML and
CSS, without any flashy graphics or any thing that can cause cluttering of information. The purpose
of the website is to allow people to get to know more about EnviroNet, sign up and use the service of
viewing their posts (through the login box) in a very easy way. For this reason, the interface is clean
and simple to use.
Once created, with all the links working and everything integrated in it, the website was
validated through the W3 website (http://www.w3.org) to make sure that met all the web
standards, for both the HTML code and the CSS. A few errors were corrected until it passed through
the validation. Both logos (HTML validated and CSS validated) were added in every page, with a link
to the validation page.
On the top orange bar, links such as home, site map and contact are separated from the real content
of the website, displayed in the menu on the left, with information about the team, the process and
the product. To make the navigation easy to use, these menus appear in all the pages. The middle
part, where the content of each link in the menus appears, is the only
dynamic thing in the website. On the top of this section, a text with the main link’s name and with
the sub link (depending on the case) appears to show the user where he/she is.
After the user logs in, he/she sees a list of his/her post, sorted by date. The two buttons next to
each post, allows their management. If a user chooses to edit the post, he/she can only change the
message posted (the community and name of place cannot be changed), and if he/she chooses to
delete, the post is deleted straight away.
The blue of EnviroNet’s visual identity is the main color of the website, followed by a yellowish or-
ange that contributes to create a better feel for the website.
We conducted a brief website usability test, to see how us-
ers found our product website, which was created to man-
age posts created with the mobile phone application, as
well as create accounts and find out more about EnviroNet.
Website test results:
Users found all the main functions within the ‘Your Account’
section ‘very easy’ to use.
They understood this part of the website was to check, de-
lete and edit posts & to create an account and get informa-
tion about the service.
They suggested it would be helpful to include prices for the
Recommendation: check various network rates and perhaps
construct a table to show how much an ‘average session’
on EnviroNet (of perhaps 10 viewed pages of data or how-
ever many 1000 bytes) would cost for each. Would need to
state the date these figures were from, that they are just
there as a guide, and that they could be subject to change,
so ideally users should contact their network.
Users suggested they might like to create a post using the
website, but understood this would contradict the location
aspect of the system.
Users recommendation: Users could create a very short
post on their mobile if they were short of time, and just
edit it to a longer post at home using the website.
For the non-account part of the site (with all the info about
the project) users had no difficulty with the navigation,
quote ‘The website is very simple to use.’
Although chugging along rather slowly (more slowly than predicted a few years ago), with phones
and PDA’s becoming ever more advanced, the mobile internet is clearly going to play a big role in the
future of the web. And it is because of this that EnviroNet uses the mobile web, rather than a
downloadable application to allow people to use its services.
Creating an interface for a website to work in a mobile device is not an easy task. This is due to a
series of limitations, such as:
• small screen (120 pixels wide in some devices)
• difficult text input
• costs of data transfer
• processor and transfer speeds are slow
• users are mobile (Their primary goal will be to find a piece of information, not to browse the web.)
• many usability issues involved
Another existing problem is that the technology is not standardized, and what works for one device
may not work for another.
“Be aware that when it comes to mobile browsing, manufacturers aren’t bound to standards in the
same way that the Internet is… The technology is new, and there is a long distance to run before
there is any standardization for mobile browsing.”
- Colly (2005), 7 Steps to better handheld browsing. Available at <http://www.collylogic.com/index.
Devices and browsers have a variety of differences:
Openwave devices support XHTML Mobile Profile with WML extensions. Nokia only supports XHTML
MP. Access and AU Systems only support XHTML Basic, a subset of XHTML MP. (XHTML MP is XHTML
Basic plus the style, hr, b, i, big, and small tags)
When designing EnviroNet’s interface for mobile devices, all the above were taken into consideration,
to allow the user to have the best experience possible when on the move. The interface for was
created using XHTML Basic, which is supported by many devices.
Bellow there’s a list of all the important rules that must be taken into consideration when designing a
website for a mobile device, what was considered when creating EnviroNet’s interface and how these
rules were applied.
DESIGNING THE INTERFACE
Before starting to create the interface, all the options were analyzed as to provide the user with a
service that would work fine in the majority of devices and would not pose any big usability
problems. Combining the user experience and use of computer websites together with their
experience when using a mobile device was extremely important in order to generate an interface
that is easy to use and “instinctive” (the user does not has to learn how to use it).
IMPORTANT RULES TAKEN INTO ENVIRONET INTERFACE
Think vertical, not YES This was the first rule that was
horizontal. Users view the top taken into consideration when
first on mobile devices. designing the interface and is
Therefore, avoid navigation applied in all the pages.
bars, tabs, and side-by-side
positioning. Design from the
Do not design with tables. YES Although used in the beginning
Different devices render tables of the design process, tables
differently. To display a table, a were removed further on, so
device must perform that the interface could work
floating-point calculations, better on mobile browsers.
which slows down the rendering
of the table.
Don’t use large CSS files. YES CSS files are external and
These can result in excessive applied to every page.
visual clutter, reducing This reduces the amount of
readability. They also take a downloading the user has to do.
long time to download, result-
ing in the browser redrawing
the screen after the user is
partway through reading it.
Don’t use large graph- YES There is only two graphics in
ics. These take a long time to the entire website: EnviroNet’s
download and costs more to the logo in the first page (login)
user. and in the second page (home).
Keep text styles simple, YES EnviroNet uses a non-serif font
otherwise it becomes difficult to (Verdana), which is easy to
read the information. read in all devices, without any
Use few colors. The differ- YES To differentiate between the
ing screens and user situa- body text, links and other
tions mean that colors may not information, two colors were
be experienced as you intend used: gray for the first and blue
them, and may not be for the later.
distinguishable from each other.
Keep content short. Keep the YES The content was made as short
site’s content short and to the as possible without lacking
point. essential information to the
user. Sentences were made
shorter and in a more direct
way. For example, instead of
saying, “Rate this message
as inappropriate” it was used
IMPORTANT RULES TAKEN INTO ENVIRONET INTERFACE
Don’t use drop-down menus YES No drop down menus was used.
for navigation. Users won’t The navigation is made by
understand or use them. links, buttons and radio
buttons, which proved to work
fine in most devices.
Use a simple graphic at the top YES In all the pages there is a
of the page with a differentiated blue capital letter
navigational icon suggesting word, to indicate to the user in
what site and what portion of which page he is now (home,
the site the user is at, plus a search, post, search results,
brief title indicating what about, help…)
page the user is on.
The top of the page is prime YES The most important information
real estate; you do not want is displayed at the top of each
the reader to get bored page. This was reorganized
scrolling to the content. after the second usability test.
Don’t use frames or pop-up YES No frames or pop-ups were
Set the width and height YES For the both of the logo
attributes for the images so images, the exact width and
that the page can be laid out in height were specified within the
its final form even before the XHTML code.
images are loaded.
Use efficient, semantic markup YES The XHTML code is all very
and leave the presentation simple and clean, and all that
to CSS. regards the different styles
used and within the external
The content of the service YES The content of the website was
should fulfill the needs of made as clear as possible for
the target user group and be the target group, being
optimized for the most common displayed in a way that takes
tasks. efficiency in the first place.
Keep user Task flow fluent YES The interface was made very
simple and easy to understand
and navigate, so that the user
doesn’t get stuck at some point
or waist time finding his/her
It is better to provide 30 YES There is one page for each of
links on a single page rather the links. In sections like “Post”
than five links on six pages. and “Search”, where there are a
lot of information to scroll down
through, everything is on the
same page, instead of being
divided into two pages.
IMPORTANT RULES TAKEN INTO ENVIRONET INTERFACE
Going back and forth be- YES In all the pages the user can
tween pages may take more find all the menu options, so
time in XHTML, as the pages he doesn’t have to keep going
are backwards or forwards to find
downloaded separately. what he is looking for.
Provide proper feedback for YES Every time the user sends an
user actions and for error and information, he is notified about
problem situations. the action taking place or if any
error occurred. (e.g. “wrong
password”, “no results found”,
please fill in the field
Remove unnecessary white YES The XHTML code for each page
space and comments inside is just a few lines long and no
code. extra spaces between pieces of
Keep the pages light. YES Apart from the first page (login)
and the second page (home),
all the pages are made of pure
text, being very light and quick
Use high-contrast colors for YES Because the background of the
images and fonts. website is white, dark colors
were used for the fonts (grey
and blue), being easy to read.
Avoid background images. YES No background image was
used, as it would take too long
to download the page and also
costing more to the user.
Don’t use black or dark YES No background color was used,
background images or as this would make it too
colors. difficult to read the information
Use the same, simple color YES As mentioned before, apart
palette for all the graphics in from the grey, used for the
your site. This will help ensure normal text, blue was used
a consistent look and feel and (with different font styles) for
contribute to site identity other information (links, page
Use alt text for images. Obvi- YES Because it might take a while
ous, but important on a hand- for the mobile browser to
held device. display the image or even in
the case of devices that don’t
display images, the alt text was
used in both of EnviroNet’s
image as “logo”
IMPORTANT RULES TAKEN INTO ENVIRONET INTERFACE
Text for buttons and links are YES All of them are in low case
better to read if they are not in (including the first letter).
Users start to lose control if YES/NO Although the form is all in one
the form is longer than two page, it is a bit long. But, in
screenfuls or if the form is order to make the service
split onto several pages. efficient, all the fields for both
“Search” and “Post” are
When designing a website for a mobile device, normal HTML is not valid anymore. Mobile browsers
read XHTML, which is more concise and simpler than the previous one.
In this case, the application Adobe GoLive CS2 was used. It not only allows the creation of either
XHTML Basic 1.0 or XHTML MP but it also allows the creation of specific CSS for mobile devices. It
also includes a preview for small screen rendering and other facilities for the creation of websites for
When using the application to create EnviroNet’s mobile website, the easy to use interface of the
software was used together with XHTML editing to result in a simple and efficient code.
External CSS works better for mobile devices. Taking this into consideration, a style sheet, “mobile.
css”, created to work with mobile browsers (as the software offers this as an option) was applied to
every page, with the media type specified as “handheld”.
As Karen Stevenson, who has extensive experience in the use of CSS for handhelds explains, “The
future for handhelds will be XHTML and CSS, using a style sheet designated with the media type
“handheld”. WAP sites are dwindling (or at least not growing) and the newest handhelds are moving
to XHTML/CSS. Phones that are labeled “WAP2” can use regular web sites, not just WAP sites. I know
XHTML/CSS sites work great on at least some WAP2 phones”.
But because some devices do not read the “handheld” media type for CSS, another CSS, exactly
the same as the “mobile.css” was created, but instead of “handheld” as media type, it has “screen”
(screen.css). This was done because some current phones apply “screen’ styles. “…In some cases
the phone carrier runs pages through a proxy that strips styles out even if the phone could recognize
them, so it’s a crapshoot figuring out what will get applied. The best bet is to just keep it simple.”
(Stevenson, 2005, Style Sheets for Handheld Devices, Available at <http://css-discuss.incutio.
Although the Style Sheets used were kept very simple, they were not used to make the website
look nicer, but to help the user navigate through the website efficiently and consider usability issues
For both CSS used (mobile and screen), a few classes were created:
.link – used for the links on the menu of the home page. The font is grey and underlined (all links are
underlined to make sure the user knows it’s an hyperlink).
.deflogo – used for the text that appears at the beginning of each page to tell the user where he/she
is. The font is displayed in blue and in capital letters.
.linkbut – used for the links at each page. They work as a menu with options like help, home, logout
and so on. They are displayed in blue, bold and underlined.
.name – used for information that has to be differentiated from the rest, such as the main categories
of the forms. It is displayed in grey and bold.
.back – used at the search results page to separate different results found. It constitutes of a light
blue background for the text.
.backdark – used in the middle of the text as a link/button that takes the user to another page or
executes an action. Applied to “rate inappropriate” and “popular keywords. The text appears with a
darker blue background, in bold and white.
.linkse – used in the search results page for the name of the place. It appears in grey, bold and
.button – used for all the buttons in the interface. Text is blue.
.border – used around the links on the home page, as to make it clearer to the user that it is the
main menu. It appears as a thin blue line.
All the above proved to work really fine in all mobile devices the interface was tested on, not
cluttering the website with unnecessary visuals or styles.
Although some mobile devices do not read the font property (some display the website with the
default font of the device), Verdana was used for all classes of styles as is an easy to read font
(proved by the usability tests).
Two main forms were used on EnviroNet’s mobile website (“Search” and “Post”). Although the use of
forms is not recommended, the whole concept depends on that. The forms were not separated in
different pages, to avoid extra costs of data transferring for the user, and for usability issues.
Usability tests conducted at the Nokia Research Center, proved that users do not find typing in a
mobile device website such a hassle, since they are used to the mobile keyboard to type SMS
messages. This was also proven in our usability tests.
TESTING THE INTERFACE
While designing the interface, tests were done using the Small Screen Rendering option on the
GoLive software as well as on the Opera Browser on the computer, through the selection of the
option “view in small screen”. The process was useful as it checked if the CSS for handheld was
Later on, once the interface was ready and working fine, with all the links and pages, (without the
backend code), it was uploaded to the server and tested in a few mobile phones (Samsung E330,
Nokia 6230, Motorola V3 RAZR, Nokia 2650). After these tests, a few changes were made,
regarding the size of the logo, blue background and blue texts. The Logo was scaled to fit in the
smallest screen tested (Nokia Guto), and the blue was changed into a higher contrast and lighter
tone for the fonts, and into an even lighter tone for the background of the text. Once another test
was done to make sure everything was working fine, the integration with the back end code was
The implementation of enviroNET requires the selection and design of hardware and software
resources. The following sections start with a model of the enviroNET application that will direct
the subsequent research on technologies that provide location awareness. It also includes a
section justifying the decisions taken in the selection of technologies. The report concludes with
the application architecture behind enviroNET’s proof of concept.
1. System Requirements
enviroNET project is a web based application; its technical implementation at the highest level
of abstraction implies a Client-Server architecture, which involves three main elements:
- A location aware mobile device running a web browser rendering the enviroNET user interface
and capable of transmit user location.
- A web application server able to run enviroNET.
- Client and Server communicate through the Internet.
The model will allow enviroNET to be scalable and platform independent. Furthermore, it sets
the framework to realise the feasibility study outlined below and therefore to choose the
hardware and software required to proof the concept behind enviroNET and to demonstrate it
on the degree show.
1.1 The Server
On the server side the web application requires a Database Management System (DBMS) to
store application data, and a web server able to incorporate middleware scripting so it can
interact with the DBMS, process client requests and dynamically create standard web
documents. The server also has to have a fixed public IP address in order to be accessible
through the Internet.
1.2 The Client
Besides a web browser, which is the standard application to render web documents, the client
needs to incorporate a Location Aware System (LAS), which accurately identifies user position
and transmit these data over TCP/IP, the Internet protocol suite, to the enviroNET web
application in a format that is capable to process. Ideally would run on the background, and will
constantly inform the server about client location without the need of the user to input data or
notice this process.
2. Feasibility Study
2.1 The Server
This study involves research on appropriate technologies so a decision can be taken according
to human and economic resources available.
To implement the server side, the project has at its disposal a Mac OSX Server with public
unique IP address. It includes MySQL as DBMS, Apache as web server, and PHP as middleware
scripting. Within this framework one of the team members will take the role of developing the
server side part of the application by designing the database, create the coding necessary for
the middleware part and ensuring that the application performs accordingly.
2.2 The Client
On the other hand, the client side is more problematic. Despite of being able of running in any
platform, the target client is the mobile phone. The concept behind enviroNET implies making it
as open and accessible as possible. The most ubiquitous mobile device capable of accessing the
Internet is a cell phone that implements General Packet Radio Service (GPRS). GPRS is a mobile
data service implemented in GSM networks, and supports among other protocols TCP/IP.
Having selected the platform for the client device, the most difficult part is how to include the
LAS bit. Mobile phone LAS available are:
LAS for Mobile Phones:
LAS can be classified depending on the position techniques they implement to resolve device’s
Absolute LAS determine actual location globally. These systems have wide area coverage and
position is determined based on coordinates that have been used to map the area. Global
Positioning System (GPS) and the Global System for Mobile Communication (GSM) implement
The Global Positioning System covers the whole Earth surface. It was designed and is controlled
by the USA Department Of Defence. It is available to use free of charge. It’s a satellite
navigation system that uses at least 24 satellites that are on low-orbit. In order to implement it
is necessary a receiver that works in conjunction with the satellites. The receiver calculates its
position on the Earth by a method of triangulation using four of the satellites. The information
received is expressed in latitude, longitude and elevation. The basic GPS schema has a median
accuracy of 10 meters .
Despite of its wide coverage, it has some limitations. Weather conditions may affect reliability.
The signals emitted by satellites are not strong enough to reach receivers inside buildings; in
addition, in highly dense urban areas like cities, the urban canyon effect causes GPS to lose
Next generation GPSs are currently being developed to overcome these deficiencies. The
European Union has created the Galileo project, which implements stronger radio signals,
promising greater accuracy and functionality outdoors as well as indoors. 
Mobile phone network providers can determine the absolute position of mobile devices
subscribed to their networks. They use different techniques like cell ID, enhanced CELL ID, Time
of Arrival (TOA), Angle of Arrival (AOA) Its accuracy varies from 50 to 200 meters. Network
providers charge for providing this information, and they have already developed different
Location Based Services (LBS) over cellular networks.
This system combines GPS with GSM localization. It overcomes the urban canyon effect
associated to normal GPS, and provides greater efficiency. Mobile phones handsets have to
include GPS receivers. Assisted GPS is being encouraged by USA and European laws to enhance
emergency services. They have mandated that mobile network providers have to be able to
locate users within 100 meters. 
Relative LAS determine the location by relating device’s position to other objects in the
environment. To accomplish that, device and objects have to share common communication
protocols. Objects in this sense can be wireless 802.11 networks, GSM cell towers or Bluetooth
devices. Those communication protocols identify objects with a unique ID. When the device is
in range to communicate with them, the device “listen” to those objects and send the ID to a
central database where information on the location of those objects is stored. The location of
the device is obtained by triangulation, in a similar way as GPS does.
3. SELECTION OF TECHNOLOGY
The main objective of enviroNET is to proof the concept at the MA IM 2005 degree show. The
exhibition runs indoor and the objective is to allow visitors to grasp of the utility of the concept
behind enviroNET. enviroNET uses User Centred Design (UCD) approach, and even though the
development of the application will be ideally implementing a LAS, to gain an appropriate user
Having decided the server side of the application, an analysis of the possibilities of using one of
the previous LAS is carried out.
Using GPS requires that either mobile phones have a built-in GPS receiver, or an external one
that is synchronized to the device. In the first case, mobile phone models that have built in GPS
receivers are still rare, and minimum price is over 200 pounds. Handsets with capabilities to
communicate to external GPS receivers are more affordable, and a valid package cost around
In either case, there is a need to build an application able to obtain the GPS data, and parse
either to the browser on the client device, or to send it to other application server that
communicates with enviroNET, so information about the location can be processed.
Develop those kind of applications require knowledge in software development languages
capable of using operating system’s components, like Java, C++, or .NET, depending on the
platform in use. Bluetooth, which is the common protocol used by GPS external receivers and
mobile phones to communicate, can only be accessed by application developed using those
This information is provided by network operators in a charge per request scheme making it
considerable expensive for an application like enviroNET. Furthermore the Applications
Programming Interface (APIs) as well as applications able to process this data require the same
software development skills that in the case of using GPS.
It was considered the possibility of setting up Bluetooth beacons, and creates a triangulation
method at least for the degree show. PlaceLab is an Intel research project that aims to
provide a framework for developing applications that requires implementing LAS. To overcome
the inability of GPS to work indoors, PlaceLab uses relative positioning by listening to fixed radio
beacons with unique cell ID like wireless 802.11 networks, GSM cell towers and Bluetooth. The
PlaceLab framework applies to commodity hardware like laptops, PDAs and cell phones .
Bluetooth beacons can achieve an accuracy of ten meters in PlaceLab, but it takes the client
device at least ten seconds to recognise cell ID and other non intended beacons in the
environment can interfere in the process. Furthermore, using PlaceLab within enviroNET
requires knowledge of Java, and clients for enviroNET to use at the Degree Show would be
limited to those devices provided by the team.
A review on the different technologies that could be implemented to provide location awareness
to enviroNET has been outlined. The main concern of the research has been to draw the
possibilities and limitations of the systems, as well as the feasibility of implementing in
accordance to human and economic resources. After evaluating the different risks involved in
taking any of them, the team decided to simulate location awareness at the Degree Show, since
the primary goal of the project is to demonstrate that enviroNET fulfils a need, Location Aware
Systems could be implemented with the right resources, and when technology becomes more
accurate and easier to implement in mobile phones.
5. Proof of Concept
Having decided not to incorporate a LAS, but to simulate it to proof the concept, the enviroNET
architecture is depicted in the diagram on page 49.
On the Server Side, the Operating System (OS) is Mac OS X Server, which includes the Apache
Web Server that host enviroNET web documents and make them publicly available to the
Internet. These documents are created dynamically following a three-tier architecture.
The Data Storage repository holds information units. The Business Logic layer includes server
side scripts that manipulate the information units to meet application requirements. The
Presentation Layer is responsible for the interface of enviroNET.
On the Client Side, the mobile phone the interface is rendered by an XHTML browser that
provides interaction capabilities to make request to the Server Side.
Client and Server communicate through the Internet.
1. Nova N., Locative Media : a literature review. Ecole Polytechnique Federal de Lausanne.
Lausanne. February 2004.
2. Borriello G. et al., Delivering Real-World Ubiquitous Location Systems. March 2005.
3. Lamarca A. et al., Place Lab: Device Positioning Using Radio Beacons in the Wild.
In proceedings of Pervasive 2005, Munich, Germany
4. Wikipedia, GPRS. Accessed on 29 August, 2005. Available at http://en.wikipedia.org/wiki/
When planning the development of enviroNET, it was decided to use PHP and MySQL as the
main server-side technologies.
In order to speed-up and facilitate the coding process, the repeated use of various
functionalities of PHP, such as the inclusion of frequently used sections of code from external
PHP files, proved to be very effective. The use of this feature also allowed me to simplify the
structure of the code and to keep file sizes to a minimum. Furthermore, this technique allowed
me to implement changes rapidly, whenever the results of usability tests necessitated these.
Furthermore, it as ensured that the existing code contains a satisfactory number of comments
and explanations regarding the code’s purposes. These comments will allow me and other
programmers to understand the code more easily.
As the main enviroNET system is supposed to be accessed from mobile devices, it was essential
to work within certain parameters for the development of this website. One of these restrictions
had to be adapted to include the error-handling control structures of the application. This was
done by implementing a large number of user-feedback messages into the structure of the
website. In other words, whenever a user performs certain tasks or makes mistakes (e.g.
searching for non-existent content, searching or posting without specifying parameters, logging
out, changing of password, etc.), the system has to provide the user with an appropriate
message, in order to allow the user to get a deeper understanding of the system.
To ensure that enviroNET is only accessed by and contributed to by authorised users, who have
completed the sign-up process, it was essential to implement access-privileges that are being
controlled by a login procedure. These confirm a user’s identity by comparing login details with
existing information in the database. Once a user has successfully signed in to enviroNET, the
system keeps track of the user by creating session variables, which allow access to the system’s
Another method of increasing the security of the enviroNET system is the use of encoding data.
Sensible data, such as the passwords of users are being stored inside the database in an
advanced encryption format. Whenever the system needs to verify sensible data, it uses a
passphrase to encrypt the data, before comparing it with the stored copy inside the database.
As enviroNET is a public, content-driven tool with the aim of enriching users’ lives, where
every user has the potential to publish content without any restrictions, we were concerned
about the possibility of offensive, commercial and otherwise inappropriate content being
published. In order to prevent enviroNET from becoming an advertising tool, we chose to
provide every user with the ability to rate existing posts as inappropriate. By doing so, a user
nominates the deactivation of the concerned post. Whenever a message is being rated for the
third time, it becomes inactive and will be excluded from the search results. Furthermore, the
user who posted this message will be rated every time one of his / her messages is being
deactivated. When a user is rated for the third time, his / her account is being deactivated.
As enviroNET consists of two co-existing websites, namely the one that is accessed via a mobile
device and the one that can be accessed via a regular computer-based browser, we required a
script that allowed me to determine what kind of device a user is using to access enviroNET. The
PHP function HTTP_USER_AGENT allowed me to retrieve a user’s browser information. We then
wrote a script that searched this information for common data of operating systems. Thereby,
I was able to redirect those requests coming from mobile devices to a different URL than those
that indicated that the user was currently using a computer.
When creating the database structure for enviroNET, one of our intentions was to make it as
efficient as possible. Therefore, it was ensured that no duplicate data exists in the database, as
this could slow down the retrieval process. Furthermore, the amount of information users can
provide for certain aspects of the database is restricted. While users can still create posts that
contain very long messages, other information (e.g. personal details) undergoes certain
quantitative rules, which will ensure the seamless communication between the system and the
Another feature that is aimed at increasing the efficient use of enviroNET is its capability to
communicate with the users through email. If an existing user forgets his username or
password, he / she can make use of the provided functionalities on the computer-based website
and request his login details. enviroNET will then send an automated email to the user with the
requested information. Furthermore, users are being sent emails upon successful creation of
their user account. To enable this feature of enviroNET, I had to make use of PHP’s mail
See diagrams on pages 52-53.
When scoping enviroNET, we initially planned to develop a system capable of using GPS
coordinates, in order to determine a user’s exact location. However, our research showed that
we wouldn’t be able to fulfil the technical requirements for such a system with the resources
available to us. Therefore, we decided to simulate the locative aspect of enviroNET by asking its
users to provide their location in form of two single digits, which stand for latitude and
longitude. In order to facilitate the user’s understanding of how enviroNET would ideally be used
in everyday situations, we decided to provide the user with appropriate visuals, representing
the locations where he / she currently searches or posts messages.
We abandoned our initial idea of using a series of posters in combination with coordinates,
because it could have made it too difficult for the user to make the connection between his
actions in different locations. Instead, we intended to produce an interactive and responsive
multi-user tool, which would assist the user by personalising his experience of and path through
The resulting tool is an interactive Macromedia Flash Player, which continually accesses
enviroNET’s database to request a list of currently active users. This list is then being compiled
using PHP and parsed back to the Flash Player in form of an XML Object.
Users can interact with the tool by searching or posting messages in the enviroNET system.
Every time a user performs such an action, his username and location will appear on-screen, as
well as a visual of the chosen location.
See diagram on page 53.
Site structure for enviroNET (mobile site):
index.php mobile/about.php H mobile/login.php C A mobile/abuse.php F
Determines user access of Information F Verifies username and S F Deletion of user account H
enviroNET through computer regarding the password with due to publishing of
or mobile device by checking purposes and aims information in database. inappropriate content.
browser information. of enviroNET. Then redirects to index.
web/index.php mobile/index.php A mobile/signup1.php A mobile/signup2.php A
Displays the enviroNET Displays Login screen H Provides form for H Stores provided C
website that is aimed at if no session data is information required information in database.
F F N
computer browsers. found. Otherwise, to sign up for enviroNET.
mobile/ C A mobile/ C A mobile/ A mobile/ C A mobile/help.php N
searchtag1.php H F postmessage1.php H F changepassword1.php H logout.php H F Contains help content F
Provides form to Provides form for Provides form to Destroys session for several pages of
N N F N H
search for messages. posting messages. search for messages. variables. enviroNET.
mobile/ C A mobile/ C A mobile/ A
popkey.php H F postmessage2.php H F changepassword2.php F
Provides a list of Stores messages in Displays overview
N N C H N
popular keywords. database. of found results.
mobile/ C A
searchtag2.php H F
of found results.
mobile/ C A mobile/rate1.php C A
searchtag3.php H F Provides self-regulating F
Displays details of functionalities.
N H N
Reusable blocks of code:
header.php H footer.php F notice.php N mobile/create_ S These files contain sections of code,
Code for HTML header Code for HTML footer Provides user-feedback session_data.php which are used in various parts of the
for various pages. Creation of session website. This “recycling” of code
connect_db.php C auth_user_test.php A
Code for connection Code to check user’s facilitates and speeds-up the
with database authorisation development of a project.
Site structure for enviroNET (web site): Projector structure:
index.php mobile/login.php C web/delete.php A
Determines user access Verifies username and S Deletes a selected F
of enviroNET through password with message from the
computer or mobile device information in database. enviroNET system. Projector
by checking browser info. Then redirects to index. C
mobile/index.php web/index.php H F web/messages.php A Request
Displays Login screen if Displays login screen, Displays a user’s from XML Object
M V F parsed from
no session data is found. general explanations messages. Provides Projector
T N H to PHP PHP to Projector
Otherwise, displays and information about options to edit and
homepage. enviroNET. V delete messages. M C
web/ C A
logout.php H F Database
Destroys session web/edit.php M C A PHP PHP
variables. Provides form for T V F
File (Projector table) File
to be edited.
mobile/forgot2.php N C web/content.php M V
Sends user details to F H Contains all the H F
user’s email address static content for web/store.php C A
upon user’s request. the website. Updates an H F
in the database.
web/signup2.php C N mailer.php C N These files contain sections
Checks provided H F Sends emails to H F of code, which are used in
information before users when signing
various parts of the website.
storing it in the database. up or forgotting password.
This “recycling” of code
facilitates and speeds-up
Reusable blocks of code: Search or Post
the development of a project.
web/nav.php web/menu.php mobile device
V M web/create_session S
Contains code for Contains code for _data.php
main navigation navigation menu. Creation of session variables.
web/header.php H web/footer.php F Provides user-feedback Mobile Mobile Mobile Mobile
Code for HTML header Code for HTML footer for various pages. Device Device Device Device
connect_db.php C auth_user_test.php A web/textmenu.php T
Code for connection Code to check user’s Contains code for a text-
with database authorisation based menu.
Table structure for enviroNET Database: Markus Begiebing
user_details primary key: user_id
user_id first_name last_name email rating status
1 Christiana Karayianni firstname.lastname@example.org 0 1
2 Markus Begiebing email@example.com 0 1
passwords primary key: user_pass
user_id user_name user_pass
1 Christiana christianak
2 Markus markusb
communities primary key: community_id
messages primary key: message_id
message_id user_id community_id creation_date expiry_date latitude longitude address rating status keywords
1 2 1 2005082210.. 00000000 2 1 130, R.. 0 1 Meeting
2 1 2 2005082210.. 20050930 1 1 0 1 Restaur..
user_id timestamp latitude longitude
1 User 2 1
2 Admin 1 1
What motivates us is to enhance people lives, especially those who are not in the position of
power, and we use digital media to achieve it.
We are a team of digital specialists, in a digital era. If we worked twenty years ago, we would
still have the same spirit. Digital is just contemporary to us, but it is not to our ethos.
So we want to liberate the media, if this happened twenty years ago, we might be thinking of
creating a newspaper or a radio program to allow people to be heard, to let them express their
We are not exposing this as a political statement, we are not rebellions, not in the conflict
sense, we are more pragmatic and subtle. We really want to help people now, not to change
the world (which we wouldn’t mind by the way). We simply believe that it will enhance people’s
social experiences, their everyday life interactions by adding a virtual dimension to their
We do not just create; we create because we observe. We create for them and with them, we
call them “users” because this is our digital jargon, but we think about us, human beings. We
want to enhance people’s lives by adapting the imposed environment/lifestyle, and not the
other way around.
team and roles
Christiana Karayianni Markus Begiebing
Project Manager Coder
firstname.lastname@example.org and Database Developer
Juan Garcia Mazy Jane Burns
Technical Manager In charge of
email@example.com Concept Development
from your mobile phone
See the process of the project