City Around

cityAround is a real-time location-based community that gathers tourists from same nationality to share information about the city they are currently in. This project involved Full-Stack development. I used html, css,  javascript, jquery, bootstrap, node.js, socket.io, express.js, digitalOcean and MongoDB to experience the whole process of developing an app.

 

 
 

    2017.2

Rapid Prototype, App Development, Interaction Design, Visual Design
Sketch, Html/CSS/Javascript, websockets
 
demo.png
 
3-4.jpg

Persona & Scenario

Name: Yumin
Age: 24
Nationality: Korean
Job: Visual Designer in Seoul

  • Outgoing and easy to make friends with others
  • Curious about and want to try new things
  • Knows about English, but more comfortable to speak Korean
4-2.jpg
  1. As soon as Yumin arrives in Hong Kong from Seoul, she gets a notification that she is invited to join a Korean Community in Hong Kong. Therefore, she taps the button “join” and gets into the group chat with other tourists like her.
  2. While shopping in the IFC mall at about 7:00pm, Yumin sees a picture from the group that there is a fireworks event happening right now in Victoria Harbor.
  3. Yumin wants to go to the event too, so she text the group how long will the event last and how to get there from IFC Mall.
  4. Someone in the group answer her question that she can take a ferry directly to there.
  5. As there are 3 ports showing on the road indicator, Yumin is confused about which one to take the ferry from. She then takes a picture of the indicator and sends it to the group.
  6. Someone answers immediately, “take the first one!”
  7. Finally, Yumin gets to Victoria Harbor and enjoys the beautiful fireworks.
 

UI Design with Sketch

 
 

Front-End Development

 

Sever and Database

Using digital ocean as a server and mLab as my database.