The design document below highlights the work I did for a startup I co-founded called Uxplore in Shanghai (2009). It shows screen mockups created in OmniGraffle and high-level requirements which were used to develop a prototype of the service.
Vision: Explore. Experience. Share.
A web application for foreigners visiting or living in China to find great places to visit, plan how to get there, and share their experience with others.
- Search / view places in a select city on an interactive map (integrated from Google)
- View detailed place information
- Suggest and edit place information (with approval workflow)
- Add comments, rate and share places
- Add places to personalised itinerary (re-orderable)
- Generate route map showing directions between each place on itinerary
- Provide downloadable / printable / emailable PDF of itinerary / route map
- Allow users to save itineraries and share on Facebook / Twitter (static link)
- Be a platform which can be easily expanded to other cities (starting with Shanghai)
Landing home page showing What and Where search options:
Users should enter the area they wish to explore (e.g. “Nanjing Road”, “Park Hyatt”, “Pudong”) or a place name (e.g. “Shanghai Art Museum”). They should then select what they want to experience (Attractions, Restaurants, Shopping, Entertainment or Hotels) and click Go.
Main Map (Search Results & Itinerary)
This takes them to the main results page with map showing “Search Results” and “My Itinerary” panels (shown here with share overlay also):
Users can click on a place name in the search results list or on a place marker on the map. This brings up the place information overlay showing some basic information about the place selected.
They can choose to display “MORE” information about the place or directly “ADD” it to their itinerary list (which can be re-ordered by drag & dropping). Once they have built their itinerary they can click “SHARE” to share by email / print / pdf / Facebook / Twitter.
Search module workflow:
The are three use cases –
- What only — will find places based on name / category / tag (in our own DB)
- Where only — will find locations based on address / district (in Google Maps)
- What + Where — will find places around locations (hybrid)
Main Map (Refine Search & Directions)
Main page showing “Refine Search” and “Directions” panels:
After selecting the transport type (Walk / Taxi / Public Transport) on the itinerary list and click “Route” the “Directions” panel is shown. Google Maps API provides point-to-point directions between each place on the users itinerary.
Itinerary & directions workflow:
Shown by click “MORE” on the map place information overlay:
From here users can view detailed place information, add comments / ratings, and edit the information if they know something is incorrect. Users can also click on the metro station name to show it in proximity to the place they viewing on the map.
Place tabs showing comments, share and overview sections:
Users must correctly complete the CAPTCHA image recognition test before their comment is published (to check they are human).
Edit / Suggest Place
Users can suggest new places (using the link in on the top-right of the screen) or edit existing places (using the link on the place information page):
After entering the Chinese address clicking “Geocode” attempts to find the place on the map. If it cannot find the right location or is incorrect the user can manually move the place marker to the correct position (by drag & dropping).
After each edit or suggestion an administrator must moderate whether to approve or reject the changes.