6. UniversalMindâ˘
AGENDA
Part 1:
⢠User-centered design
⢠Get creative!
⢠Who is your user?
⢠Tools: notebooks, sketches, illustrations
Part 2:
⢠Journey Mapping
⢠Contextual scenarios - day in a life stories of userâs
interacting with design object
⢠Tools: notebooks, sketches, illustrations
Part 3:
⢠Wireframes - sketches and underlying architectural
solution to the design, including the state structure
of the application
⢠Tools: notebooks, markers, sketches, Paper by 53
Monday, May 6, 13
7. UniversalMindâ˘
AGENDA (CONTINUED)
Part 4:
⢠Deployment decisions - native, hybrid, mobile web
⢠Content / Context design - the organization of content
contextually for the userâs situation
⢠Tools: notebooks, sketches, illustrations
Part 5:
⢠Thematic design - graphic and ui design, patterns,
metaphors, color, applied branding, iconography,
typography
⢠Moodboards
⢠Tools: sketches, Illustrator, Photoshop, Fireworks,
fluidUI, Flash
Part 6:
⢠Prototyping and testing: iterative, user based, testing
of concepts and ideas with capture and adjustment
⢠Tools: sketches, Illustrator, Photoshop, Fireworks,
fluidUI, Flash, FieldTest, TAP by UnitID, Silverback
Monday, May 6, 13
15. UniversalMindâ˘
Get Creative!
The Gamemaker...
⢠Create a game with whatever is within your reach
⢠Game must have rules
⢠Game must have a winner and loser(s)
⢠It can be a game of skill or chance
⢠12 minutes - solo or with a partner
Monday, May 6, 13
20. UniversalMindâ˘
Mini-Maper
Create an ad-hoc journey map
⢠With a partner, gather the experience getting here
⢠Document their experience
⢠Focus on âseeingâthem
⢠Listen to their âthoughtsâas they move through the details
⢠Capture emotion, be very detailed
⢠10 mins each and switch
Monday, May 6, 13
21. UniversalMindâ˘
What...?
⢠What did you learn from the last exercise?
⢠What common pitfalls?
⢠What common wins?
⢠What opportunities do you see?
⢠Highlight them now and discuss with your partner
⢠10 mins
Monday, May 6, 13
37. UniversalMindâ˘
Ready, Wireframe!
A new travel app
⢠Grab a concept from your journey map
⢠Speak visually to author your idea
⢠Try to leverage design patterns... identify them!
⢠Donât worry about naming, branding, colors
⢠Try to split your concept: mobile and mobile web
⢠20 minutes mobile, 20 minutes mobile web
Monday, May 6, 13
39. UniversalMindâ˘
Category, OUT!
Think of something in the category, or youâre out!
⢠Iâll start with a category ie. animals, cars, cereal, baseball teams
⢠When pointed to, yell out something in the category
⢠If you canât think of one immediately, youâre out
⢠:)
Monday, May 6, 13
57. UniversalMindâ˘
Content eval!
Unwrap your company (or personal) siteâs content
⢠Do a brief content audit of your site
⢠Create a âbirds-eye-viewâof your current content
⢠With mobile in mind, create a âbirds-eye-viewâof mobile
⢠Consider the âcontentâs choreographyâas you design
⢠30-40 minutes
Monday, May 6, 13
63. UniversalMindâ˘
Be Moody!
Collect ideas and paste them to a Moodboard
⢠Collect fonts
⢠Capture images
⢠Grab colors
⢠Pinterest board? :)
⢠30-40 minutes
Monday, May 6, 13
64. UniversalMindâ˘
01 01
02
03
04
05
01
02
03
02
03
04
05
01 02 03
1/4
The first element of the UI is the overall state.
This is the launch page the viewer sees when
first opening the application. It contains a list
of the most recent transactions from their
bank accounts.
The second element of the UI is the hamburger
button, this allows button slides the recent
activity to the right to reveal an off canvas
state. From that state the user updates their
settings to their different accounts.
The third element of the UI is the individual labels.
The user can see where they made a transaction,
the date it happened, and the amount involved
in the transaction.
This leads me to the forth element of the UI which
is the carrot. When the user taps the carrot
they are brought to a new page where they can
see specific details about the transaction
they selected.
The fifth element of the UI is the tab controller.
This bar is fixed at the bottom of the state to
allow the user to navigate quickly between the
major functions of the application.
This function of the application is where the user
manages their bills. When the second option
is selected from the tab controller, the user is
brought here. From here they can see a list
of their upcoming bills. The first element is
general information about upcoming bills. It
gives the name of the bill due and the status
of the bill. Although not displayed correctly in
this wireframe, the place of the item in the list
would update depending on when the bill is
due. I.E. The bills that are due soonest will be at
the top of the list.
The second item of the UI is an updating
countdown until the bill is due. This allows
the user to easily see how much time until the
payment of a bill is due.
The thrid element is a carrot. This carrot brings
the user to a new state where then can then
either pay the bill, see information on the users
synced with that account, and see a detailed
page about the bill.
HIGH-FIDELITY
WIRE FRAMES
States Explanations Gotham
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
1234567890,.!?ââ
Helvetica
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
I S A A C D A N I E L S /
MOODBOARD
A P P L I C AT I O N
R E N D E R I N G S
ISAAC DANIELS
INTERACTIVE MEDIA
ERIK LOEHFELM
WEDNESDAY, APRIL 3RD, 2013
+ =
Monday, May 6, 13
67. UniversalMindâ˘
Test your ideas!
Create a project in FluidUI
⢠Start a wireframe experiment in FluidUI
⢠Add interactive links
⢠Add images and hotspots
⢠45 minutes
Monday, May 6, 13
69. UniversalMindâ˘
Go Ape Sh!t.
Create a user test in Silverback
⢠Try loading up the FluidUI prototype in Silverback
⢠Record someone using your application
⢠15 minutes
Monday, May 6, 13
70. UniversalMindâ˘
What...?
⢠What did you learn from watching people with your idea?
⢠What common pitfalls did they stumble upon?
⢠What common wins?
⢠What opportunities do you see to improve your concept?
⢠Highlight them now and discuss with your partner
⢠5 mins
Monday, May 6, 13
72. UniversalMindâ˘
you practiced...
⢠User-Centered design theory!
⢠Being a design thinker!
⢠Communicating visually!
⢠Focusing on human-values!
⢠Process in a design workflow!
⢠âDoingâover âcontemplatingâ!
⢠Ad-hoc collaboration!
Monday, May 6, 13