City Tutor

Principles of Software Design for Learning

Click here to try iteration 1 of this project

Time: Jan'13 - Apr'13
Design Methods: User Interface Design, Wireframing, Info Architecture, User interviews, Competitive Analysis, Learning Principles, Scaffolding Design, Project Management
Tools: Sketching, Photoshop, illustrator, Fireworks, Balsamiq
Link: City Tutor Application Iteration 1, Final paper

For my Principles of Software Design for Learning class I worked in a group that designed a mobile application that helps it's users to navigate and get familiar with new city, learn about local places and facilitates local language learning.


When people are moving to a new place, especially a city, they feel intimidated, lonely, and isolated. They are eager to get familiar with the city in a short time, and be a part of the city community. They want to learn their surroundings and engage the community but often have trouble doing so for many reasons including not knowing where to start.

Our solution

We designed an app that helps the user learn a new city, the local language and helps them make connections with other people in the community. By using this app learners are able to learn the local area geographically, historically and culturally through actual mapping via Google Maps, a Wikipedia-esque API embedding for the historical aspect and peer support via community outreach/creation through reviews and path teams. This learning is accomplished through a variety of scaffolding, badging and community support that differentiates it from other apps that aim only to get you from Point A to Point B.

Target Audience

1. People who move to a new city for a job or to study.
2. Tourists, especially those that will be in the city on an extended stay.

Design Process

After brainstorming an initial concept, we started building on ideas of what affected us most deeply when we have been in situations where we were strangers in a strange land without a full set of language skills to help us learn our new homes. We started with sketching and determining the information architecture:

Information architecture

User Interviews and Competitive Analysis

From there, we developed a set of questions and did potential user interviews to determine exactly what people wanted or were looking for. We discussed apps that already exist that fulfill some of the requirements. We did a more formal competitive analysis of apps that related to travel like the Lonely Planet app. At that point, we started discussing various educational theories and how we could utilize them to make the app a better learning tool, but also fun and interesting. In terms of educational theories, we quickly zeroed in on motivational issues, behaviorism, and constructivism.

Wireframes and lo-fi Mockups

We then drew up a series of wireframes to help us figure out what the flow of the app should be and used storyboards to help flesh out the wireframes more fully. We drew more detailed lo-fi mockups that evolved into digitized screens as well as an interaction map to helps us better visualize what the finish product would look like.

Final Screens

The next stage after this would be to actually build a working model which is something that we did not do as it was beyond the scope of this explorative concept developmental phase but we did build final screens that clearly shows how the app will look like.


Final Screens for city tutor


This project work helped me to understand Learning Theories. This is one of the projects where we used almost all the important HCI skills. Personal attention and useful feedback from our professor helped us to design a fairly good application. We were also able to complete two full iterations of this app during the concept development itself. I showed the first iteration of this application at Exposition-13 competition on behalf of my team.

Team Members

Anand Geetey, JJ Pionke, Yanqi Wu,