Screen Studio // AHO 2016 Spring
Jingjing WANG
WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION WORKS’ COLLECTION
Screen Studio // AHO 2016 Spring
Jingjing WANG
TASK 1
CO2 FOOTPRINT
Kick off
Page 2
Focus on a page and coding with Sublime Text 2
Page 18
Life-logging, ‘self ethnography’,CO2 and everyday behaviour
TASK 2
FIND ANOTHER YOU Designing with and for the Web, coding/programming
TASK 3
NINJA GAME DESIGN A game design, gesture design
TASK 4
FETUS DEVELOPMENT UI & UX, a mini app composing a set of pictures
TASK 5 CHINESE CITIZEN APPLY FOR NORWAY TOURIST VISA Talking with people, a public service web design
—1—
Focus on gesture and programming with Unity
Page 30
Focus on UI & UX to design a holistic app
Page 44
Focus on research to understand users deeply
Page 64
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
TASK 1 CO2 FOOTPRINT
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3 TASK 4 TASK 5
—2—
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis
Schedule
CO2 footprint from food
Users January
understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3 TASK 4
—3—
TASK 5
TASK 1
Life logging is a easy way to kick off a project when you have nothing at your hand. I logged 4 hours continuously as my material to see whether I can find some interesting points to get start.
Intros Life-log
4 hours life-logging by Go-pro
Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Time-Context Chart
Refection DIGITAL DEVICES
KITCHEN
MAKE UP
PIANO
ON BUS
TASK 2 TASK 3 TASK 4 TASK 5
—4—
WALKING
SHOPPING
TASK 1 Intros Life-log I choose 3 contexts from the previous 7
try to calculate the CO2 consumption of each.
CALCULATION RESULT :
Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 FOOD: variable, so I can do something;
TASK 3
COSMETICS: all the same,nothing to do;
TASK 4 PUBLIC SPACE: can’t be calculated. —5—
TASK 5
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
I finally choose COOKING as my context, because the CO2 consumption of different food varies a lot, so I can do something here to reduce CO2 footprint.
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3 TASK 4 TASK 5
—6—
TASK 1 Intros After choosing the context, I rethink of this task. I find that:
Life-log Kick off from nothing
1. The topic is:
2.The purpose of this task is :
CO2 FOOTPRINT
Scope narrow down to a direction: FOOD
Analysis •
to MOTIVATE people choose the ones with lower CO2 footprint
CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
•
to VISUALISE all the information so that people can read them better
Refection
TASK 2 •
—7—
to give people more INFORMATION which they’d like to know to choose a food with lower CO2 footprint
TASK 3 TASK 4 TASK 5
TASK 1 Intros
In that 4 hours, I ate totally 13 kinds of food as following:
Life-log Kick off from nothing
FOOD
WEIGHT
TIME
PACKAGE
PLACE
COOK
Scope narrow down to a direction: FOOD
•
bread
75g
5d
plastic
Sweden
cooked
•
egg
60g
5d
paper
Norway
cooked
•
milk
350g
2d
plastic/paper
Sweden
no
•
strawberry jam
20g
2d
metal/glass/paper
KIWI
half cooked
•
oil
20g
5d
plastic
Thailand
no
•
salt
3g
40d
paper
Norway
cooked
•
sauced beef
30g
140d
plastic
Beijing
cooked
•
silk tofu
80g
10d
no
Yunnan
cooked
•
vinegar
10g
120d
plastic/glass
Zhenjiang
cooked
•
spring onion
10g
0
no
home
cooked
TASK 2
•
radish
200g
2d
no
Norway
cooked
TASK 3
•
Cantonese sausage
20g
70d
plastic/paper
Guangdong
cooked
•
rice
50g
60d
plastic
Thailand
cooked
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 4 TASK 5
—8—
TASK 1 1.The closer from Oslo where I eat, the lower CO2 footprint.
Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept 3. Reserving day: the shorter time it is reserved, the lower CO2 footprint
generate a solution according to users
UI Design two main page
3. Quantity
Refection
TASK 2 TASK 3 4. Place of origin
—9—
TASK 4 TASK 5
TASK 1
Different foods have traveled different journeys before come to table:
FOOD JOURNEY SYSTEM MAP
Intros Life-log Kick off from nothing
3. Feeding animals
Scope
4. Dealing with animals
narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
1. Growing plants
Concept generate a solution according to users
FOOD JOURNEY MAP
UI Design two main page
2. Dealing with plants
Refection 5. Packaging
6. Cooking
TASK 2 TASK 3 TASK 4 TASK 5
— 10 —
TASK 1
Different foods have traveled different journeys before come to table:
Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
SAUSAGE’S JOURNEY
TASK 2 TASK 3
Cover one paper with some holes and explanation on “FOOD JOURNEY SYSTEM” map, you could see this specific food’s journey. For example, this is sausage’s one.
TASK 4
— 11 —
TASK 5
TASK 1 Intros Life-log
USER GROUP: those who need to buy food and very care about C consuming
Kick off from nothing
Scope SCENARIO: shopping for food
narrow down to a direction: FOOD
Analysis
USER NEEDS:
CO2 footprint from food
• •
Users
11 kinds of infos user want to know 4 actions user need to do
8 kinds of Infos user want to get after scan a bar code.
understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3
User’s 4 actions
Social app’s works
Shopping app’s works
TASK 4 TASK 5
— 12 —
TASK 1 Intros Life-log Kick off from nothing
Here is ALL the FUNCTIONS I need to design
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
2
Users 3 kinds of infos after scan
understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
1
Refection
3 actions
3
Links to:
Social app’s works
and
Shopping app’s works
TASK 2 TASK 3 TASK 4
— 13 —
TASK 5
TASK 1 Intros Life-log Kick off from nothing
Scope
CONCEPT: framing
narrow down to a direction: FOOD
Analysis
necessary
CO2 footprint from food
Users understand user needs and behaviour
Which egg to buy?
I would like to compare the CO2 footprint of them.
Beef2 is lower C consuming.
optional Why are they so different?
I would like to support beef2.
I would like to compare other aspects.
I would like to share this.
click like
shopping app
sharing app
>1s
2s
Concept generate a solution according to users
egg brand 1 17kg CO2/KG 13Like/829scanner
UI Design two main page
choosing egg
scan bar code1
read info1
click more
read journey1
read info2
click more
read journey2
3s each
0.5s each
10s each
Refection egg brand 2 11kg CO2/KG 737Like/984scanner
scan bar code2
TASK 2
2s each
TASK 3 TASK 4 TASK 5
— 14 —
0.5s
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3 TASK 4
— 15 —
TASK 5
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
UI Design two main page
Refection
TASK 2 TASK 3 TASK 4 TASK 5
— 16 —
TASK 1 Intros Life-log Kick off from nothing
Scope narrow down to a direction: FOOD
Analysis CO2 footprint from food
Users understand user needs and behaviour
Concept generate a solution according to users
On the one hand, as for App design, I totally had no idea that time although I stay with my mobile all the time. You may feel that I didn’t know where to go so I was not always going to the same direction. Firstly, I wanted to design a board with a food journey system map carved and children can cover some food’s card on it to see this food’s journey. I think this is perhaps a nice product on education.
UI Design two main page
Refection
However, I considered that there was nothing to do with screen, so I turned to mobile App unexpectedly.
Reflection
On the other hand, CO2 footprint is a so huge topic to explore while we have only 2 weeks. And I did really learn a lot of knowledge here. Before this task, I didn’t realise that meat will consume more CO2 than vegetables. So actually vegetarian is more environmental friendly, which is interesting.
TASK 2 TASK 3 TASK 4
— 17 —
TASK 5
TASK 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
TASK 2 FIND ANOTHER YOU
Program coding with Sublime Text 2
Final outcome Refection
Designing with and for the Web In these three weeks you will be introduced and familiarised with the basics of designing with and for the Web. You will be given an introduction to the the fundamental technological building blocks of internet web pages as we know them: HTML and CSS. This is only a start of prodding into a vast and diverse field. However, we will provide you with the methods, tools, means and models to understand and further dive into the world of Web design. Importantly, this module will enable you to understand the technological constraints involved, provide feasible concepts and designs, and communicate confidently in a team and collaborative setting.
Backdrop
TASK 3
• •
TASK 4 TASK 5
“The Web is transforming not only social institutions but also bedrock concepts of our world such as space, time, self, knowledge-even reality itself.” - David Weinberger “The material a User Experience is crafted from is software! This is why designers need to get their hands dirty with it. Yes, it may be more abstract. Software indeed has differences to physical materials but it also shares some characteristics.” - Nigel Hietala
— 18 —
TASK 1 Brief When we design for the web we are shaping data to fit into a specific context and use. We must understand the data material in order to organise, structure and present it in a context to a user in a meaningful way. Different ways of making the data available and different ways of manipulating it can yield different uses and meanings. Your task in these three weeks is to scavenge existing data from other online services and make this data available for a user group and context of use that you chose. You will have to explore and investigate the data you choose in order to develop new and relevant uses of it. You will have to re-imagine, recontextualise, re-mediate and re-purpose data from one (or more) place(s) on the web into a single purpose web based product of your design. The goal is to make an interesting, pretty and delightful online product that makes the data available in a new, thoughtful, imaginative and / or useful way.
Practicalities Work individually. Final presentation and deliverables Working prototype of website running in a web browser.
TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users
Schedule
understand user needs and behaviour
Program
Constraints and considerations: - Use data / information / content from APIs, RSS feeds or simply by scraping other sites. You may gather this data manually, but you must demonstrate that the information is available. - No sub-pages. Only one page! - Think about sources, triggers, actions, thresholds, loops, modes, feedback, rules • Adapt the scope to your technical abilities • Attention to detail, visual design • Design for desktop computer use • Extra points for responsive design
coding with Sublime Text 2
Final outcome Refection
Evaluation 1. Concept development and process You will be evaluated by the quality, relevance and originality of your concepts. What we are looking for here is your ability to think and work broadly in your concept development. Working iteratively through processes of ideation, exploration, sketches, prototyping is crucial. 2. Detailing of user experience The attention to detail in your deliverables. (visual design, tone of voice, behaviour, interactions) Information architecture, 3. Technical implementation 4. Presence and contribution to discussions
— 19 —
TASK 3 TASK 4 TASK 5
TASK TASK 1 1 TASK 2
For the reason that we have no specified topic, our professor asked us to find 20 ideas randomly which we all class can choose from together.
I have to say chatting is really a nice tool to start from nothing. After chatting with my desk-mate for 3 hours, both of us got 20 ideas, and we were also very happy to know each other more.
Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
CHOSEN
TASK 3 TASK 4 TASK 5
— 20 —
TASK TASK 1 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
TASK 3 TASK 4
— 21 —
TASK 5
TASK 1 TASK 2 Intros Brainstorm Kick off from nothing
VERSION 1
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
Screen Frame: 1440 X 960 px
TASK 3 TASK 4 TASK 5
— 22 —
TASK 1 Imitate Airbnb
TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
VERSION 2
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome
LEVEL 2 Screen Frame: 1440 X 960 px
LEVEL 1
Refection
LEVEL 2 LEVEL 3
LEVEL 2 The more you two match each other, the higher your level will be.
LEVEL 3
LEVEL 1
LEVEL 1
TASK 3
LEVEL 1 LEVEL 3
LEVEL 3 — 23 —
LEVEL 3
TASK 4 TASK 5
TASK TASK 1 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Give me a reason to choose
Program coding with Sublime Text 2
Final outcome Refection
“I have no patience to compare him with me, and I don’t want to follow your order, so give me some tips, that’s perfect. I can think, but not too much.”
TASK 3 TASK 4 TASK 5
— 24 —
TASK TASK 1 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
TASK 3 TASK 4
— 25 —
TASK 5
TASK TASK 1 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
HTML
CSS TASK 3 TASK 4 TASK 5
— 26 —
TASK TASK 1 1 TASK 2 Intros
Final HTML file
Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome Refection
TASK 3 TASK 4
— 27 —
TASK 5
TASK 1 TASK 2 Top bar floats.
Intros Brainstorm Kick off from nothing
LOGO floats.
Concept on how and what to layout
Users understand user needs and behaviour
Program coding with Sublime Text 2
Final outcome
Hovers.
Refection
FINAL OUTCOME
Different levels
TASK 3 TASK 4 TASK 5
— 28 —
TASK TASK 1 1 TASK 2 Intros Brainstorm Kick off from nothing
Concept on how and what to layout
Users understand user needs and behaviour
Reflection
Program coding with Sublime Text 2
Final outcome This task, I start from chatting, which is an interesting process. We used 3 days on coding, which I am good at and enjoy.
Refection
I think I have a better design process than task 1 because I know where I should go, a web page. But compared with my classmates, my outcome was not really amazing nor impressive. And my feedback was not as good as I thought it should have been. They think it is unable to get the data this web need because there are too huge information involved and I can’t design another Facebook.
TASK 3 TASK 4
— 29 —
TASK 5
TASK TASK 1 1 TASK 2 TASK 3 Intros Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
TASK 3 NINJA GAME DESIGN
Prototype 3D prototype, game mechanics
User test
tap, swipe & flick
play on tablet
Reflection
This module starts with a focus on designing engaging gesture based experiences. We’re aiming for working prototypes, in less than two weeks. Programmer Karl Gustav Georgsen will help to set up and produce the frameworks for your concepts in Unity. You will have to spend all of week 9 (second week of project) to adjust and tweak your concepts. This is not only about achieving a working prototype - but a´designing a great experience! You will work in groups of two, and we will have one available Samsung galaxy tablet per group.
TASK 4 TASK 5
— 30 —
Things to consider Due to limited time and access to Karl Gustav Georgsen, we have to work within highly constructed limitations. In particular the visuals and 3D objects within your created environment will have to be very ‘low poly’ • themes and topics • scenery / settings / ‘world’ • light/mood
TASK TASK 1 1
Schedule Start with rough concept sketching, possibly paper-prototyping, consider the possibilities and the limitations - how can you effectively sketch for / within the limitations.
TASK 2 TASK 3
Week 8 - concept sketching
Intros
Tech limitations
Brainstorm
I low poly models II “fairly flexible ideas…” III throwable/moveable objects needs to be positive objects IV no animated models, but movement in scale
Kick off from Finger gesture
22 Mon
23 Tue
24 Wed
Ninja topic Story and metaphor
Groups
Sketch
Work in groups of two.
Scene, character and plots
Week 9 - implementation, adjustments & tweaking
Import Information about import of 3D models to Unity: http://unity3d.com/unity/workflow/asset-workflow Support each other in finding good routes from your preferred 3D engines to Unity!
Rules Game rules
29 Mon 09:00 - 10:00/10:30 Introduction to the task
1 Tue
2 Wed
• • • • •
the quality and originality of your concept ability to envision and design interesting/engaging experiences exploration and creative approach to technical limitations constructive dialogue with programmer strong and independent approach to this design process the attention to detail in your deliverables.
Deliverables a working engaging prototype 1 or 2 high quality ‘killer images’ possibly additional evidencing possibly a short engaging final presentation Possible directions for your 1 to 2 ‘killer images’: how it would look in case this was a full fledged game include other game elements not (yet) within the game what if the game was launched online or on iTunes/Google Play some highly immersed gamer etc.
Prototype3 Th 3D prototype, game mechanics
Evaluation criteria •
25 Th
User test play on tablet Week 8 - concept sketching 22nd of Feb 09:00 - 10:00/10:30 Introduction to the task 24th of Feb 14:00 - 16:00 Max 5 min presentation of your concepts - Karl’s feedback on ‘feasibility’ - everyone comments upon overall direction - remember that scope and engagement is key 26th of Feb 09:00 - 10:00 Karl Gustav introduces UNITY 15:00 - 16:00 upload elements and sketches to dropbox: 09:00 16:00 - upload- scenes -- and presentation and/or sketches for better overview everyone receives their framework Week 9 - implementation, adjustments & tweaking
from Karl Gustav Georgsen
29th of Feb 09:00 - 16:00 - everyone receives their framework from Karl
— 31 —
- startup: implementation, adjustments and tweaking
Reflection 4th of Mar 09:00 - 12:00 - finalization 13:00 - 16:00 Each group have 10 min in all including: - final short presentation - 3-5 min! - feedback from staff - possibly quick user-test from external testees
14:00 - 16:00 Max 5 min presentation
09:00 - 16:00 - implementation, adjustments and tweaking contin
TASK 4 TASK 5
TASK TASK 1 1
FACTORS
TASK 2 Finger No.
1 finger
2 fingers
3 fingers
4 fingers
5 fingers
2 hands
TASK 3 Intros
Touch Time
Instant
around 1s
around 3s
longer
Brainstorm Kick off from Finger gesture
Touch Area
straight line
curved line
dot
Story and metaphor
Direction
straightly
randomly
circling
Force
slightly
hardly
slight to hard
Game rules
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection
TASK 4 TASK 5
— 32 —
TAP
HOLD
COMMON USE
Scene, character and plots
Rules
SWIPE
surface
Ninja topic
Sketch
ROTATE
hard to slight
TASK TASK 1 1 TASK 2 TASK 3 Intros Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Instant straightly
Sketch Scene, character and plots
FLICK
Rules Game rules
hard to slight
Prototype
We finally choose “FLICK” as our target gesture which we will design a game.
3D prototype, game mechanics
User test play on tablet
Reflection
TASK 4
— 33 —
TASK 5
TASK 1 TASK 2 TASK 3 Intros Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection
NINJA
TASK 4 TASK 5
ASSASSIATE at MIDNIGHT; cold; silence; vigilance; no hesitation black head with only eyes mysterious, unaccessible — 34 —
TASK 1 TASK 2 TASK 3 Intros Brainstorm
SHURIKEN： Common weapon
Kick off from Finger gesture
Atmosphere: encourage dark lighting & color serious & scary
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
Scenario: Ninja Examination
User test play on tablet
Reflection evaluation: accurate，fast，brave goals: 1) shoot enemy and award balloon as more as possible 2) don’t shoot punishment-balloon
TASK 4
— 35 —
TASK 5
TASK 1
Scene Sketch
TASK 2 process bar
TASK 3 Intros Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
visible area : 20m Prototype 3D prototype, game mechanics
User test play on tablet
Reflection average 1 enemy per 5m
shuriken bag
TASK 4 TASK 5
— 36 —
TASK 1 TASK 2
2D/3D Puzzle
TASK 3
Because control panel(screen) is 2D, but game is 3D, so we have 1D cannot controlled by user, which is “ ”(the angle between bart road and ground as showed in picture). So, only when enemy is in the “hittable distance”, it’s possible to hit it.
Intros Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection
TASK 4
— 37 —
TASK 5
TASK 1 TASK 2 TASK 3 Intros
REWARD USER ACTION SHURIKEN （start 5）
Brainstorm Kick off from Finger gesture
PROCESS BAR
-1
Ninja topic Story and metaphor
Sketch Scene, character and plots
OUTCOME
LAUNCH
Rules Game rules
OBJECTS
Prototype 3D prototype, game mechanics
User test
enemy
＋1
red balloon
＋3
black ballon
－3
play on tablet
Reflection
HIT
TASK 4 TASK 5
— 38 —
fill one cell
TASK 1 TASK 2
ICON
TASK 3 Intros Brainstorm Kick off from Finger gesture
POSTER
Ninja topic Story and metaphor
Sketch Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection
3D modelling by Jingling ; Rhino & Keyshot
TASK 4
— 39 —
TASK 5
TASK 1
Interaction
TASK 2 TASK 3 Intros
Animations
Brainstorm
Audio
Kick off from Finger gesture
Ninja topic
finger gesture: FLICK
Story and metaphor
Sketch Scene, character and plots
Rules
1. Air-balloon Disappear
ACTIONS REACTIONS
Game rules
2. Enemy Disappear
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection Award (shuriken)
TASK 4 TASK 5
— 40 —
3. Shuriken Flying
TASK 1
Tools to Build
TASK 2
Keyshot
Scene’s 3D modeling/rendering, learning Unity, making it into a real game in Android System, and finally playing on tablet.
Blender
TASK 3 Intros
Rhino
Unity
Brainstorm Kick off from Finger gesture
Baidu
Ninja topic Story and metaphor
Sketch
PS
YouTube
Scene, character and plots
Rules Game rules
Unity is easy when we watch on YouTube but not when we try by ourselves.
Prototype 3D prototype, game mechanics
User test play on tablet
Karl Each Other
Reflection
our programmer
My dear partner Xia Li, and I
TASK 4
— 41 —
TASK 5
TASK 1 TASK 2 TASK 3 Intros Brainstorm Kick off from Finger gesture
Ninja topic
User 1 open the app and begin to play.
User 1 shot a red balloon and got award.
User 2 flicks to throw a shuriken.
Story and metaphor
Sketch Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
User test
Feedback
play on tablet
Reflection “Air-balloon is childish and funny, not fearful.” “Feeling of the direction is not the true direction” “The background is really cool.” “I like the sound when I shoot a shuriken, feel really fast and powerful.”
TASK 4 TASK 5
User 1 shot a enermy and got award, then the enemy disappeared.
— 42 —
TASK 1 TASK 2 TASK 3 Intros
Reflection
Brainstorm Kick off from Finger gesture
Ninja topic Story and metaphor
Sketch This is the first time I feel teamwork is a so happy thing. Although the project itself has a lots defects, I love it! I appreciate my partner Xia, and programmer Karl. Actually Karl is not our partner; he is a programmer for all of our class. But we discussed together; we worked till early morning together; we eat together; and when we made it, we cheers together. When we, Xia and I were presenting, he said as our partner, explaining for us without any critical attitude, and after presentation, he came to us to say “well done”. He did only for us two; it’s so warm and encouraging.
Scene, character and plots
Rules Game rules
Prototype 3D prototype, game mechanics
User test play on tablet
Reflection
THANKS TO OUR PROGRAMMER!
TASK 4
— 43 —
TASK 5
TASK TASK 1 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype
TASK 4 FETUS DEVELOPMENT
UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
TASK 5
PICTURE APP This module stretches over 4 weeks, and will cover the basic introduction to interaction/ix and user experience/UX. Aside from some smaller tasks, there will be one main task where you will practice (some of) the basic and important stages of an interactive concept development process: sketching - prototyping - testing - iteration
Main task: Create a smartphone app for a set of images. • find a set of images (minimum 50 - max 200) • make an app for this image set • work on the UI and UX • produce overall structure and navigation • create an engaging or appropriate user experience • learn from feedback and user testing • iterate and improve user experience • consider transitions, tempo and ‘temperament’ • consider tone of voice • consider look and feel
— 44 —
This task is an individual one, but you are allowed to run the process as a group of two. We’re open to you collaborating and discussing the process and progress within a group. Design your concept, but contribute to each others process, practice constructive critique and have a continuous dialogue about opportunities, improvements and iterations. Final deliverables • Final clickable prototype • 1 or more killer images (be imaginative!) • final presentation Final presentation Individual presentation. Make a max 5 min presentation with a focus on your process. Consider the main phases of this process: sketching - prototyping - testing - iterating
Areas to consider from the sketching and prototyping phases : - overall concept sketches - low-fi sketches - flow diagram - mental mapping/overall structure - clickable vs wire-framing vs paper prototyping - hi-fi vs low-fi - iterated hi-fi clickable prototypes And place a particular focus on what cause of actions were taken during the week of ‘iterations’! Evaluation criteria • ability to create an app with a good user experience • strong and independent approach to this design process • The quality and originality of your concept • improvements through iterations • The attention to detail in your deliverables
Don’t design: - log-in or sign-ups - error - help pages Design the main/core pages (‘kjerne-sider’) Simple - intuitive - user-friendly In this module you are not allowed to use the words ‘simple’, ‘intuitive’ and ‘user-friendly’. Of course your app is going to be accessible - need little or no instruction, and provide a glowing example of appropriate user experience. These words are about to loose all inherent meaning, so exemplify - and be detailed - about what you have done to make it so.
TASK TASK 1 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch
Schedule
the tempo of timeline
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
— 45 —
TASK 5
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection I choose the topic “FETUS DEVELOPMENT”. Here is some pictures I found. I use almost 40 hours in all to get totally 80 pictures of different size and style.
TASK 5
— 46 —
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
— 47 —
TASK 5
TASK 1 TASK 2 TASK 3
LOGIC —— TIMELINE TASK 4 Intros
My picture set is not random one; there is a logic: time, which I can’t get rid of. I use timeline as my main clue. But timeline is not a simple straight line. There are still a lots things to do with it. When I search “timeline” in Pinterest, I got inspired: I have never know timeline is so colourful and flexible.
Pictures find a set of pictures
Sketch the tempo of timeline
NAVIGATION
Prototype
80 is not a small number to deal with, so I must find some way to cut the time line into pieces:
PREGNANCY.
UI design and clickable prototype
User test
STAGES
INDEX
Iteration
SINGLE PIC
prototype 2.0
Reflection My 80 pictures will be classify by 4 stages, including “00-09 weeks”, “10-19 weeks”, “20-29 weeks” and “30-birth”.
TASK 5
In each stage, there will be around 20 pictures.
HOW TO ARRANGE THESE ONES?
— 48 —
Click to see a single one carefully.
TASK 1
THE TEMPO OF TIMELINE
TASK 2
This is an example showing “ the tempo of timeline”. The color of sky is changing with time but not in the same speed. When breaking the dark and going down to the hill, the color is changing rapidly, while in the daylight it is changing slightly even during 2 hours.
TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
………….4:45 …………….….6:05…………………7:10…………………8:25………………10:10………………….12:00……………..…13:35 .. .. .. .………..22:30………...……20:50………………20:00…………………19:35………………18:40………………….18:15……………..…16:45
— 49 —
User test Iteration prototype 2.0
Reflection
TASK 5
TASK 1 WEEK 01
2
TASK 2 TASK 3 TASK 4
WEEK 02
1
WEEK 03
1
Intros Pictures find a set of pictures
WEEK 04
1
Sketch the tempo of timeline
WEEK 05
2
Prototype UI design and clickable prototype
WEEK 06
2
User test Iteration prototype 2.0
WEEK 07
2
Reflection
WEEK 08
1
WEEK 09
3
Different quantity of pictures in each weeks form the tempo of timeline. TASK 5
2-1-1-1-2-2-2-1-3 is the tempo of first stage ( Stage 1: 00week-09 week) — 50 —
TASK 1 TASK 2 TASK 3 Week numbers TASK 4 Intros Pictures
FOLDING TIMELINE
find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test
I finally choose this form to represent the tempo of time:
Pictures
• • •
— 51 —
pictures are the core of the interface; week numbers are in one side and user can see the tempo from here; the pictures can be slide up and down and the week numbers follow.
Iteration prototype 2.0
Reflection
TASK 5
TASK 1
NAVIGATION
INTERFACE
INTERACTION
TASK 2 TASK 3
STAGES Tap to choose a stage/ album
TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
INDEX
see next page…
User test Iteration prototype 2.0
Reflection
slide to next/previous picture; tap to show/hide explanations
SINGLE PIC CLICKABLE SLIDABLE BOTH
TASK 5
— 52 —
TASK 1 TASK 2
1. FOLDING TIMELINE
TASK 3 TASK 4
•
•
Slide to roll the picture column
Intros Pictures
See the tempo of timeline here
find a set of pictures
Sketch Show how much pic here is and the time they are
2. SLIDE BAR
Prototype •
•
•
•
the tempo of timeline
Touch the edge, showing slide bar
UI design and clickable prototype
User test
Time line disappears when not touched
Iteration
Tap the bar to choose a certain time
Reflection
prototype 2.0
Time direction
3. GO TO OTHER ALBUMS
— 53 —
TASK 5
TASK 1
USER TEST
TASK 2 TASK 3 TASK 4
SCENARIO: There are two separated room: one is for us students to watching, the other is for the testee, and we can’t communicate with each other before the test.
Intros Pictures
TESTEE: They know nothing about the prototype, and they can’t be guide in anytime during the test; every search only by themselves. Some prototypes are too raw to understand and the testee feel confused without any introduce then does nothing with them.
find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test
CAMERA 1
CAMERA 2
Watching the testee
Watching the screen
In the other room, one testee is testing our prototypes. There are totally 3 testees.
We can know what the testee is searching and his specific gesture, and the testee speak out their thought so that we can hear.
Iteration prototype 2.0
Reflection
We students of this class are all here watching all our projects’ testing
TASK 5
— 54 —
TASK 1 TASK 2 TASK 3 TASK 4
PROBLEMS I FIND DURING USER TEST
SOLUTIONS
Intros Pictures find a set of pictures
1. Clickable size (bottom stages;slide bar)
1. change narrow square bar to cube
2. Title should show where you are now
2. add those
3. Words can be separated from pictures, more conventional
3. agree
4. Single picture, I don’t know it’s slidable?
4. add numbers like “13/17” showing this picture is the 13rd one of 17 in this album.
5. Bubble not clickable V.S. right bar clickable
5. no solution
6. IOS standard: 1) “back” icon with info to show where to back 2) title’s height 3) pixel things
6. IOS standard: 1) add that 2) title’s height 3) pixel things
7. Scale
7. No need because everybody knows the fetus will become bigger.
8. The direction of timeline: vertical or horizontal
8. in one album, timeline direction is vertical; on the bottom, changing album buttons are horizontal.
9. How did you classify all the pictures into these four albums.
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
9. mini introducing animation when the app is opened first time.
— 55 —
TASK 5
TASK 1 TASK 2 TASK 3 •
TASK 4
Shows that “stage 1” means “week 00-09” and so on.
Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test
mini-intro:
Iteration prototype 2.0
mini introducing animation when the app is opened first time. It’s 8s. User can tap everywhere to skip this.
Reflection
•
TASK 5
— 56 —
Indicates there are 4 buttons you can tap to begin.
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
HOME PAGE This is the home page where the animation goes and “home”buttons go.
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
— 57 —
TASK 5
TASK 1 TASK 2 TASK 3
•
Slide slightly: go to next/previous one.
•
Slide heavily: go through a lot; depends on user’s gesture.
details on scrolling: 1. background is moving in at same time 2. right bar is showing when it’s scrolling
TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test Iteration prototype 2.0
Reflection
TASK 5
— 58 —
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
PIC
Sketch
PIC
PIC PIC
the tempo of timeline
ALBUM
Prototype
After choosing one album on home page, user gets here to see the index of one album.
User test
UI design and clickable prototype
Iteration prototype 2.0
PIC
— 59 —
Reflection
TASK 5
TASK 1
Read
TASK 2
Change
TASK 3 page number: shows it’s slidable •
TASK 4
•
Slide when there are infos: next/previous one is with info, too.
Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test “cross” button & transparency: indicate that here is two layer, the words can be canceled
•
Iteration prototype 2.0
Reflection
•
TASK 5
— 60 —
Slide when there are no infos: next/previous one is without info, either.
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
PICTURE
Prototype
Following our convention of using facebook, instgram and other app, you see only a picture or with some infos.
User test
UI design and clickable prototype
Iteration prototype 2.0
Reflection
— 61 —
TASK 5
TASK 1 TASK 2 TASK 3 TASK 4 Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype UI design and clickable prototype
User test
CLICKABLE PTOTOTYPE
Iteration prototype 2.0
Reflection
https://projects.invisionapp.com/d/main#/projects/6962585
TASK 5
— 62 —
TASK 1 TASK 2 TASK 3 TASK 4
Reflection
Intros Pictures find a set of pictures
Sketch the tempo of timeline
Prototype This is a holistic project. I went through all the core design process of an app design: sketch—prototype—user test—iteration.
UI design and clickable prototype
I learned a lot of convention and anti-convention as well as some basic rules of UX & UI design. I learned more on some software, too.
User test
I think I did well on UI design including stage logos and of course the timeline, also those pictures I think I deal with them very well so that they looks beautiful. The animations are lovely and engaging.
Iteration prototype 2.0
Reflection
I got really positive feedback about this task!
— 63 —
TASK 5
TASK TASK 1 1 TASK 2 TASK 3 TASK 4 TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
TASK 5 CHINESE CITIZEN APPLY FOR NORWAY TOURIST VISA
Concept sketch and clickable prototype
user test on prototype
TALKING WITH PEOPLE
Iteration
Make users part of product
User test
prototype 2.0
Reflection
The module is about incorporating research and feedback from users of a public service into the development of new or improved services.
Task / you will be asked to - research how people use a public service - use that research to find an area of the service that could be improved - prototype that improvement - iterate the prototype based on user feedback - present the iterated prototype, with reference to the process
— 64 —
TASK TASK 1 1 TASK 2
Schedule
TASK 3 TASK 4 TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
— 65 —
TASK TASK 1 1 TASK 2 TASK 3 TASK 4
PUBLIC SERVICE Public service is a service which is provided by government to people living within its jurisdiction, either directly (through the public sector) or by financing provision of services.
TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
In modern developed countries, the term "public services" often includes: • Electricity • Education • Emergency services • Environmental protection • Fire service • Gas and oil • Health care • Law enforcement • Military • Postal service • Public broadcasting • Public library • Public security • Public transportation • Public housing • State schools, known as "public schools" in many countries, but not all. • Social services • Telecommunications • Town planning • Transportation • Waste management • Water supply network
Education
•
Town planning
Postal service
•
Transportation
•
Health care
Military
•
Gas and oil
•
•
•
Public security
from Wikipedia—Public service
•
•
Waste management
Pictures are from Google
— 66 —
TASK TASK 1 1 TASK 2 TASK 3
CHINESE CITIZEN
TASK 4 •
This is for Chinese citizen who keep a Chinese passport.
TASK 5 Intros
TOPIC NORWAY
•
Scope Chinese citizen apply for Norway tourist visa
Research
This is for those who intends to go to Norway.
Nowadays, more and more Chinese citizen love touring all over the world and Noway whose scenery and natural environment is brilliant is one of the popular country, whereas it’s not smooth when they apply for a tourist visa through website.
interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration
TOURIST VISA
prototype 2.0
•
They want to go for a tour and apply for a tourist visa on line.
— 67 —
Reflection
TASK TASK 1 1 TASK 2 TASK 3 TASK 4 TASK 5
RESEARCH: Interview
Intros Scope Chinese citizen apply for Norway tourist visa
Mac: I can see his/her screen so that I know where he/she is and what is he/she doing.
iPad: I can see my testee’s face and hear him/her
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration
I interviewed 7 person: I ask them to figure out the way to apply for Norway tourist visa on line and got their words.
“China! China! I’ve said3 times So I thought I went a wrong way here.”
prototype 2.0 “So much, and it’s in English”
Reflection
Totally lost… He cannot find the right web without my help
“Register troublesome.”
is
so
“I don’t want to read English.”
“username is occupied?! password is invalid?! I did registering part 4 times!!”
“Why password invalid ? ”
“I read too much irrelative information, if there are some fi l t e r b e f o r e m y r e a d i n g , t h a t ’s better.” (checklist page )
She will ask tourist agency for help.
“UDI is childish, it’s too simple, has not even a single picture, all are boring icons,and not enough info.” “Why no Chinese”
“All information is just piled up t o g e t h e r, I d o n ’t know which is important.” (checklist page )
“What the hell!” (choose visa type page) “Checklist is clear, I can find all I need here.” (checklist page )
bad experience
“ W h e re i s t h e checklist?”
She is patient and good at English.
good experience My notes
— 68 —
“The application portal is much more official, and it’s quite clear where to go and where you are. ”
TASK TASK 1 1 TASK 2 TASK 3 TASK 4 After interview, I was trying to figure out all the way by myself. Here is what I found: There are 4 website users may go to from Google, and they are linked with each other somewhere. So user need some time to find the checklist.
TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research
RESEARCH: understanding
interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
— 69 —
TASK TASK 1 1 TASK 2 TASK 3
ANALYSIS OF RESEARCH
This map shows: • where did users go; • where and what problems they meet; • who meet that problem; • how troubling that problem is.
TASK 4 must repeat info several times, “China”,”Tourist visa”
TASK 5 back here
Intros Scope
EMBASSY
no Chinese version
APPLICATION PORTAL
UDI
Chinese citizen apply for Norway tourist visa
Research interview and understand
Register
CHECKLIST
Log in so bad checklist! 1. ambiguous info 2. no explanation 3. no “print” button 4. irrelative info 5. bad communication
sketch and clickable prototype
User test user test on prototype
several failure
GUIDE WEB
Concept
no checklist in UDI, only a link to embassy
Choose visa type
bad communication
Read intro and start
Iteration prototype 2.0
Reflection
Pay the fee user’s way
severe problem
link to “CHECKLIST”
mild problem
user who meet the problem there
— 70 —
not checklist here, you need to search.
TASK TASK 1 1 TASK 2
LEVEL.1
TASK 3
so bad checklist! 1. ambiguous info 2. no explanation 3. no “print” button 4. irrelative info 5. bad communication
TASK 4
no checklist in UDI, only a link to embassy
TASK 5
PROBLEMS TO SOLVE: the conclusion of research
not checklist here, you need to search. back here
LEVEL.2
Intros Scope Chinese citizen apply for Norway tourist visa
Research The most thing users need is a simple and clear checklist. Every user was searching that. So I need to give them a way to checklist and a better checklist including visual communication and logic improving as well as some details.
interview and understand
Concept sketch and clickable prototype
must repeat info several times, “China”,”Tourist visa”
User test
no Chinese version
Iteration
user test on prototype
prototype 2.0
Reflection
LEVEL.3 several failure bad communication
— 71 —
TASK TASK 1 1 TASK 2 TASK 3
FOCUS ON CHECKLIST
Nowadays’ checklist
TASK 4 unreadable useful
I decide to focus on checklist. Here is nowadays’ checklist.
TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
No need to read
Research interview and understand
Concept sketch and clickable prototype
No need to read if the user is over 18
User test user test on prototype
Iteration prototype 2.0
useful
Reflection
No need to read if the user is over 18 useful
No need to read
— 72 —
TASK TASK 1 1 TASK 2 TASK 3 Google, then user directly get to the checklist I designed without any losing or searching around. But how to guide them?
IDEAL MODEL of user’s way
TASK 4 TASK 5 Intros
BACK TO CHECK AND DO NEXT Scope GOOGLE
CHECKLIST
LINKS IN CHECKLIST
checklist knows and control everything: 1.after you finish one item, it will automatically check, so that you can see your process 2.all the links you need 3.explanation of terms 4.tell you how to do, where to get this
Chinese citizen apply for Norway tourist visa
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
A WEBSITE
Reflection
I think I could build a web for Chinese tourist and it’s so popular that user will surely go there if they want to go a tour oversea. Just like Airbnb, whenever people want a instant room, they go there.
— 73 —
TASK TASK 1 1 TASK 2
1. Go to the popular web I will build
2. Tell the web where you want to go
TASK 3 TASK 4 TASK 5 Intros
5. Inspect your state 3. You get the checklist
4. Follow the checklist
Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
A WEBSITE
— 74 —
TASK TASK 1 1 TASK 2
PROTOTYPE Chinese version
TASK 3 TASK 4
Process bar
TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research Explanations
interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
— 75 —
TASK TASK 1 1
“China! China! I’ve said3 times So I thought I went a wrong way here.”
TASK 2
“So much, and it’s in English”
TASK 3
Totally lost… He cannot find the right web without my help
TASK 4
“Register troublesome.”
is
so
“I don’t want to read English.”
“username is occupied?! password is invalid?! I did registering part 4 times!!”
“Why password invalid ? ”
“What the hell!” (choose visa type page) “Checklist is clear, I can find all I need here.” (checklist page )
“ W h e re i s t h e checklist?”
“I read too much i r r e l a t i v e information, if there a r e s o m e fi l t e r before my reading, that’s better.” (checklist page )
She will ask tourist agency for help.
“UDI is childish, it’s too simple, has not even a single picture, all are boring icons,and not enough info.” “Why no Chinese”
“All information is just piled up t o g e t h e r, I d o n ’t know which is important.” (checklist page )
“The application portal is much more official, and it’s quite clear where to go and where you are. ”
RESEARCH: Interview
She is patient and good at English.
TASK 5 FIRST PROTOTYPE
Intros Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
“The application portal link appears 3 times. Maybe you can tell to go to a link, then you can get 3 documents.” “You may tell us how many people have applied for this successfully, then I trust it more.”
“After reading your checklist, I will still go to other website as you guide, and I will still meet those bugs of other web. Then maybe lost my way again.”
“Too big process bar.”
“How can I trust you? Maybe I will also check the Embassy to see what they say ”
“Your Checklist is a little messy, you can see UDI, there are some square which makes the words organised.” “You may add some picture to tell more about details on which page you will be and where you should click”
“I think this is very nice, I will use this, quite clear. And after I know this web, I can get more access to worldwide VISA, I don’t need to learn each website of different country.”
“I think you should emphasise the process guide rather than a single document.”
“You’d better think more about graphic things.” “You should add some contact info..” “Quite clear. ” “Looks nice. ”
“No downloadable documents?”
I test 4 old person who was interviewed 3 or 4 days ago and 3 new ones who starts from my prototype. — 76 —
USER TEST
TASK TASK 1 1 TASK 2 TASK 3 TASK 4
ITERATION LIST
TASK 5 Chinese version. Too much information to read, and some of these are no use for my user. Solution: use a question as a filter before they read too much information.
Intros
ITERATION
Get lost in many website. Solution: use guide pictures to tell the user where is the bug, so that they won’t get into a circle.
Scope Chinese citizen apply for Norway tourist visa
Research They should know their way. Where I am and where I will be. Solution: guide pictures, checklist itself and process bar will tell them the way they are. They should know what the document is and where to get it, those ones they need to collect. Solution: use explanation, example and guide pictures to give them a specific knowledge.
interview and understand
The frame is good but some details should be settle down to improve the user experience in interaction aspect.
Concept sketch and clickable prototype
User test Make my users trust me. Solution: 1）.we will be famous because our application range is not a single country but all countries. 2）.use user feedback to get the success rate 3）.advertisement
user test on prototype
Visual communication Solution: 1）.changed the main color from bright green to lake blue 2) .fill color into background to make more sense of phases
Reflection
— 77 —
Iteration prototype 2.0
TASK 1 TASK 2 TASK 3 TASK 4 TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
VERSION 2
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
— 78 —
TASK 1
EXPLANATION
Process bar
TASK 2 •
Print out
Check
After you’ve checked all the items in one phase, that phase will be filled with color.
•
For user’s convenience, they can print out the checklist.
•
Check each item on line (and the process bar will be filled).
TASK 3 TASK 4
Steps’ guide
TASK 5 Intros Scope Chinese citizen apply for Norway tourist visa •
Pictures and words guide the user step by step.
Research interview and understand
Concept •
Answer a question as a filter to simplify one’s list.
sketch and clickable prototype
User test user test on prototype
Iteration
Filters
prototype 2.0
Reflection
•
Ask for feedback! — 79 —
•
A big report button here! Collects user’s feedback and results, which will be a key point of the business chain. It’s also a symbol that the user finish/achieve an application!
TASK 1 TASK 2 TASK 3 TASK 4 TASK 5 Intros
FINAL CHECKLIST
Scope Chinese citizen apply for Norway tourist visa
Research interview and understand
After filters, most users will read this much, which is about a quarter of nowadays’ one.
Concept sketch and clickable prototype
User test user test on prototype
Iteration prototype 2.0
Reflection
— 80 —
TASK 1 TASK 2 TASK 3
ITERATION LIST
✓ ✓
ALL BE DONE
TASK 4
Reflection
TASK 5
Chinese version.
Intros
Too much information to read, and some of these are no use for my user. Solution: use a question as a filter before they read too much information.
Scope Chinese citizen apply for Norway tourist visa
✓
Get lost in many website. Solution: use guide pictures to tell the user where is the bug, so that they won’t get into a circle.
Research
✓
They should know their way. Where I am and where I will be. Solution: guide pictures, checklist itself and process bar will tell them the way they are.
Concept
✓
They should know what the document is and where to get it, those ones they need to collect. Solution: use explanation, example and guide pictures to give them a specific knowledge.
User test
✓ ✓
interview and understand
sketch and clickable prototype
WELL DOWN!
user test on prototype
Make my users trust me. Solution: 1）.we will be famous because our application range is not a single country but all countries. 2）.use user feedback to get the success rate 3）.advertisement
I got my first “excellent” since I went aboard.
Iteration
Visual communication Solution: 1）.changed the main color from bright green to lake blue 2) .fill color into background to make more sense of phases
So I give myself ten stars!
Nice design process, nice research and analysis, also nice solution!
I can see my improvement this semester.
— 81 —
prototype 2.0
Reflection
THANK YOU!! 397183113@qq.com +47 93478398