Flux Wireframes
-
Upload
mckenzie-marston -
Category
Documents
-
view
359 -
download
0
Transcript of Flux Wireframes
FLUXwireframes
Sam Mak & McKenzie MarstonMultimedia Experience
Scenario #1
CLAIMS
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!
1.1 - HUB
October 14, 2012
REPORTS CONTACTSOFFICE SPACE E-MAIL
“Entering Workspace”
These icons are the general navigation for the hub. The circles contain subjects such as reports, contacts, claims, email, and office space. They are on a rotation and the user can swipe through or use the arrows to find their subject of choice. Which ever icon is enlarged and on the center will be the focus for that moment.
At the top of the hub and their stage are the dashboard features. These features include their calendar, messages, clock, notes, and task lists. These icons stay stationary, but the data that expands from them and can be moved around by the user. If they want the entire dashboard to expand they can use the center circle. By tapping it all will expand and by holding their finger down a drop down menu will appear.
This blank space acts as the users stage where they can drag, swipe, move, throw, flick, expand whatever data they see fit in that moment.
Chloe arrives at work and is enters the Hub. This is a place that contains all of her data, messages, and content that she will need to have a successful day in the office.
CLAIMS REPORTS CONTACTSOFFICE SPACE E-MAIL
HELLO CHLOE!October 14, 20129:00 PM
AM
CALENDAR
MESSAGES
TASKS
MESSAGESCALENDAR TASK LISTNOTES
Halloween
Team meeting
Joe – Do you know...
Tammy – When is the next...
Send fax to Brenda
Lunch with Sarah
1.2 - HUB “Viewing Dashboard”
By holding a finger down the drop down menu appears. Shows all of the dashboard features as well as a list of view of their contents.
Chloe needs to check her tasks for the day and to see if their are any messages she needs to respond to.
CLAIMS
NO. 2045Melinda Jackson
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
REPORTS CONTACTSOFFICE SPACE E-MAIL
1.3 - HUB “Selecting a Claim”
Chloe needs to get to work on a current claim. She swipes through her bottom navigation and finds her claim.
The viewer swipes through their bottom navigation to find the claim circle. The smaller dots within the outline refer to their current claims. They can use their finger to highlight the claims. When the claim is highlighted it is shows the name, claim number and an image of the person involved in the claim.
NO. 2045Melinda Jackson
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
CLAIMS REPORTS CONTACTSOFFICE SPACE E-MAIL
1.4 - HUB
POLICY NO:18242587
VEHICLE:2001 Honda Civic
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
DESCRIPTION:
SECOND PARTYOVERVIEW
Police Report
Vehicle History
Auto Accident Worksheet
DOCUMENTS
NAME: Bill Smith
INSURANCE: Geico
VEHICLE: Ford Focus
“Viewing a Claim”
By flicking or dragging that image to the corner all of the data for the claim expands across the stage. The image circle acts a header or indicator to remind the user of which claim they are working on.
Chloe flicks Melinda’s image to top left corner and sees all of the claims current data.
All of the data for the claim expands showing the vehicle, police reports, history, imagery, videos, the subject’s testimony for the wreck. This also allows to see the second party’s information.
I was driving down Grand Street heading towards 18th. I was going straight through the light and at the last minute the guy turned into me. He didn’t yield at the light, and turned into my car. I saw him at the last minute and swerved over two lanes and his passenger side hit my driver side. My glasses flew off and I hit my head on the bar that connects windshield and window. On impact, my car did a 360 and landed the opposite way on 18th Street. I was stopped on the side of the road. Fluids were leaking out and the…
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
CLAIMS REPORTS CONTACTSOFFICE SPACE E-MAIL
1.5 - HUB
POLICY NO:18242587
VEHICLE:2001 Honda Civic
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
DESCRIPTION:
SECOND PARTYOVERVIEW
Police Report
Vehicle History
Auto Accident Worksheet
DOCUMENTS
NAME: Bill Smith
INSURANCE: Geico
VEHICLE: Ford Focus
TASK LIST
Conference Call with Geico
Visit Body Shop
Call Melinda Jackson
“Adding Task”
NO. 2045Melinda Jackson
I was driving down Grand Street heading towards 18th. I was going straight through the light and at the last minute the guy turned into me. He didn’t yield at the light, and turned into my car. I saw him at the last minute and swerved over two lanes and his passenger side hit my driver side. My glasses flew off and I hit my head on the bar that connects windshield and window. On impact, my car did a 360 and landed the opposite way on 18th Street. I was stopped on the side of the road. Fluids were leaking out and the…
Chloe notices a detail and needs to call Melinda. However, she realizes that she needs to get to the body shop to view and get details of the car. Chloe needs to add a task asa reminder for later.
If the user decides to add a task they simply tap the task list tap on the available space at the tap and begin to type. Once enter is pushed the task is pushed into the list with the other tasks.
1.6 - WALL “Outside Wall”
Before Chloe leaves for her appointment she writes a message on the outside interactive wall of her cubicle.
This is another interactvie touch screen where she can leave notes and messages for coworkers to see. Others can also write on this wall. If someone stops by and she is gone they can write her a quick message or note as well.
Be back by 12pm
-Chloe
NO. 2045NO. 2045
Melinda Jackson
CLAIMS
CONTACTS
CLAIMS
1.7 - PHONE “At the Body Shop”
MELINDA JACKSON
CLAIMSCONTACTS
Chloe has arrived at the body shop for her appointment. She can use her app to document what she needs to use for later reference.
The viewer can scroll through claims, email, and contacts.
Chloe finds Melinda to bring up her profile. The circle works just like the Hub claims icon. She can use her finger to highlight certain cliams and once she finds Melinda’s it’s enlarged and she can tap the image to then see her profile.
This is Melinda’s profile. Chloe can see the documents such as police reports and imagery. She has the ability to choose her documentation method. Record video, photograph, take notes, or do a voice recording. She can do so by pulling up the icon menu.
POLICY NO:18242587
VEHICLE:2001 Honda Civic
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
STATEMENT: I was driving down Grand Street heading towards 18th. I was going straight through the light and at the last minute the guy
1.8 - PHONE “At the Body Shop”
Once the documentation menu is up with the icons she chooses the camera so that she can take some quick snap shots of the vehicle.
The camera screen appears and she takes her photo.
The image is automatically added to Melinda’s profile.
Here Chloe snaps her image and then scrolls down to view the image within the profile.
NO. 2045MELINDA JACKSON
POLICY NO:18242587
VEHICLE:2001 Honda Civic
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
STATEMENT: I was driving down Grand Street heading towards 18th. I was going straight through the light and at the last minute the guy turned into me. He didn’t yield at the light, and turned into my car. I saw him at the last minute and swerved over two lanes and his passenger side hit my driver side.
Chloe returns to the office and is greeted by her last open screen.
NO. 2045Melinda Jackson
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
CLAIMS REPORTS CONTACTSOFFICE SPACE E-MAIL
1.8 - HUB
POLICY NO:18242587
VEHICLE:2001 Honda Civic
DATE: October 14, 2012
CATEGORY: Vehicle Collision
LOCATION: Kansas City, MO
DESCRIPTION:
SECOND PARTYOVERVIEW
Police Report
Vehicle History
Auto Accident Worksheet
DOCUMENTS
NAME: Bill Smith
INSURANCE: Geico
VEHICLE: Ford Focus
“Hiding Claim”
Chloe needs to make a phone call. She pulls Melinda’s profile picture to claims and the claim information goes with it.
Chloe has a blank stage again and scrolls through her main navigation to find her contacts. She needs to work with the other party’s insurance to figure out who was in the wrong. There are some discrepancies that she discovered after visiting the body shop.
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
1.9 - HUB “Finding Contacts”
REPORTS OFFICE SPACEE-MAILCONTACTS
She taps contacts which enlarges to show hierarchy.
CLAIMS
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
CONTACTS REPORTSOFFICE SPACE E-MAIL
1.10 - HUB “Selecting Contact”
CLAIMS
CLIENTS
COMPANY
PERSONAL
All of the contacts are shown by their profile image. They are categorized by company, clients, and personal.
By swiping or flicking a contact to the top of the screen, the contact will appear on the wall.
Chloe has selected her contact and flicks it to the top of the screen so that she interact with the person through the wall. She finds the other insurance agent that she needs to talk with in her contacts.
9:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
CONTACTS REPORTSOFFICE SPACE E-MAIL
1.11 - HUB “Contact is Selected”
CLAIMS
CLIENTS
COMPANY
PERSONAL
The contact sits at the top of the hub to show that it has been placed onto the wall.
Chloe can now call her contact and has the ability to share screens with him to compare information.
2:30 PMAM
1.12 - WALL “Screen Share”
GEICO CLAIMS REPRESENTATIVERobert Jennings
CALL
Now that contact is on the wall the viewer has the option to call their contact.
Chloe pulls up her claim's info while the call is being completed. She is ready for the conversation and to talk through her discovery.
2:35 PMAM
1.13 - WALL “Screen Share”
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
CALLING ROBERT JENNINGS...
While the call is being completed the user can pull up their own information needed for the call.
The information has a tab at the top that is color coordi-nated. To show which caller’s information is which.
Chloe can now see the other person, Robert from GIECO, through her wall. She sees that her information is a certain color so that she can always see what she uploads and what Robert uploads.
1.14 - WALL “Screen Share”
2:40 AMPMPM
BILL SMITHI was in a hurry to see my son at the hospital. I am
from out of town and don’t know my way. I was
turned around and I didn’t see the car when I was
turning. I was looking at my phone for directions. I
realized my turn was coming up I started to turn
and at the last minute I saw a car and he was
speeding. I saw him and slammed on my breaks in
hopes to miss him. But I hit my passenger side on
his drivers side. Which made my car a 180 and I was
facing the opposite way on Grand Street.
360˚ VIEW
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
Once the conversation begins the other person can add information through their hub or phone as well.
Robert’s tabs are yellow so that he can tell, just as Chloe can, tell who uploads what.
Chloe wants to see that she added the correct testimony so she taps the walls central icon and it drops down a menu so that she can she that she has added to the one she needed.
1.15 - WALL “Comparing information”
2.45 PMAM
BILL SMITHI was in a hurry to see my son at the hospital. I am
from out of town and don’t know my way. I was
turned around and I didn’t see the car when I was
turning. I was looking at my phone for directions. I
realized my turn was coming up I started to turn
and at the last minute I saw a car and he was
speeding. I saw him and slammed on my breaks in
hopes to miss him. But I hit my passenger side on
his drivers side. Which made my car a 180 and I was
facing the opposite way on Grand Street.
360˚ VIEW
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
CHLOE
ROBERT
Added Melinda Jackson crash photo 01
Added Melinda Jackson crash photo 02
Added Bill Smith crash photo
Added Bill Smith testimony
Added Bill Smith 360 view
Added Melinda Jackson testimony
Added police report
The wall also allows the users to a drop down menu to show a visual reference as to what has been uploaded and when.
Chloe wants to take a closer look at the other party’s car. After uploading all of the necessary documents and media both Chloe and Peter scale down unimportant information objects and scale up the more important ones.
1.16 - WALL “Screen Share”
2:45 PMAM
360˚ VIEW
BILL SMITHI was in a hurry to see my son at the hospital. I am
from out of town and don’t know my way. I was
turned around and I didn’t see the car when I was
turning. I was looking at my phone for directions. I
realized my turn was coming up I started to turn
and at the last minute I saw a car and he was
speeding. I saw him and slammed on my breaks in
hopes to miss him. But I hit my passenger side on
his drivers side. Which made my car a 180 and I was
facing the opposite way on Grand Street.
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
The users scale down the specific information that is no longer of importance for the moment.
They enlarge the testimonies so that they can compare side by side with the car.
The wall allows for the insurance agents to use a 360º view on the damaged car.
Chloe and Robert continue their conversation by rotating the car. She spins the car and adds a note indicating that the driver’s side is not damaged.
1.17 - WALL “Object Interactions”
2:50 PMAM
360˚ VIEW
Driver’s side is not damaged.
BILL SMITHI was in a hurry to see my son at the hospital. I am
from out of town and don’t know my way. I was
turned around and I didn’t see the car when I was
turning. I was looking at my phone for directions. I
realized my turn was coming up I started to turn
and at the last minute I saw a car and he was
speeding. I saw him and slammed on my breaks in
hopes to miss him. But I hit my passenger side on
his drivers side. Which made my car a 180 and I was
facing the opposite way on Grand Street.
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
The car can be rotated to get a better view of certain areas. This is a tool for agents to have later reference if they have questions or need to have discussions.
Notes can be added in real space by double tapping on the certain parts of the car. The notes are color coded as well.
After reviewing the documents and imagery on the wall, Chloe and Robert have arrived at the final judgement that Bill was in the wrong.
1.18 - WALL “Screen Share”
3:00 PMAM
BILL SMITHI was in a hurry to see my son at the hospital. I am
from out of town and don’t know my way. I was
turned around and I didn’t see the car when I was
turning. I was looking at my phone for directions. I
realized my turn was coming up I started to turn
and at the last minute I saw a car and he was
speeding. I saw him and slammed on my breaks in
hopes to miss him. But I hit my passenger side on
his drivers side. Which made my car a 180 and I was
facing the opposite way on Grand Street.
360˚ VIEW
MELINDA JACKSONI was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I had to call a tow truck and I
knew that my car was totaled.
Driver’s side in not damaged.
During the discussion as well or whenever needed the users can highlight notes.
360˚ VIEW
Scenario #2
2.1 - WALL “Hiding Workspace”
3:00 PMAM
BILL SMITH
I was i
n a h
urry to
see
my so
n at t
he hosp
ital.
I am
from
out o
f tow
n and d
on’t know
my w
ay. I w
as
turn
ed a
round a
nd I did
n’t se
e th
e ca
r when
I w
as
turn
ing. I
was l
ooking a
t my p
hone fo
r dir
ectio
ns. I
realiz
ed m
y turn
was c
omin
g up I
start
ed to
turn
and at t
he la
st m
inute
I sa
w a
car a
nd he
was
spee
ding. I
saw
him
and sl
amm
ed o
n my b
reaks i
n
hopes to
mis
s him
. But I
hit
my p
assen
ger si
de on
his d
river
s sid
e. W
hich m
ade m
y car a
180
and I
was
faci
ng the
opposite
way o
n Gra
nd Str
eet.
MELINDA JACKSON
I was driving down Grand Street heading towards
18th. I was going straight through the light and at
the last minute the guy turned into me. He didn’t
yield at the light, and turned into my car. I saw him
at the last minute and swerved over two lanes and
his passenger side hit my driver side. My glasses
flew off and I hit my head on the bar that connects
windshield and window. On impact, my car did a
360 and landed the opposite way on 18th Street. I
was stopped on the side of the road. Fluids were
leaking out and the front was totally smashed in
and the door was broken. I called 911 and so did the
other guy. His car was turned almost all the way
around as well and did a 180. The cops showed up
and I took a report. I h
ad to call a tow truck and I
knew that my car was totaled.
360˚ VIEW
Driver’s side in not damaged.
User can use a hand motion to swipe all of the present content on the wall away to clear their space. The contents go off to the side and can be brought back at anytime.
Chloe finishes the conference call, which was fairly stressful. So she decides to take a break. She immediately uses a swiping gesture to hide the contents of the claim.
CLAIMS
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!
2.2 - HUB “Prompt Notification”
October 14, 2012
REPORTS CONTACTSOFFICE SPACE E-MAIL
3:00 PMAM
By tapping the middle icon a drop down menu will appear.
Chloe returns to the hub to complete her prompt.
CLAIMS REPORTS CONTACTSOFFICE SPACE E-MAIL
HELLO CHLOE!October 14, 2012
CALENDAR
MESSAGES
WEEKLY PROMPT
MESSAGESCALENDAR TASK LISTNOTES
Halloween
Team meeting
Joe – Do you know...
Tammy – When is the next...
Where is your favorite place to visit?
Lunch with Sarah
2.3 - HUB “Viewing Dashboard”
3:00 PMAM
Within the dashboard the weekly prompt sits at the bottom.
Chloe taps the weekly prompt, “where is your favorite place to visit?”
OFFICE SPACE
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!
2.4 - HUB
October 14, 2012
REPORTS CONTACTSCLAIMS E-MAIL
“Responding to Prompt”
WEEKLY PROMPT
QUESTION:
Where is your favorite place to visit and why?
UPLOAD PHOTO
SUBMIT
FLOOR1234567891011121314151617181920
3:00 PMAM
After tapping the weekly prompt the question appears where the viewer answers the question and uploads a photo as well.
The user is now in the office space part of the hub. Here they can view the levels of the building, specific cubicles within that floor, and their locations. The goal of the this space is so that coworkers can view other coworkers responses to the prompt.
The building levels.
She will type in her answer is the space provided as well as upload a photo.
OFFICE SPACE
3:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!
2.5 - HUB
October 14, 2012
REPORTS CONTACTSCLAIMS E-MAIL
“Responding to Prompt”
WEEKLY PROMPT
QUESTION:
Where is your favorite place to visit and why?
My favorite place to visit is Florida. My Family
visits every year and we absolutely love the
beaches there.
SUBMIT
FLOOR1234567891011121314151617181920
Chloe uploads a photo from her favorite Florida vacation.
Once her image is uploaded and she has finished her response she can submit it.
2.6 - WALL
3:00 PMAM
“Wall Changes”
Once the photo is submitted the wall immediately changes to sync with the hub photo she just answered for the prompt.
2.7 - PHONE
CONTACTS
SWIPE TO WALL
TRANSFER TRANSFER
IMPORT
EXPORT
“Uploading Content”
Going into the app she is presented with a similar form of navigation as the bug and wall. She taps the transfer button.
The other navigation will recede and the sub options will appear. Here she can import the contents of her wall as is or upload contents from her phone to the wall. She can upload any type of media, personal or work related.
She finds the photo of her family and can simply swipe in an upwards motion for the photo to appear on the wall.
The prompt reminds Chloe of photos she took from that trip she wants to add. She finds the image through the FLUX app on her phone.
2.8 - WALL
3:30 PMAM
“Throwing Content”
The image from the phone will appear on the wall. Her she can freely scale and arrange her photos.
Once Chloe swipes the image it appears on her wall.
“Viewing Responses”2.9 - HUB
OFFICE SPACE
3:00 PMAM
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!October 14, 2012
REPORTS CONTACTSCLAIMS E-MAIL
FLOOR1234567891011121314151617181920
JACK MARTINAccount Manager
WEEKLY PROMPT
VIEW
YOU
Chloe is now in the Office Space. She wants to view other coworkers responses to the prompt.
In the Office Space area the viewer can interact with the office building floors. By tapping on specific cubicles or offices the people will appear and by tapping on view you can view their response to the prompt.
OFFICE SPACE
MESSAGESCALENDAR TASK LISTNOTES
HELLO CHLOE!
2.10 - HUB
October 14, 2012
REPORTS CONTACTSCLAIMS E-MAIL
FLOOR1234567891011121314151617181920
WEEKLY PROMPT
QUESTION:
Where is your favorite place to visit and why?
I love Paris. My grandparents have lived in the
city their entire lives so I try to visit when I can.
The Parisian lifestyle is so different it’s a nice
change of pace.
JACK MARTINAccount Manager
“Viewing Responses”
3:00 PMAM
Jack’s response appears with the prompt question and his image and response to his selection.