Skip to content

Front End

Jump to bottom
shekhark edited this page Jan 12, 2013 · 1 revision

This is a list of key features and templates for design of the web frontend for http://chalobest.in.

Wireframe designs to visualise and implement these features are at http://sandbox.userinnov.com/chalobest

Table of Contents

Point-to-Point Routing

Mumbai OpenTripPlanner http://trip.chalobest.in

One Page per Stop, Area, Route

These three main feature types with unique attributes will be displayed on a SINGLE PAGE EACH with a unique URL.

These pages would be generic templates to publish our database online and have indexed web pages, with live RSS, JSON and XML feeds which syndicate the data live.

These three key feature types will be represented on a web map as points (Stops), polygons (Areas) and lines (Routes). All the above features will be based on our own frontend web design.

Stops

Areas

  • Example URL http://chalobest.in/area/slug
  • Cluster of points of stop locations within an area bounding box as defined in AreaMaster and StopMaster.
  • GeoRSS polygon feed which updates live any changes to name of the area or stops within it.
  • Fields: Display Name, Marathi Name, Routes in Area (?).

Routes

  • Example URL http://chalobest.in/route/routealias
  • Cluster of points of stop locations along a route as defined in RouteDetails and StopMaster.
  • GeoRSS line feed which updates live any changes to stops on the route.
  • Fields: Route Number/Alias, Route Type, Stop Display Names, Stop Marathi Names, Stage, Km, Schedules
  • Something like BRI Route Template http://busroutes.in/chennai/route/m11

User Registration and User Pages

Notifications

Static Pages

  • SMS number and how-to instructions
  • Android app download and instructions
  • About Us with links to wiki, mailing list, external links
This is a list of key features and templates for design of the web frontend for http://chalobest.in.

Wireframe designs to visualise and implement these features are at http://sandbox.userinnov.com/chalobest

Point-to-Point Routing

Mumbai OpenTripPlanner http://trip.chalobest.in

Lookup guide for all bus routes, stops

Goal

The main intention is to open up bus information in an alternative and more accessible-to-all way as compared to the heavy map based point-to-point routing functionality. The use cases of this functionality are being reviewed to be able to adjust the goal & design to the use cases.

Additional functionality

1. Allow people to get live updates on routes, stops and areas. E.g. 'Bus 521 stalled in Diamond Garden at 15:05, don't wait for it.' or 'Stop Diamond Garden temporarily has moved 50 meters towards Chembur Naka because of road works'. 2. High SEO factor for ChaloBEST website: contribute to showing up high on the list in search engines. 3. Adding comments by the crowd. At a later stage this functionality will be expanded to other elements of the website and/or other media to be able to get consistent and very many responses. (crowd sourced data optimisation & crowd-to-crowd assistance).

Concept

The core of the functionality as of now takes shape as a single page for each area, stop and bus route, each with a unique URL.

Motiviations: - the separate pages are easy to get from the database and require less complicated Ajax, which makes it serve the purpose of opening up all information we have in the time span we have for the current phase. - to additional functionality 1) Unique stop/area/route based URL's make it easy to have live RSS, JSON and XML feeds which syndicate the data live. - to additional functionality 2) many unique URL's with good content help to score high in search results, and help the search engines to find the information users are looking for directly as opposed to Ajax generated pages. - to additional functionality 3) the pages allow to get organised comments per stop, area, route.

Requirements

Notes:

  • The map in the guide is merely an image so it does not carry other functionality than showing an area, route or stop area. No interaction possible as of now.
  • Primary use case as it seems after a few early tries: checking routes leaving from a stop, and finding nearby stops. It seems useful in bus routes to have an entire list of stops upfront for quick inspection of the route, etc.
  • The comments are not yet very developed so I do not know how many we would get on the individual pages. It is a pretty recent development that comments are possible within our time frame because before there was too much coding work in other areas which would not leave much time to code a comment system. This resulted in an under designed/developed comment system as of now. We need to look into segregating type of comments, allow cross posting (eg a comment on a bus route may be relevant to multiple areas and stops too). This part is more or less left for a next stage - ideally this would integrate nicely with social media like facebook/twitter too. See also User Studies.

Navigation

  • Suitable opening page that shows the use for the user of the entire functionality and ChaloBEST as an organisation.
  • Browsable through in-page links to stops, areas and routes (ideally all stop names, area names and route names are links to their respective pages).
  • Searchable through clear search bar that applies to the entire guide but not the entire website.

