1. A Talk
Dec 20, 2012
Wolfgang Maehr (@njyo)

2. The Choice is Yours
A. The difference between UX and Interface
Design
A rant and academic excursion on the domains of what we do
and why we need to educate more…
B. Dr. Flowlove or: How I Learned to Stop
Worrying and Love to Zoom
A look at wireframes, flow and how tools and mindsets shape
our work…

3. Don't be a wimp,
decide!

4. Know your users.

5. The Choice is Yours
A. The difference between UX and UI Design
A rant and academic excursion on the domains of what we do
and why we need to educate more…
B. Dr. Flowlove or: How I Learned to Stop
Worrying and Love to Zoom
A look at wireframes, flow and how tools and mindsets shape
our work…

6. UX vs. UI

7. “I am looking for a UI/UX.”

8. f

9. UI
"… the space where interaction
between humans and machines
occurs."
http://en.wikipedia.org/wiki/User_interface

10. UX
"… a momentary, primarily
evaluative feeling while
interacting with a product or
service."
Marc Hassenzahl: User Experience (UX):
Towards an Experiential Perspective on Product Quality

11. UX Model
System
UI
Action
Prior Experiences User More Experiences
Prior Expectations Experience Modified Expectations
Motivation
User
Context
Based on Anu Kankainen. Thinking Model and Tools for Understanding User
Experience Related to Information Appliance Product Concepts.

12. Activities Affecting UX
– Product strategy – Information Architecture
– Business and product plan – Usability
– Field research – Prototyping
– Face to face interviewing – Interface layout
– Creation and administering of – Interface design
tests – Visual design
– Gathering, organizing, and – Taxonomy creation
presenting statistics – Terminology creation
– Documentation of personas and – Copy writing
findings
– Presentation and speaking
– Product design
– Working tightly with
– Feature writing programmers
– Requirement writing – Brainstorm coordination
– Graphic arts – Company culture evangelism
– Interaction design – Communication to stakeholders
Eric Flowers: UX is not UI

13. What They Want
– Product strategy – Information Architecture
– Business and product plan – Usability
– Field research – Prototyping
– Face to face interviewing – Interface layout
– Creation and administering of – Interface design
tests – Visual design
– Gathering, organizing, and – Taxonomy creation
presenting statistics – Terminology creation
– Documentation of personas and – Copy writing
findings
– Presentation and speaking
– Product design
– Working tightly with
– Feature writing programmers
– Requirement writing – Brainstorm coordination
– Graphic arts – Company culture evangelism
– Interaction design – Communication to stakeholders
Eric Flowers: UX is not UI

14. Who Does UX Design?
– Product Management
– Engineering
– Sales and Marketing
– Support and Customer Service
– Etc.
– Everybody affects the UX
Eric Flowers: UX is not UI

15. You only do UX Design if you are
in a position where you can throw
out features and change the
product.

16. Otherwise you do
communication design…
…that's far from UX and often just
putting lipstick on a pig

17. D

18. Dr. Flowlove

19. My Old Process
…
m. Create a Navigation Map
To figure out how a user navigates through the app/site.
n. Hand-sketch various ideas
o. Make Wireframes per screen/page
To lay out the information and define how things work on the
page.
…

20. O1: Login Overlay
Progress Feedback
Overlay
LA1: Home Page CL1: Clip Listing Page CD1: Clip Detail Page UA1: User Account Page
(spuul.com) (spuul.com/popular) (spuul.com/watch?clip=xyz) (spuul.com/account)
LA2: logged in (free) CD2: resume
LA3: logged in (premium) SR1: Search Result Page CD3: play clip
(spuul.com/search)
LA2a/LA3a: first login CD4: play trailer
CD5: special clip page
O2: Registration Overlay
Progress Feedback
Overlay
O3: Special Payment
Overlay
ER1: Error 404 Page Progress Feedback
(spuul.com/404) Overlay
FA1: F.A.Q. Page
(spuul.com/faq)
AC1: About & Contact Page
(spuul.com/about)
TC1: Terms & Conditions Page
(spuul.com/tnc)

21. LA3a: First Landing (prem) Confidential Spuul Wireframes v.0.1 by Extra Thought
1 2 3 4 5
1 2 3 4 5
… …
1 2
…

22. r

23. That’s Information Architecture…
not Interaction Design!

24. Enter Jakub Linowski
Interactive Sketching Notation

25. Jakub Linowski: Large Canvas Flows + With References

26. Idea
1. Start with placeholder boxes for each screen (at
100% size)
2. Start with a rough outline and flow diagram
from a eagle-eye perspective
3. Each screen has certain variations right next to
it
4. Add more detail on each iteration

