Week 6 – MultiPeer App

Team: Xiran Yang & Eva Yipeng Chen


Define the Problem – A Story

PNG image-EA7BBE979121-1.png

Xiran is an international student studying in New York. She is originally born and raised in China, where most of her families and friends live. She has a 12-hour time difference with people she loves back home.

Since she moved to New York, she has been trying to built active connections with her families and friends with the help of different digital tools. WeChat and Instagram are the two apps that she used most often.

She has noticed two major differences between this digital relationship and her physical relationship she has with her family and friends.

  1. She is very aware of the time difference she has with her mom. But even if she always tries to call at time when she thinks her mom would be available, she has failed to have a conversation with her mom. Same case vice versa. She would leave a message, but sometimes her mom complains that  they non longer talk frequently to each other and she feels sad that Xiran does not seem to miss her at all.
  2. Sometimes she would have certain happy moments or sad moments that she wanted to share immediately with her friends. But after they fail to respond and they ended up having a conversation some time later, those strong emotions have already gone away.

The time difference and long distance between two physical spaces have got Xiran to wonder if there could be a type of simple interaction that can not only deliver each other’s love, but also present one’s strong feelings at certain moments in the form of a digital tool,  without it necessarily be a long in-depth conversation.



2019.03.13 (rephrase)

Due to geographical and time differences, we rely heavily on different digital tools to connect with family and friends who live far away from us. Our connection is often reflected as text messages, audio calls or video chats. The biggest difference between digital interaction and our traditional face-to-face interaction is that we lost the opportunity to deliver feelings and emotions using body gestures and subtle movements.  Instead, our communication rely heavily on text and language. However, at many times we find it hard to have a long in-depth talk with each other due to the time difference, yet a simple and efficient text message fails to fully express our emotions.

Therefore, we would like to explore if there exists a new type of interaction that encourages people to move when communicating through digital tools. And thus allow us to better express our emotions in a new and interesting way to people living at different time zones from us as an alternative besides video chat or text messages.



  1. Where are you from
  2. Do you know the time difference between where you are right now and the place where you are from?
  3. How do you contact with your close family and friends back home?
  4. How often do you contact each other?
  5. How do you figure out the time when you guys talk? Do you just send message whenever you want or would you consider about the time difference and schedule regular meetings?
  6. Do you prefer to text / or call / or video chat & why?
  7. If your family or friend fail to answer your message/call in time, what do you often do?
  8. How do you communicate / interact with your family & friends when your are physically together?
  9. How do you find your interaction with them different from when you are physically together?
  10. Are you satisfied with the interaction method you have now?
  11. Are there things you want to improve about your interaction?

11. Anything you want to add?




Image result for zenly app


flight route map:

Image result for flight route maps

User Interview

Here at ITP, we have many people work and study far away from their famlity & friends and have a significant time difference with them. We interviewed some people to see if the have the common problems.


  1. Where are you from
  2. . How Often do you contact with your friends and families back home?
  3. 3.What do you use to contact them?
  4. Do you have moments in which you really want to talk to them but they are busy, or vice versa?
  5. What would you do if so?
  6. Are you satisfied



Week 5 – Game Controller

I designed a game controller that is a bit anti design,week5

So the user will need to move the player by using the swiping action. But they need to read the actual text on the labels to move the player in right directions.

The actual Up is going Down,

the actual Right is going Right,

the actual Down is going Left,

and The actual Left is going Up.


Just need a bit more of attention while playing.

Week 3 – Tracking App

This week I want to build an app that tracks my daily expenses on each meal.


My original idea was to track the money I spent on each of my meal and how much I can end up spending for a month.

I first sketched out my designs:

This slideshow requires JavaScript.


Then I did my data structure map:

I am currently having a problem of correctly passing and saving the data through my pages:

