THE SUPER CONNECT of AVENGER CENTER
REPORT DOCUMENTATION
TABLE OF CONTENT
Idea
P1
App
deďŹ nition
Wireframe Interaction
Prototype
P16-23
P2-4
P5-15
Idea For the long time to watch Marvel’s
Coming soon in...
1
Aconnect | UX-UI Design | December 2015
3
series film with many super heroes, I am so excited by their story. In the one of series, I really admired to The Avenger for all of 2 part. How is it amazing if The Avenger has smart connect by smartphone- a common device in real life for a now day. And I pick a idea which is special mobile app for it. If you watch The James Bond Films, you can see many things which were made for only using in film. Such as Aston Martin DB10 is about 1.5 million dollors, Bomber Jacket is about 2222 USD, Omega Seamaster Watch is about 7500 USD, etc. So, I want to make one app for Marvel to support for The Avenger in next chapper will have fun playing with it!
App definition
OS: iOS 9 Limited user version This is demo version for Iron Man platform
Device: iPhone 6s
Product: NooD Corp. Heredity: Marvel Studio
Technology: Fingerprint Sensor 3D Touch Heart Rate Sensor VR Holographic
! Creative app, non for commercial or common app for normal user.
Features Aconnect is the app to help heroes of Averger organize connect together when they are in daily life. Eye tracking: user can get the physical fitness, and information about their place. Connect center: contact to other member and get their personal information. Receive notification from The Avenger Center and take a feedback. Thunder action: in the emergency, active the thunder action mode to delete all data from device and send SOS messenger to the rest member and The Avenger Center.
2
Aconnect | UX-UI Design | December 2015
Structure Physical fitness infos Global Positioning System User
notifications
The Avenger Center
contacting
Members Physical fitness infos Global Positioning System
3
Aconnect | UX-UI Design | December 2015
Information architecture Finess Login
Home screen
Location
~ Personal informations Notice
Avenger center
Storage Call
Connect center
Messenger SOS mode
Thunder action Crash all data NotiďŹ cation
App setting About
4
Aconnect | UX-UI Design | December 2015
Wire frame
First time in use: Login with fingerprints
Interaction Sign
one tap/click
swipe to the left
swipe to the right
Welcome to Aconnect! Push your fingerprints.
USER ID
scroll
Password
Scaning
Accepted!
045sdrt
****
LOGIN
peek put fingerprints to home button
pop Login by fingerprints or use the ID and password.
5
Aconnect | UX-UI Design | December 2015
Home screen: informations about physical ďŹ tness, Locate
Toolbar Fitness
Location
Fitness
Home screen /Eye tracking
Location
Los Angeles, California 8mph Wind 54% Humidity
0529
App setting
engaged scanning
290C Feels Like
02548
Thunder action
tap to show detail in place
Connect center
H Palladium = 7.001 xe -1 1
1
Avenger center
Fitness: Arc Reaction detail
6
Aconnect | UX-UI Design | December 2015
Location: Environmental indicators and defind location
Home screen: informations about physical ďŹ tness, Locate
Fitness
Location
Los Angeles, California
202 West 1st Street
8mph Wind 54% Humidity 290C Feels Like
202 West 1st Street
1
Location: Environmental indicators and defind location
7
Aconnect | UX-UI Design | December 2015
show exactly the place that Tony is stay
3D Touch show: peek on the map; Environmental indicators has same way.
Avenger Center: notice the new mission
Notice
Notice
Storage
Storage
AC-IM-01-06-32-San
AC-IM-01-06-32-San
The digital details
AC-IM-01-06-32-San
AC-IM-01-06-32-San A mission statement is a statement which is used as a way of communicating the purpose of the organization!
Confirm
Notice: the lastest notification from Avenger Center
8
Aconnect | UX-UI Design | December 2015
The content of notification Send the confirmation to The Avenger Center
Storage: Save the history of mission
List of mission’s history
Avenger Center: notice the new mission
Notice
Storage
AC-IM-01-06-32-San AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-01-06-32-San
A mission statement is a statement which is used as a way of communicating the purpose of the organization!
A mission statement is a statement which is used as a way of communicating the purpose of the organization!
Confirmed!
Confirmed!
Back to Storage
9
Aconnect | UX-UI Design | December 2015
Avenger Center: notice the new mission
Delete All
Notice
AC-IM-01-06-32-San
Storage
AC-IM-01-06-32-San
Long press in time
AC-IM-01-06-32-San
AC-IM-01-06-32-San
Notice
Storage
AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-01-06-32-San
To delete all mission
AC-IM-01-06-32-San
Delete
Delete All This content of mission will be deleted.
AC-IM-01-06-32-San
Delete
AC-IM-01-06-32-San
AC-IM-01-06-32-San
Cancel Delete
To delete one mission in storage tab
10
Aconnect | UX-UI Design | December 2015
Connect Center: connect to other members
Caption America
Messenger text text text text text text text text text text text text text text
Avenger Center
Caption America
Have a new messenger (notiďŹ cation icon)
text text text text text
202 West 1st Street
text text text text text text
Black Widow
text text text text text text text text text text text text text text
Hawkeye
text 202 West 1st Street, Los Angeles, California Typing your text... AC-IM-01-06-32-San
Hulk
Thor
Aa
messenger
11
Aconnect | UX-UI Design | December 2015
call
close window
Connect Center: connect to other members
Messenger
Messenger
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text
text text text text text
text text text text text text text text text text text text text text
text
text
text text text text text text text text text text text text text text text text text text text
Typing your text...
Aa
text
Q W E R T Y U I O P Typing your text...
Aa
A S D F G H J K L Z X C V B N M 123
12
space
@
.
return
back to messenger window
Aconnect | UX-UI Design | December 2015
Connect Center: connect to other members
Avenger Center
Caption America
Location Call Messenger
13
Black Widow
Hawkeye
Hulk
Thor
Aconnect | UX-UI Design | December 2015
Thunder Action
in the emergency, active the thunder action mode to delete all data from device and send SOS messenger to the rest member and The Avenger Center.
Send Now
Send Now
Delete all Avenger’s data from your phone
Crash All
Crash All Delete
Cancle
14
Aconnect | UX-UI Design | December 2015
65%
App Setting: control app’s features
Tony Stark
Notification About
LOG OUT
15
Aconnect | UX-UI Design | December 2015
Login
Prototype
Use your fingerprints OR
ACCONECT
USER ID
Tony Stark
Password
********
LOGIN
16
Aconnect | UX-UI Design | December 2015
Hi, Tony!
Home screen /Eye tracking
Finess
Location
Finess
Los Angeles, California LOS ANGELES
424558.5656945
.56569 45
Wind
Humidity
o
21 C Feels like
0
100
0
0
300
0
500
0
700
900
54%
0
200
0
400
0
0
600
424558.5656945
800
8mph
424558 .56569 45
424558
45
202 West 1st Street
424558
45 .56569 424558
.56569
Location
+ 424558
45 .56569
.56569 45
424558
424558.5656945
5564 .18adklkw
5564 .18adklkw
+
Thermo -nuclear
33
Fission
5564 .18adklkw [N]
1
17
1
Aconnect | UX-UI Design | December 2015
Avenger center
Notice
Notice
Storage
Storage AC-IM-01-06-32-San
AC-IM-01-06-32-San
360
30
0
33
360
2.215
2.215
2.215
30
0 33
5
2.21
5
2.215
2.215
2.215
5
2.215
2.215
2.215
2.215
2.21
60
AC-IM-05-04-32-Tue
2.215
5 2.21
30 0
30
60
0
2.21
2.215
205 ai
DATA . 5756760006860076868688
860076868688
860076868688 86007686
2.215
8600
DATA . 57567600068600768
2.215
DATA . 5756760006860 DATA . 5756760006860076868
2.215
90
270
Unit Match
205 ai
Unit Match
2.215
90
AC-IM-07-02-32-Fri
DATA . 5756760006860076868688
860076868688 8600 860076868688
DATA . 57567600068600768
86007686
2.215
DATA . 5756760006860 DATA . 5756760006860076868
2.215
2.215
20w 548e 54n
2.215
0
0
24
2.215
12
2.215
20w 548e 54n
2.21
5 2.21
0
24
0
12
5
RADAR IS RUNNING
2.215
5 2.21
RADAR IS RUNNING
2.215
2.215
2.215 2.215
2.215 2.215
15
0
0
15
21
0
0
21
180 180
AC-IM-01-06-32-San A mission statement is a statement which is used as a way of communicating the purpose of the organization! Confirm
18
Aconnect | UX-UI Design | December 2015
A mission statement is a statement which is used as a way of communicating the purpose of the organization!
Confirmed!
Avenger center
Notice
Storage
Notice
Delete All
Storage
AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-01-06-32-San
AC-IM-05-04-32-Tue
AC-IM-05-04-32-Tue
AC-IM-05-04-32-Tue
AC-IM-07-02-32-Fri
AC-IM-07-02-32-Fri
AC-IM-07-02-32-Fri
Delete
Delete All This content of mission will be deleted.
AC-IM-01-06-32-San
Delete AC-IM-05-04-32-Tue
AC-IM-07-02-32-Fri
19
Aconnect | UX-UI Design | December 2015
Cancel Delete
Connect center
Black Widow
Avenger Center
Black Widow
Location Call
+
Messenger 55645564.18adklkw .18adklkw
Caption America
Hawkeye
[N]
202 West 1st Street, Los Angeles, California AC-IM-01-06-32-San
Hulk
20
Thor
Aconnect | UX-UI Design | December 2015
Connect center
Messenger
Messenger
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text
text text text text text
text text text text text text
text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Typing your text...
Aa
21
Aconnect | UX-UI Design | December 2015
text
Typing your text...
Aa
Thunder action
Send Now
Send Now
Delete all Avenger’s data from your phone Crash All
Crash All
Delete Cancle
22
Aconnect | UX-UI Design | December 2015
65%
App setting
Tony Stark
Notification About
LOG OUT
23
Aconnect | UX-UI Design | December 2015