27. Use Case: User browses for a suitable
1 RFQ to apply for.
1 user accesses the site Landing Page is displayed
user browses the RFQs and
RFQ details are displayed u
selects one
a) finds a suitable RFQ and applies
b) finds nothing suitable and closes the ⁃ entering mybusiness.singtel.com/trading- - by tags
site board - by search
c) finds something interesting and ⁃ accessing a bookmark - by listing
bookmarks it (notification)
Use Case: User posts an RFQ user accesses an RFQ on the site
2
⁃ searching for an RFQ
⁃ being sent over from a partner site
Use Case: User rates a transaction as
3 the response to a mail.
⁃ following the link on an email
Use Case: User signs up to get to see
4 RFQs.
2 user accesses the site Landing Page is displayed user clicks on post RFQ
user is redirected to
correct partner site
Use Case: User browses for BOs to
5 order. ⁃ entering mybusiness.singtel.com/trading-
board
⁃ accessing a bookmark
3 RFQ transaction is supplier marks the transaction email to customer to customer accesses RFQ and
User A: Owner of a small enterprise completed closed and rates it rate transaction rates transaction
A (supplier) specialising on providing a
simple service, for example indoor ⁃ entering mybusiness.singtel.com/trading-
board
painting. etc.
⁃ accessing a bookmark
Not too comfortable with using the
internet, but does it because has to. Has
an email account on yahoo.
User B: Employee at a larger enterprise 4 Landing or RFQ Page is use
B taking care of the sales process and user accesses the site user clicks to sign up Signup Popup is displayed
displayed
management. Specialising on providing a
simple service, for supplying of snacks ⁃ entering mybusiness.singtel.com/trading-
and beverages. board
Comfortable using the internet; has an ⁃ accessing a link provided somewhere else
email account with the company to be
used for all work.
User C: Employee at a partner enterprise
C (e.g. DBS) that posts requirements but 5 user accesses the site->TODO
also may bid for RFQs sometimes.
Managing certain amount of other users
⁃ entering mybusiness.singtel.com/trading-
as well.
board
Very comfortable using the internet; has
⁃ accessing a link provided somewhere else
an email account with the company to be
used for all work.
User D: Employee at Sesami/SingTel
D
RFQ is closing in 7 and 1 reminder emails to:
days supplier with bookmark
confirmation to applied
event trigger RFQ closes suppliers and
bookmarks
user action
archive RFQ
page displayed customer selects supplier confirmation email to
for RFQ successful suppliers
action performed by
system confirmation emails to
unsuccessful suppliers
update Sesami to
reflect the selection