The data works fine between the “Expense Entering Page” and my TableView Page(“Display Page”), but every time when I click “add more” and go back to my main page to choose my expense category(Breakfast/Lunch/Dinner), the data did not seem to go through and be saved again. So I am still figuring out this part.

Week 2 – Lock Screen Challenge

What I Made

For this week’s assignment, we need to create a lock screen. I designed an app in which the user will have to find two piggies that are different out of nine in order to unlock the screen.

Each time the user enters the application, two random piggies out of nine will be assigned to become the “apple piggies”(the rest seven ones are the same normal pigs), the user will have roughly around one and a half seconds to remember the locations before all pigs turn to their backs. The user will need to find the two special pigs to get the phone unlocked.


When I think about lock screens, I think about passwords and tasks that one needs to fulfill. I took the inspiration of those memory card games I used to play when I was younger when creating this app.

屏幕快照 2019-02-13 下午2.28.07
Users need to remember all cards and find the cards with same animals.

And the choice of designing pig avatars is based on the fact that 2019 is year of the pig.

Design Progress

  • I first sketched out the interfaces using Adobe XD.
  • I did some user testing and asked about people’s experience seeing the lock screen.

I got feed backs saying that the caption “Find the different” on the top area is quite confusing, and should be modified to something much clearer. So I changed the caption from “Find the different” to “Find Two Apple Piggies” for better clarification.

for old version to new version

iPhone 6-7-8 – 1










  • Then I started migrating the designs to Xcode and build my app.
  1. in Main.storyboard, I layout all the components in my app. I used auto-layout and constrains to lock my elements in place.

2. Then I sketched out the logic behind the app.

User enter the app: show the front sides and positions of all pigs (1.5s) and then show the back sides of the pigs. –>to allow users to remember the two apple pigs they need to find

enter page.2019-02-13 15_30_52

User Interaction: users can click on the images of the pig backs, they can only choose twice. If both clicks find the apple pigs, the user unlock the screen; else they fail and need to try again.

User Win:


User Fail:


3. Writing swift and building the app

There are a few challenges /  new things I learned

  • To pick up two random locations each time and assign the apple pigs, I need to figure out how I can generate two new random integers.  I first define two global variables a, b and:

    屏幕快照 2019-02-13 下午3.37.58
    the while function is my research online the shuffle method was suggested by Nien
  • To make my images clickable, I tried to assign clicking functions to my UIImageView but did not succeed, so I ended up layering transparent buttons on top of each image and add the action functions
  • To decide whether the user has chosen the right pigs, I assign each button an index number, and compare that number with my random number a or b, if they are the same, the right pig is chosen.
    屏幕快照 2019-02-13 下午3.42.09.png
  • I also set touchTimes and PigNums to limit the clicks to twice and if the PigNum = 2, the user will unlock the screen.
  • I also learned to do fade in fade out effects.
    屏幕快照 2019-02-13 下午3.43.44
  • I also added launch page and logo for my app
  • I included a local font this time
    屏幕快照 2019-02-13 下午3.47.05.png



There are many pictures and buttons this time in my exercise, I want to know if there are better ways to organize them (collections? arrays and more?)

How can I make my images clickable?


You can find my project code at here.

Week 1 – One Button Hook Up

What did I make?

For week one’s “one button hookup” assignment, as a coffee lover, I created a simple application which allows me to “enjoy” my coffee without actually drinking too much of it.

The progress

I first of all followed the Xcode tutorial and “one button” youtube video. Then I downloaded the sample code from github and started creating my own application based on that.

  • I created an array of image files that I want to use in this application, since there are twelve of them, I changed the array length from “6” to “12” in the swift code.

  • I also created a new button using the “button” tag and changed its look using the Attributes Inspector. With the help of Eva Chen from our class, I also add corner radius to my button. I played a song once the application is loaded.

I linked my button using “control” and click to my swift code. (both outlet and action)

My Problem

As I finish my first project, I am having a problem simulating the application using my own iphone device.

Am trying to solve it.