Thursday, 7 February 2013

NYC subway redesign stages (iOS)

Stage 1: Here is the first stage of the nearby page for NYC subway time app. It has line info for both direction in each station. Easy to read timing in a station using GPS. 070213. To download, the app link is here in iTune.

Stage 2: Now I have group them by stopName. Adding the top row format. And all the lines logo. It looks better. But the data integrity is not yet there. e.g. stop 125th street has 2 locations, 1 for line 1 and the other for line 2, 3. My code does not differentiate them yet. 080213

Stage 3: Choose between the 2. Which is easier to read? The left looks nicer with same size. The right has the ability to extend to more timing and using texts for direction.

Stage 4: Have done with nearby page. Now go to the map search from nearby. As the user moves, the map updates the new stops. 0902113

The way to update a dynamic map search: 

                // there is 2 part to update the map smoothly
                // in the beginning, you have the current set
                // 1. add new mapItem from new set
                // 2. del old mapItem from current set
                // Note: current and new interset a certain region
                // that is left untouched.

Stage 5: label the station for easy identification. There is a need to label the station. I cannot identify them at all. Try transparent background. Settle with white as it does not mix with the background text. 090213

Stage 6: Will be adding lines to make the map better looking..! But how to add 2 lines that run parallel? Apple map lacks transport information such as subway line. So it is good I add in the lines with color. User can find the station easier. The problem is there is no line info in the ways where i can put in different colour. Study more..

Cannot find a easy way to get the line info. So I use light grey for all line. The line shows as one move the pan. way -> relation. May need to combine osm way and osm relation. 2 http to draw lines. Is that too much time? How to get osm to return way with line info? 090213

Stage 7:  Manage to find a way to display the color of every line. The idea comes after I am stuck, take a nap of about an hour, and then sit in the dark for 1 hour. I got the idea suddenly at the first 30 minutes of the sit. Before I sit, I think of all the possibilities. And this idea comes again. It comes before but I discard it as not workable. But later, I think and find it possible. Don't throw away a new idea so fast, try it out with a small experiment. 

The idea is to use the node name which contains the line information. And in the way, I get the first node line as the way line. It is not always right but I think it hits 80% of the time. :) And it looks good. 100213

Stage 8: Just done a rough stop page update. I take efforts to become one with MTA Subway app. It does only 3 timing and headed by general direction. Look like there is some timing incorrect in the photo. 100213. 

Stage 9: new favorite page :) design with my love one on 120213.

Stage 10: Lines with status. Effort is taken to display status for every line instead of group of line e.g. 123 as shown in MTA mobile site. 130213.

Stage 11: Wrapping my work on NY Subway Times. 130213. Will be doing 3 days of testing to ensure good user experience. :0

Summary: take me about 7 days to rebuilt. Have been fun doing the programming and problem solving. Will test for next 3 days. debug and refine. Then submit to iTune for update on my iOS app. The app link is here. Just submit to iTune on 150213 after 3 days of testing and more coding. The update should be available by next friday. :)

No comments:

Post a Comment