Opening page

  • Latest user comments.
  • Browse option or search option best?
  • Map (optional, could be helpful to recall names (and/or spellings) to start a search and visually helps people to make the connection with location/route services)

Stops

A stop page is a page with information about a single stop.

  • Example URL http://chalobest.in/stop/slug
  • Map bounding box per stop location, much like http://chalobest.in/editstops
  • GeoRSS point feed which updates live any changes to name or location of the stop.
  • Info-Fields: Display Name (Marathi + English), Road, Direction, Alternative Names
  • Browse-fields: Routes Served including number, type, frequency (or timings once confirmed by BEST, for each route at the stop), English & Marathi direction name.
  • User comments box
Inspiration:

Areas

An area page is a page with information about a single area.

  • Example URL http://chalobest.in/area/slug
  • Cluster of points of stop locations within an area bounding box as defined in AreaMaster and StopMaster.
  • GeoRSS polygon feed which updates live any changes to name of the area or stops within it.
  • Info Fields: Display Name, Marathi Name.
  • Browse fields: Routes (number, fro-to, marathi + english) & Stops (marathi + english) in area.
  • User comments box
Contemplating:
  • major nodes in area?
  • major landmarks in area? (connected to stops)

Routes

A route page is a page with information abut a single route.

  • Example URL http://chalobest.in/route/routealias
  • Cluster of points of stop locations along a route as defined in RouteDetails and StopMaster.
  • GeoRSS line feed which updates live any changes to stops on the route.
  • Info Fields: Route Number/Alias (marathi + english), Route Type, frequencies during the day.
  • Browse fields: Stop Display Names (marathi + english), Alternative names, Stage, Km, Schedules (timings if approved by BEST).
  • User Comments box.
Inspiration:

Current status

Made several wireframes to be retrieved here: Sandbox Current wireframes need revision based on group feedback and adjustments in data requirements - stop, area and route pages will not have the same template anymore due to different requirements per type. Also potentially we need to add timings to the route and stop pages depending on BEST clearance for the same (initially just for user testing).

User Registration and User Pages

Goal

  • Allow users to track their own queries, review their trip plans (later stage) and to manage their RSS feeds or other 'follows' within ChaloBEST.
  • Allow us to stay in touch with our users, to be able to ask them to help us with one time or regular feedback or more intensive user studies.
  • Allow us to know our user base and thus being able to cater to their needs better or to signal under represented user groups who could benefit.

Concept

  • Single page login/sign up (also suitable for light box)
  • Single page for all profile data (queries, profile info, etc)
  • A page for managing subscription/security settings.

Requirements

  • Profile name / PW
  • e-mail id (to verify identity) with id verification upon signup.
  • phone number to connect to SMS with separate id verification for phone number through a code.
  • show SMS query data (only when phone number has been verified)
  • show any other query data once available (web - OTP / app)
  • security means to protect privacy of profile data to the public and to the organisation as per user preferences.
  • security / access: loss of password/change password options.
Contemplating:
  • Request to cooperate with research + confirmation option (would need storage in database too)

Navigation

Mainly simple flow, 1 inside page (change password/security settings page)

  • sign up page
  • sign in page
  • lost password page
  • verify email id page
  • profile page
  • change password / security settings page

Sign up / registration

Page content

  • My Activity: log and RSS feed of search and SMS queries
  • My/Favourite Stops, Areas, Routes with links to above pages
  • My details: name/number/email as stored (+ edit/delete options)
  • Remove logs of my activity option?

Current status

(By Subhodip Biswas)
  • Signin : you can signin if you have a user account.
  • Signup: You can signup using you email to create an user account. System sends an email and you click on the link provided in the email to activate the account.
  • Profile: A user profile with your mugshot if any or a monster as profile image. And some more user details like (about me, date of birth, gender,etc). This part is customizable.
  • Edit Profile: Edit details if already exists or create if none.Upload a mugshot or pic if you don't like the monster.
  • Change Password: Change your password.
  • Change Email Address: Change your email address
  • Privacy : controls if you want others to view your profile or not.
  • Messages: You know an username, message that person.
Busy with: Can we plug OTP to this profile? Can we use SMS for user feedback linked to the user profile?

Notifications

=> Which part of this goes on the website? I think we can put a twitter feed.

Static Pages

SMS

number and how-to instructions.

You can find the current text here:

Android app

