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

CALENDAR

MESSAGES

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

HELLO CHLOE!October 14, 2012

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.

9:00 PMAM

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

1.5 - HUB

POLICY NO:18242587

DESCRIPTION:

Police Report

Vehicle History

DOCUMENTS

NAME: Bill Smith

INSURANCE: Geico

VEHICLE: Ford Focus

TASK LIST

Conference Call with Geico

Visit Body Shop

Call Melinda Jackson

“Adding Task”

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

E-MAIL

CLAIMS

1.7 - PHONE “At the Body Shop”

MELINDA JACKSON

CLAIMSCONTACTS

E-MAIL

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

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

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.

9:00 PMAM

1.8 - HUB

POLICY NO:18242587

DESCRIPTION:

Police Report

Vehicle History

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

1.9 - HUB “Finding Contacts”

REPORTS OFFICE SPACEE-MAILCONTACTS

She taps contacts which enlarges to show hierarchy.

CLAIMS

9:00 PMAM

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

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

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

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.

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

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

360˚ VIEW

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.

2:45 PMAM

360˚ VIEW

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.

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.

3:00 PMAM

360˚ VIEW

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

urry to

n at t

he hosp

n and d

on’t know

ay. I w

round a

nd I did

n’t se

r when

ing. I

ooking a

t my p

hone fo

realiz

y turn

g up I

and at t

ding. I

and sl

n my b

reaks i

hopes to

. But I

ger si

hich m

y car a

ng the

opposite

nd Str

MELINDA JACKSON

I was driving down Grand Street heading towards

and I took a report. I h

ad to call a tow truck and I

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

HELLO CHLOE!

2.2 - HUB “Prompt Notification”

October 14, 2012

3:00 PMAM

By tapping the middle icon a drop down menu will appear.

Chloe returns to the hub to complete her prompt.

CALENDAR

MESSAGES

WEEKLY PROMPT

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

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

HELLO CHLOE!

2.5 - HUB

October 14, 2012

“Responding to Prompt”

WEEKLY PROMPT

QUESTION:

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

E-MAIL

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

FLOOR1234567891011121314151617181920

JACK MARTINAccount Manager

WEEKLY PROMPT

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

HELLO CHLOE!

2.10 - HUB

October 14, 2012

FLOOR1234567891011121314151617181920

WEEKLY PROMPT

QUESTION:

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.

Flux Wireframes

Documents

Tsi wireframes

Wireframes II. Typical Wireframes

Stratigo Wireframes - example

Wireframes - Usability

Project Proposal Wireframes

Singularity Hub Wireframes

Website wireframes

Life Process: Wireframes

Sweeteeth Wireframes

sample wireframes

wireframes graded

WP Wireframes

Wireframes Portal FITAM

Celebrations.com Wireframes

UX wireframes

Wireframes - 2014

Creating Wireframes

Module 07: Wireframes

WPCC Wireframes

INHABIT community wireframes