28. Home Page (logged in) RFQ Listing Page RFQ Detail Page
Use Case: User browses for a suitable Most relevant RFQs: ⁃ all most recent RFQs ⁃ full details of the RFQ User submits bid:
1 RFQ to apply for.
1 SingTel
Most Relevant RFQs
Header
add new Search
Logout
Items Requiring Attention
- based on tag/category
SingTel Header Logout
shown by default
SingTel Header Logout
⁃ target of any shared link - send appropriate emails
- new/unseen RFQs All RFQs only relevant Search Items Requiring Attention
⁃ filter by: logo Items Requiring Attention
⁃ actions: apply, full details, - register the FRQ to be bid
a) finds a suitable RFQ and applies logo logo
- soon ending RFQs
logo
- search
logo
bookmark, share, report Partner Site: Specific Page for (counter on RFQ,
logo
b) finds nothing suitable and closes the logo
logo
logo logo
- tags
logo
- display related RFQs bidder history, etc.)
site
logo logo
logo
logo Items Requiring Attention: logo - categories User completed the bidding process for the FRQ on the customer site.
logo logo
c) finds something interesting and logo - Transactions that need logo
- relevant RFQs (tags, etc.) After the transaction is complete, the user gets to rate the transaction.
Bookmarks
rating Bookmarks Bookmarks
bookmarks it (notification) logo logo
logo
- RFQs that need a bidder logo logo logo
to be selected
see all logo logo
logo
logo
Most Recent BOs add new Search
logo
- …can be expanded later logo
logo logo
logo logo
Use Case: User posts an RFQ image image image image logo
2
logo
Bookmarks: logo logo
- RFQs and BOs that were logo Similar Open RFQs
logo
bookmarked logo
SGD 200 SGD 200 SGD 200 SGD 200
logo
logo
Use Case: User rates a transaction as see all
3
logo
logo
the response to a mail.
Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More
logo
logo
Use Case: User signs up to get to see
4 RFQs.
Expanded View of an RFQ
logo ⁃ essential details of the RFQ
Use Case: User browses for BOs to Closed RFQ with Ratings
5 order.
logo -
-
button unfolds and stays unfolded
title opens RFQ Detail Page - transaction rating, once it's available
- actions: apply, full details, bookmark,
share, report Transaction Rating
logo
logo - display rating (if available) - TODO
logo
Similar Open RFQs
logo
Landing Page (not logged in) RFQ Listing Page (not logged in)
User A: Owner of a small enterprise ⁃ sales pitch and ⁃ small signup banner
A SingTel Header SingTel Header
Login Login
explanation at the top remains on top with call to Closed RFQ Pending Rating
(supplier) specialising on providing a Opportunities
⁃ call to action: signup Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup
action - request to rate transaction if not yet
simple service, for example indoor - right panel has more sales All RFQs only relevant Search ⁃ right panel explains benefit
SingTel Header
rated
Logout
painting. etc. how this works pitch of signup (bookmarks): Please rate the transaction: Items Requiring Attention
Not too comfortable with using the logo sales pitch and logos public comment
logo
logo
internet, but does it because has to. Has logo
Our Strategic Partners
private comment logo
an email account on yahoo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup
logo partner logo
save
logo
Our Strategic Partners PROCESSING
Most Recent RFQs Search
logo logo Bookmarks
logo logo
logo
User B: Employee at a larger enterprise partner logo partner logo
B logo logo
taking care of the sales process and logo
logo expand logo
management. Specialising on providing a logo Transaction Rating logo
logo partner logo
logo logo
simple service, for supplying of snacks logo
logo transaction rating pending
and beverages. see all
logo Similar Open RFQs
Comfortable using the internet; has an Most Recent BOs Search What Are Bulk Offers?
logo
logo
email account with the company to be logo
logo
image image image image
used for all work. logo
RFQ Detail for Partner
logo
- display all suppliers that have
logo
how BOs works submitted a bid
User C: Employee at a partner enterprise
C
SGD 200 SGD 200 SGD 200 SGD 200
Suppliers Who Submitted a Bid:
(e.g. DBS) that posts requirements but
see all
logo logo
also may bid for RFQs sometimes. logo
Managing certain amount of other users Similar Open RFQs
logo
as well.
Very comfortable using the internet; has
an email account with the company to be
used for all work.
User D: Employee at Sesami/SingTel
D Home Page (logged in) RFQ Detail Page (own, no bids)
⁃ direct link to the User creates RFQ: ⁃ full details of the RFQ
2 SingTel
Most Relevant RFQs
Header
add new Search
Logout
Items Requiring Attention
appropriate partner portal ⁃ creates RFQ
SingTel Header Logout
- display bidders (count 0 in
logo logo (single login) for - generates confirmation logo close Items Requiring Attention
the beginning)
logo
logo appropriate partners Partner Site: Specific Page mail to author and - display related RFQs
logo logo
logo organisation admin - possibility to mark RFQ
logo
logo
logo User completed the bidding process for the FRQ on the customer site. closed
logo
logo After the transaction is complete, the user gets to rate the transaction.
Bookmarks
Bookmarks
logo logo
logo
see all logo
logo
logo
Most Recent BOs add new Search logo
logo
logo
image image image image logo
logo
Suppliers Who Submitted a Bid:
no bids yet share
SGD 200 SGD 200 SGD 200 SGD 200
Similar Open RFQs
see all logo
Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More
logo
logo
logo
logo
Home Page (logged in) RFQ Detail Page (awarded) RFQ Detail Page (rating pending)
⁃ direct link to the open ⁃ allows user to mark the ⁃ user marks the transaction
3 SingTel
Most Relevant RFQs
Header
add new Search
Logout
Items Requiring Attention
transactions
SingTel Header Logout
transaction as closed
SingTel Header Logout
as closed
- user submits rating for the
AWARDED Items Requiring Attention
logo logo
logo
logo
> transaction is only Please rate the transaction: Items Requiring Attention
logo
logo closed after the rating is public comment transaction
logo logo logo
logo
logo submitted private comment logo
> email is sent to the other
logo
logo
logo reopen save
logo
party
logo PROCESSING
Bookmarks logo
If both parties have rated the
Bookmarks Bookmarks
logo logo
logo logo
see all logo
logo logo
transaction, it is archived
logo > email will be sent to both
Most Recent BOs add new Search logo expand logo
logo
logo logo
parties
Transaction Rating
image image image image logo close
logo logo logo
transaction rating pending
Suppliers Who Submitted a Bid:
logo logo Similar Open RFQs
logo logo
SGD 200 SGD 200 SGD 200 SGD 200
see all Similar Open RFQs
logo
Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More logo logo