download and instructions Current text:

About Us

Short history

History & motivations behind the project

[Short]

Links to wiki

- Main wiki - Memorandum of Understanding?

Mailing list

=> which mailing list, since we have closed the current one for new people?

External links

- ?

Contact

Was there a reason not to have this? I think there should at least be an e-mail option.

Join us

Listing of various activities going on Any specific skills or type of people we are looking for Call to join the team Sign up option

Open Issues & Wish list

Stuff mentioned in this list has not (yet) been accepted for further design & development, but would be interesting or necessary to solve at some point in later development.

Rail integration

Requirement type:

  • required for proof of concept of rail integration
  • required to provide a wholesome travel support system
  • not for general proof of concept
Issue/to do list:
  • logo & name refer to bus
  • OTP can handle trains easily, only the transportation guide (bus/stop/area pages) need rail addition
  • user task flow for trains has not been mapped yet
Where is this a problem:
  • when people see the name/logo they think it is only for bus
  • when searching the rail data on ChaloBEST search tactics or information required may not match with what is available
Solution options branding:
  • change the logo to something that reflects public transit
  • keep logo but provide tag line for all public transit
  • [add]
Solution options searching railway information:
  • do quick & dirty user research for train users (information required for just train, information required for bus/train combination)
  • make distinct icons for bus/train
  • [add]

Finding the right location

Requirement type:

  • Not crucial for proof of concept, but probably crucial for users later on.
  • Needs user testing esp from multiple language backgrounds
Issue:
  • There are official names,
  • Repeated names (e.g. Ambedkar road in Bandra and Dadar) and
  • popularly used names,
  • lack of names or awareness which requires use of landmarks and prominent or well-known features.
Where is this a problem:
  • When trying to find a "from" or "to" location.
  • When trying to specify the route with a 'via'.
Solution options brainstorm:
  • Fly-out on mouse over with alternative descriptions of the location in the map view
  • Allowing search via search box to show also alternative names, landmarks and descriptions in auto complete
  • Allowing auto complete to show things on the map dynamically
  • [fill]

Crowdsourcing of transit data

Requirement type:

  • essential for updating and improving detailed travel information
  • not for general proof of concept
  • needs proof of concept creation by itself
  • should consider any city, also cities newly starting out with transit data collection.
Issue:
  • How to enable interested citizen in small towns and cities create and mountain an online transit information system for their local transit network? The broad goal is to make an online application that will enable citizens to create a GTFS feed for their city from scratch.
Problems/things to solve:
  • Creation of a new transit project or operating circle for a city/town - If the website aims to have bus route data for all cities in India, how will the data be managed and separated from each other? will it be based on geographic region of coverage or by operating agency?
  • Importing transit data - How can a user upload some basic transit information to the site for his city? what kind of data points will be easily obtainable by him either manually or from his local transit agency through RTI? How will he compile the information and upload it in what format? csv, google docs?
  • Crowdsourced georeferencing - How will users be able to map the bus stops or routes in the imported data?
  • Map based data manager - How can users explore the dataset and make updates and corrections? How do you moderate the changes and verify accuracy of crowdsourced transit information? What data points do you crowdsource and allow the user to change?
  • Community tools and communication channels - What platforms and tools should be used to enable active participation in the crowdsourcing effort of transit data? How to make it fun for people to use and communicate with each other? How to empower citizens to actively participate with the transit agency to make public transport better?
Brainstorms:

How to manage data generated by users from all-india:

  • [add]
How to easily get basic data to start database by citizens:
  • [add]
How can users gps-map bus stops or entire routes and add that data in the right place:
  • [add]
How can users explore datasets and make updates/corrections?
  • [add]
How can we moderate changes & verify accuracy made via crowdsourcing in datasets?
  • [add]
How can we engage/empower enough people to make crowdsourcing for public transit data a success?
  • Find who could be the most active crowd sources and address them specifically, eg students or regular travelers with smart phones.
  • Create/use Facebook groups with public transport enthusiasts and create a challenge for them to log as much as possible in a weeks time - keep reporting every day how much has been done.
  • Get an article in the newspaper to gain support or at least awareness of the project, so that when you ask people to help they already are inclined to help you.
  • Make the data logging as easy as possible for each type of logger. Specify different types of information that can be logged so that each person can do something they are very comfortable with (eg translations, adding local names/landmarks, gps data, etc).
  • [add]
Clone this wiki locally