Yu Tian
MA review process book
Interactive Design and Game Development
Content
1
2
[ FOODIE ]
[ BLOSSOMS OF LIGHT ]
This is an app that push menu every day to help decide dinner for users when they have no idea about what to eat.
A naturalistic environment created with technology.
App Design
Installation Design
3
[ UXPA Promotion ]
Interactive Motion Design
This is a promotion of the UXPA. It is also my understanding of What is UX Design.
Content
4
[ Savannah Zoo ] Web Design
Savannah zoo web site redesign
5
[ JoinIn ]
App Design and Storytelling
This is an app aims to discover interesting events and make friends in Savannah.
6
[ City ]
Interactivity Scripting
This project is created with code in Processing.
FOODIE
Personal Meal Planner
1
[ FOODIE ] App Design
This is an app that push menu every day to help decide dinner for users when they have no idea about what to eat.
Proposal — App Design [ FOODIE ]
Audience and Context This app is designed for users who always cook at home but not interested in frozen foods. They are probably keeping fit or cannot afford consistently eat out, so eating at home would be a good choice. The target group is young people. It can be college students who live off campus, no income, getting supports from families. It can be fresh graduates who are having internship and living in rental houses with no or few financial supports from families. As the target group is not financially good, they are limited in consumption. Besides, since they are busying in studying or working for getting job opportunities, they pay little attention to their lives. Therefore, they need help to plan their life. I want to make a lightweight app focusing on something trivial, but people must deal with in life every day. For example, WHAT WOULD YOU LIKE FOR DINNER TONIGHT? I want to make an exciting app which could bring fun to users while telling them what they could eat for dinner. I want to make the app looks charming as it is a joyful thing to use the app even though users use it just because of the interface. Design Statement The problem I would like to solve is that “what would you like for dinner tonight?” I believed many people like me are always wondering what I am going to eat for lunch or dinner. I have vegetables and meat, and I do not want to repeat the same recipes every day. However, I am not a good cook, and I have no idea how to create something new that I’ve already had in the fridge.
Motivation For me, I’ve had the problem since I came to the US. As a student, I have school work to do which limits my time to cook at home, but I don’t want to eat out every day. Besides, I don’t like the college café because the foods are in high calories. What I am going to cook for lunch or dinner troubles me every day because I ‘ve been tired of eating the same. For other users, cooking could be fun in life, and it helps release pressure from school or work. Besides, cooking at home can not only save a lot but also good for health. Goal: To solve the problem that target audiences do not know what to eat for lunch or dinner at home. Target audiences: Young people like students living off campus or new graduates working and living alone far away from home.
Storyboard & Persona — App Design [ FOODIE ]
Storyboard
Persona
Age: 24 Job: Student major in industrial design. Eric has not much time in cooking because of a lot of assignment and meeting to do after class.
Eric (college student, live off campus, no school cafe)
Cooking skill: Good, can prepare a daily meal.
Problem: Having no idea about what to eat and how to cook. It takes time to check ingredients before cooking.
Interest in new Apps: Always check out App store to find new and exciting apps. He is highly receptive to new things.
Need: Hoping not to always consider about dinner and lunch because it is a waste of time and a difficult thing to figure out.
Storyboard & Persona — App Design [ FOODIE ] Storyboard
Age: 23
Persona
Job: Airport service. Bing usually eats at canteen when working, but cook at home at the break. He has average 2-3 days breaks a week, and often he is not going anywhere at the break but staying at home. Sometimes hangs out with colleagues. Cooking skill: Advanced. He can cook almost everything he wants as long as he is willing to do it.
Bing (fresh graduate, work and live alone in a new city, with corporate canteen) Problem: He is easily confused by a wide variety of food. Besides, he has problems in matching food because he focuses on healthy diet.
Need: Need someone to decide for his when he has no idea what to eat, as something he wants is too complicated to cook but has no appetite for foods that are easy to prepare. Interest in new Apps: Check the App Store when he remembers. Willing to try new apps.
Storyboard & Persona — App Design [ FOODIE ]
Storyboard
Age: 26 Persona
Young (Graduate 3 years, work and live alone in a new city, no corporate canteen) Problem: Having no time in cooking because of there’s no clear diet plan. Young eats out every day, which is costly and unhealthy.
Job: A financial analyst, who is working in a big company. Young usually gets off work at 7-8pm because he always works overtime. He usually orders take-out with colleagues for lunch and buys dinner near her home. At most time, he doesn’t eat dinner. Cooking skill: Not good at cooking. Young doesn’t cook at home, and he only makes some milk with fruit with a rice cooker. Need: It is unhealthy and not a long-term lifestyle. He has to make a change. Interest in new Apps: Check the App Store when he remembers. He always tries new Apps that are looking for a highly recommended restaurant.
Framework Need: Know what to eat for dinner in a short time. Cut back on cooking time. Limited skills in cooking, they need guidance. Love explore new things. Functionality: Push menu every day based on available food. Showing and setting time. Need cooking guidance. Add and delete food in the fridge.
Each page has access to “Fridge” and “List” page, users can check “Fridge” and “List” from everywhere.
Framework and Refinement — App Design [ FOODIE ]
Wireframe — App Design [ FOODIE ]
Wireframe The design focuses on showing the depth of the information structure. The Meal, Dish and Like are the primary structure of the app, and the Fridge and List are layers beyond the fundamental structure. Users have access to the Fridge and List from everywhere.
List searching Searching ingredients and adding to the list.
List seaeching result Searching ingredients and adding to the list.
Meal Depending on the food have in the real fridge, the app will push three recipes, and a surprising menu every day.
Dish Users can check ingredients in the recipe.
List store Users could look for ingredients in the list store and add them into the list.
List Users can make lists of what they are planning to buy.
Dish inner page The cooking process is available for users.
Done Users remove the ingredients that have been finished.
Like Meal Users can check meals they like in “like” under the “Meal”
Like Dish Users can check dishes they like in “like” under the “Dish”
Fridge Users can check ingredients in the fridge.
Fridge store Users could look for ingredients in the fridge store and add them into the fridge (unusual way).
Fridge searching Searching ingredients and adding to the fridge(unusual way to add ingredients).
Fridge searching result Searching ingredients and adding to the fridge(unusual way to add ingredients).
Sketch
Visualization — App Design [ FOODIE ]
Color scheme
#FFFFFF
#F4F4F3
#FEC465
#41CBE4
Card UI Design UI / UX User friendly interface and easy to use
Layers — App Design [ FOODIE ]
Card menu Menus and ingredients display on cards, which is evident and easy for users to understand app’s structure.
Demo Video: https://vimeo.com/242642828
2
[ BLOSSOMS OF LIGHT ] Installation Design
A naturalistic environment created with technology.
花之 绽放
Showcase — Installation Design
[ Blossoms of Light ]
Proof of Concept — Installation Design [ Blossoms of Light ]
Concept People nowadays are living far away from nature because of increasingly advanced technology. However, technology is not something that tears human and nature apart but connects both more closely. Blossoms of light is a naturalistic environment created with technology. This interactive installation attempts to improve our well-being by bringing the positive effects of nature by creating a magical and tranquil space, which reduces stress, while improving mood and cognitive performance.the positive effects of nature by creating a magical and tranquil space, which reduces stress while improving mood and cognitive performance. 2.2 m
Tree & Flower
3m
Vine
Path
The physical space covers around 6 square meters (3m*2.2m) and is 2 meters high.
Proof of Concept — Installation Design
Vine’s interaction The lights of vines on both sides will be shining when people pass by, and meanwhile follow people’s steps.
Flower’s interaction Flowers will be shining when people are waving hands in front of them.
[ Blossoms of Light ]
Circuit — Installation Design
[ Blossoms of Light ]
Circuit
Tree: Connect two LED strips and a sensor on a UNO board. Add an extra power supply for strips. Flower: Use tip120 transistors to connect to the UNO board and adding sensors to control them. Connect extra power to converter Voltage. Vine: Use proto-shield boards to connect three LED strips on one UNO board with one sensor. Besides, use a power supply connected with each two LED strips.
Circuit for the vines
Circuit for the signals
Overview
Circuit for the flowers
Circuit for the tree
Hardware & Frame — Installation Design
Hardware
Frame
[ Blossoms of Light ]
Building
Building — Installation Design
[ Blossoms of Light ]
Showcase — Installation Design
[ Blossoms of Light ]
Demo Video: https://vimeo.com/253917645
Showcase — Installation Design
[ Blossoms of Light ]
3
[ UXPA Promotion ] Interactive Motion Design This is a promotion of the UXPA. It is also my understanding of UX Design.
Concept UXPA (User Experience Professional Association) is a competition for people who are in the interactive design industry, also for those who are interested in the field. Usually, most candidates are college students. Works in the competition are mostly APP or website. The criteria for the contest are to check reasonable market demands, logical and innovative design process, attractive interface and good user experience. The topic in 2017 is “Experience Shapes the World.” I want to make a commercial based on the theme to introduce what is going on and what the candidates are going to do in the competition. I did some research about the “User Experience.” The UXPA defines a User Experience (UX) professional broadly as people who research, design, and evaluate the user experience of products and services.
https://uxpa.org/resources/about-ux https://uxpa.org/resources/definitions-user-experience-and-usability
Concept & word list — Interactive Motion Design
Mindmap Based on the definition of “UX, I break it down into some words to show the topic of UXPA 2017:
User Experience HCI Computer Science
Technology
Human Factors Ergonomics
Experience
Experience Design Branding Analytics Market Research
Data
Performance Support Training Quality Software Testing Interaction Design Software Design Information Architecture Library Science
Observation Interview
Web Design Graphic Arts User Research Anthropology Cognitive Science Psychology Content Strategy Technical Communication
Imagination Creativity Interface
Perspective
[ UXPA Promotion ]
Word list
Observation
Interview
Imagination
Observe user’s behavior and habits
Further communication with users
Design requires imagination
Creativity
Data
Interface
Creativity can discover deeper user needs
Data support mature design
The bridges between computer and human
Perspective
Technology
Experience
Technology shows design
All of these build a good experience
Think like a designer, think like a user
Word list & Mood Board — Interactive Motion Design
Mood Board
[ UXPA Promotion ]
Storyboard
Storyboard & Style Frame — Interactive Motion Design
[ UXPA Promotion ]
Style Frame
Demo video: https://vimeo.com/232415116
4
[ Savannah Zoo ] Web Design Savannah zoo web site redesign
Research - Restructure — Web Design [ Savannah Zoo ]
Research - Restructure At first, we analyzed the structure and content of the website, which has a vague and ambiguous menu, as the contents are not displayed logically. Therefore we restructured the website and classified them adequately based on our understanding.
Research - Interview & Raw information
We went to the zoo and interviewed some visitors and staffs. From staffs we learned that: Attraction The most significant attraction of the zoo is the wolf, and sometimes any smaller animals inside. Visitors There are no specific visitors; everybody comes to the zoo. And students come a lot as the zoo was funded by the school board in Chatham County, so they have many field trips for students in all grades. Support The zoo has mainly support from the school board. Besides, they do festivals that raise money, and the zoo has wish lists for anyone that is interested in donating. The zoo also has a membership program. They don’t receive much from visitors. Ways to discover the zoo People usually find the zoo online as well as via social media(Savannah morning news). Besides, the field trip is a way for children know the zoo.
Research - Interview & Raw information — Web Design [ Savannah Zoo ]
Research - Interview — Web Design [ Savannah Zoo ]
Research - Interview
Research - Raw information — Web Design [ Savannah Zoo ]
Research - Raw information From visitors we learned that: Ways to discover the zoo Some visitors found the zoo from Cub Scouts and family; Some of them drove by the sign several times and saw it.
Why people check the website before visiting To make sure it wasn’t a waste of time and they still have wolves! To make sure they were open, and if they look fun.
Attraction Visitors go there because there is a Halloween Event – nighttime event called “Boo in the Zoo.” Some visitors hope to enjoy the natural view and see wildlife and find fun for kids.
Care most about the website Most visitors care most about the cost, hours, any current exhibits, special wildlife information, participation events, accessibility for young children, and places for lunch around the park.
Care most about the zoo Most visitors care about the uniqueness of the animals and possibly the environments to see if they have cool animals, as no one will go if it is just goats there. Besides, it is important to know they treat the animals right.
Opinion about the website The website is crowded; navigation is not intuitive, not user-friendly and a cluster of options. There are way too much on the left, which would be confused. Besides, the website does not look fun.
How to buy ticket Most visitors buy tickets onsite. Parents buy tickets in the zoo in case the kids don’t want to go.
Opinions about the events Most visitors know little about events because the zoo doesn’t advertise that much at all.
How to view the zoo Most visitors spent around 2-3 hours in the zoo and followed the map.
Opinions about having birthday party for kids in the zoo It would be a cool idea, and some of the visitors have held birthday parties at the zoo several times.
Research - Insights From what we interviewed, we summarized their needs and goals and listed them down from the most important to the less important.
Research - Insights — Web Design [ Savannah Zoo ]
Users need to check basic info on the website.
People interest in events information (camps and birthday party).
Wolf is the most popular animal in Sav zoo.
Parents prefer more accessibly for children
Typically, zoo travel need 2-3 hours
Most visitors follow the map inside the zoo
Online and social media are two main ways.
Most visitors know the Savannah zoo
Savannah doesn’t receive much support from visitors
Research - Persona — Web Design [ Savannah Zoo ] Research - Persona Based on observation and interview in the zoo, we defined four groups of people as the target users, and make personas for each category.
Research - Card sorting — Web Design [ Savannah Zoo ] Research - Card sorting We interviewed people that we categorized and did card sorting based on the site navigation we made and found differences between theirs and ours, and we make some changes in what we’ve done.
Flowchart — Web Design [ Savannah Zoo ]
Flowchart This is the final navigation based on our analysis and card sorting.
Wireframe
Style Tiles — Web Design [ Savannah Zoo ]
Style Tiles
Font
Logo
Header
Footer
BrownTT
Image material - Shooting & Sketching
Image material - Shooting & Sketching — Web Design [ Savannah Zoo ]
Final screen — Web Design [ Savannah Zoo ]
JoinIn
5
[ JoinIn ] App Design and Storytelling This is an app aims to discover interesting events and make friends in Savannah.
Gantt Chart — App Design and Storytelling [ JoinIn ]
Gantt Chart Jan. 20 Topic Interview Script edit and refine Storyboard Flow chart Persona Requirement Wireframe Test UI Prototype Filming Video editing
21
22
23
24
25
26
Feb. 27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Concept & Reserach — App Design and Storytelling [ JoinIn ]
Concept & Research Savannah is a tourist city; there are many events happen here, but there is no way for people to know them. So we want to design an app that could collect events and activities, and people can check events and buy tickets on it. Besides, the app emphasizes social interaction among strangers.
In this way, people could not only get the latest information about events in Savannah but also make friends with those who have the same interest as yours
Data analysis — App Design and Storytelling [ JoinIn ]
Data analysis
We can learn from the result: the most attractive event is Exhibition; The most important information about events that people want to know are time, content, and location; Usually, people get information of events from media and people around them.
Boy Girl
83.3% 82.3%
Most people have the experience of participating in an activity with strangers
Boy Girl
94.1% 90.0%
Most people don’t mind going to events with strangers
Boy Girl
87.5% 74.2%
Most people go to events at least once a month.
Data analysis — App Design and Storytelling [ JoinIn ] Persona
Violet Adams
Bio
Age 21 A college student majors in art Personality Introvert
Extrovert
Sensing
Intuition
Solitary
Social
Miguel Gill
Solitary
Even though Violet attends activities a lot, she is still looking for exciting events so that she could make more friends and open to new things, but it is not easy to find them.
Goals
find new exciting events and make friends.
Miguel is new to Savannah, and he came here just a couple of months. He lives with another roommate in the college dorm. He doesn’t have many friends except for his classmates. Usually, he stays at dorm playing games on weekends.
Personality
Sensing
Problem
Bio
Age 23 An international student Introvert
Violet lives in Savannah, and she has many friends and classmates in this city. She likes hanging out with friends every single weekend; it has been a routine event with friends. They usually go to the park or someone’s home for a party.
Extrovert Intuition Social
Problem
Miguel is trying to make more friends and looking for events he could attend with friends on weekends. But he doesn’t know any reliable ways to learn about exciting activities.
Goals
find new exciting events and make friends.
Sitemap
People are categorized in who organized (want to hold an event) and who’s interested (who might organize or join one).
Sitemap — App Design and Storytelling [ JoinIn ]
The primary structure of the sitemap is Explore, Liked, Inbox, Event, Me.
Explore(Home) and Like have the same sitemap structure, the only difference is the content.
Sitemap — App Design and Storytelling [ JoinIn ]
Users can check chatting history in Inbox. There are individual chat and group chat.
Text
are shared information between I organize and I participate.
Rough sketch — App Design and Storytelling [ JoinIn ]
Rough sketch
The first hierarchy (Explore, Like, Inbox, Event, Me) of the app and the event detail page.
Test — App Design and Storytelling
Test
We tested two target people and set 2 missions for them, ”organize an event” and “participate in an event.” Test result: Tester 1 Could not find “ “, ”Show all”, “ “ “ “and “ “ are confusing when setting apart. Tester 2 No hint that texts in “organize” page are clickable. Unclear meaning of “available.” There is no way to open my post history.
[ JoinIn ]
Wireframe — App Design and Storytelling [ JoinIn ]
Wireframe Explore(Home) Liked Inbox
Wireframe — Interactive Motion Design
Event
Me
[ UXPA Promotion ]
User Interface
Explore(Home)
Liked
Explore event category: Feature, Nearby, Now, Upcoming
UI — App Design and Storytelling
[ JoinIn ]
Liked event category: Recent, Future, Past
Inbox
UI — App Design and Storytelling
User Interface
Event
Waiting for people joining in
Me
Group chat Quick Access Notification is off
Notification is on
Send note Quick Access
[ JoinIn ]
Script and Storyboard
Actor A: Meng Wang (girl) Actor B: Scott Mendez (boy) Location: Home, Street, Gallery
Scene 1 Time: Morning Location: in the street Actor: A On a sunny morning, Meng Wang has just finished her class and strolls down the street. Then she walks to a wall covered with graffiti and looks at the posters on the wall. Then she stopped on one of the posters and looking carefully at the poster; it seems that she is interested in the exhibition on the poster. She grabs her phone, takes a photo and asks anyone has time to go to the exhibition with her, but no one is available. Then she thinks of JoinIn, opens the app and searches the exhibition. She organizes the event and waiting for someone joining in.
Script and Storyboard — App Design and Storytelling [ JoinIn ]
Scene 1
Script and Storyboard Scene 2 Time: Afternoon Location: at boy’s home Actor: B Scott is sitting on the couch at home looking through the magazine, and then he turns to a page where there is a poster. The poster is an art exhibition that has an attractive graphic design. Scott oversees the poster, and he is attracted by the exhibition on it. Then he takes out his phone and opens JoinIn. Scott finds the exhibition in the application and checks details; he sees Wang Meng organized the event with only two people in the group, so he clicks into and join the group. After that, he buys tickets in the app. Finally, he put the phone back in his pocket.
Scene 3 Time: Morning (another day) Location: Gallery Actor: A&B Meng and Scott meet at the gallery and watch the exhibition. They take photos, share ideas and have a pleasant experience.
Script and Storyboard — App Design and Storytelling [ JoinIn ]
Filming
Setting the assist stand and the flag
Checking footages in laptop
Director was telling actors where to stand
Scene Layout, pasted posters on the wall
Filming — App Design and Storytelling [ JoinIn ]
Setting the shooting angle
The final shoot
Filming — App Design and Storytelling [ JoinIn ]
Actors were walking and talking
Shooting from the bottom up
Shooting from the bottom up
Director was talking to the actor and I was showing him the app prototype
Shooting app prototype
One was shooting close shot, and one was shooting long shot
Final screen — App Design and Storytelling
[ JoinIn ]
6
[ City ]
Interactivity Scripting This project is created with code in Processing.
Moodboard — Interactivity Scripting [ City ]
Moodboard I decided to draw some houses, lights, and trees alongside a road with some cars moving on it. There are some mountains at the skyline, the sun and the moon will go up on the horizon. These are references for houses, cars, mountains, light. Mountains are drawn in triangles. Houses should be in perspective.
Sketching — Interactivity Scripting [ City ]
Sketching
Animation
Cars and clouds move over time.
Interactivity When mouse left button clicks, the sun goes down, and the moon goes up, clicks again, the sun goes up, and the moon splits up into balls then they will disappear. At night, when mouse right button clicks, lights on, clicks again, lights off.
Illustraction — Interactivity Scripting [ City ]
Illustration
cloud
mountain
house
tree
light
car
Coding — Interactivity Scripting [ City ]
Coding
Coding
Coding for clouds
Coding for cars
Coding for cars
Coding — Interactivity Scripting [ City ]
Coding for sky changing
Coding for particles
Final Screen — Interactivity Scripting [ City ]
Final screen
Final Project
Problem
Scope
The problem I discovered is when I was working in teams, at most time everybody is putting off doing the work, including me, because maybe what they think is the same as me, they are also expecting the others do the jobs. So, in the end, no one does the job, and no one take the responsibilities of the project. Also, many of them are not aware of the deadline, because they lack the motivation to push them to work.
The project is aiming at building an app that promotes the efficiency of teamwork.
People always procrastinate in teamwork, the more people in a team, the more possibly people would like to put off doing their work because everybody is expecting the others to distribute tasks and do the job. Procrastination has become a common feature of group collaboration, which badly impacts productivity as well as group atmosphere.
Target audiences: people (students/company) who are engaging in design (those need teamwork such as designing app and web) To build the app, I need to know how people cooperate, and what’s the primary cause that people are procrastinating their work until the last minutes. Since I know about designing apps and web, and I have the experience of when working in a team, everybody has few motivations. So, I think I can handle the project as I am the designer and also a user.
Diagram at glance of my Final Project The central concept of my final project is to modularize the process of creating an app, web or product. For example, this is the app designing process, from research to programming, I break it down into separated modules, and actually, this is the mental model in our mind, and we usually follow the steps. And of course, It is not a linear process when designing an app, and we go back and forward among these modules, so basically we will not be going out of these modules. When distributing works, just drag the modules to everyone in the team, and it will be obvious for them to know what they are expected to do and when to due the work.
PC app & Mobile app
Final Project Goals I am going to design a PC app as well as a mobile app to help the team leader distribute works and provide everybody in the team a clear overview about the project so that everyone has a very explicit job in the team which is convenient to catch up with the timeline. 1: Design a mature PC application and a mobile application 2: Help distribute works in a team and provide and clear overview for everybody about the project 3: Basic functionalities in teamwork (such as sharing files, etc.)
Design Process
Research
Modeling users
Requirements to Design
Prototype
Primary research
Persona
Flowchart
Prototype
Secondary research
Scenarios
Framework
Test
Research analysis
Storyboard
Test
Refinement
Requirement analysis
Visual interface design
Deliverables Diagram of research, persona (Adobe Illustrator)
Visual interface, Prototype (Sketch, Principle)
Flowchart, Wireframe (Axure RP)
Process book (Indesign)
Bibliography https://www.ted.com/talks/tim_urban_inside_the_mind_of_a_master_procrastinator/transcript#t-828756 https://www.psychologytoday.com/basics/procrastination Procrastination of Enjoyable Experiences Author(s): SUZANNE B. SHU and AYELET GNEEZY
Timeline