1. The document provides best practices and recommendations for UX/UI design. It discusses minimizing text, ensuring usability on mobile and different screens, using animation judiciously, making actions emotional and gamifying flows. 2. It also covers growth hacking by encouraging virality through referrals and sharing, iterating through user research and testing, and ensuring collaboration between designers and engineers. 3. Comments discuss building time for UI review into sprints to avoid issues and ensure UX functionality is considered. Feedback is welcomed on how to improve planning and collaboration.

1. Prakash & JZ
Q2 2014
UX/UI
TOP TEN BEST PRACTICES
Collaborating with engineering

2. | Page 3
STEREOTYPE?
ASSUMPTIONS?

3. Lean start up
UX

4. | Page 5
OP CLIENT
PERSONAS
Design is not
arbitrary
Reuse this link in
your presentations

5. UX RESEARCH
• 5 users
• “I am not testing you. I am testing the app”
• One sprint, with iteration, and sign off
(2:46 tabs, 26:42 percentages).​
”Evan validated exports tab, date selector, KPIs,
designy icons!
Renaming the tabs as "summary" and "details" is
an important usability improvement, though.
Then, a nice to have is the percentage (%) each
UGC contributed to totals. Ex., our personas
wants to say a soccer cleat contributed 25% to
total conversion (not just $5,387 to $23,239).”

6. | Page 7
JIRA TICKET
LABELS
Good morning all!
Have a few updates to JIRA designed to (1)
reduce churn and rework on features that
include design or UX related work after it's
been released to our QA environment and
(2) help our product have a cohesive and
unified design and user flow.
Moving forward we are flagging tickets when
they have design or UI/UX implications -
using the JIRA labels "Design" and "ui_ux",
respectively. Below are screenshot
examples of both.
For our workflow, we'll need to do 2 things:
• When a ticket has either of these labels
assigned to it, it should be reviewed by
JZ before it goes into our QA
environment. This review will ensure any
new or changed features are leveraging
designs and user flows that are consistent
with the Style Guide that JZ is developing
for our platform.
• If new tickets are created by Product, QA
or Dev Teams, these labels should be
added when the ticket includes the
following scope (when in doubt, ask JZ):
• "Design" - work involves new or changed
design treatments. Things like font styles/
sizes/colors, button colors, tables styles, etc.
• "ui_ux" - new client flows through the
dashboard/builders or new user
flows through the campaign front end

7. DESIGN

8. | Page 9
JONATHAN |
SKEWMETRIC
VERSUS FLAT
• Sharp corners
• No drop shadows
• Images are full-
width
• Lots of white
space

9. | Page 10
STYLE GUIDE,
SNEAK PEAK
Inspect Content/
Commerce
TABLES / UX OP
Rows have grey background. Paddng = 10 px

10. UI

11. UX TOP TEN [ #1- 3 ]
1. Since users don’t spend time reading, how can you MINIMIZE TEXT?
2. Is FEEDBACK instant (no matter how complex the database calls are)? Remember, people don’t
use products that don’t respond, or confuse them.
3. Is there ONE clear call to action above the fold, landscape and portrait orientation? Is every action
essential? Make the essential ones easy to click
• You have to expect that this is the first time that they have seen it, they will only spend 15 seconds. What will
you focus and prioritize?

12. UX TOP TEN [ # 4 ]
4. How does this look on MOBILE, tablet, and desktop; in portrait and landscape?
• If you think a feature must be added on desktop, think again! Kidding, but the bar needs to be really really high.
Or the whole app need to be rethought.
• Remember, mouseovers do not work on mobile. Design mobile-first.
• Does something great happen when people swipe? Can they still get to the same function if they don’t swipe?
• Since the future of mobile has not been invented yet, are you taking advantage of the phone’s sensors (multi-
touch input from one or more simultaneous gestures, digital compass, gyroscope, audio, dual cameras,
bluetooth, proximity, etc. -- Luke Wroblewski)?
• Can you delight the user by anticipating their needs (for example, Google maps alerts you of flight delays,
when it sees that you are at the airport?)

13. | Page 14
PRAKASH | USER
INTERFACE
Paper
• Animate switching
between views
• Accelerometer
Capptivate
animation library

14. | Page 15
TOM |
USER INTERFACE
Google
• Google Now
personalization
• Material Design

15. XT | Image carousel technical directions
Type of
image carousel
Mobile responsive
user feedback
Desktop user
feedback
Limitations
1 Full width image O O O O O Scroll bar Doesn’t show user multiple products
2 + images in a
thumbnail slider
← → Scroll bar Arrow buttons look like older design if they
are persistent. If they appear on hover,
they confuse the user.
FEATURES:
Animate on load,
loop images
← → Scroll bar If the carousel loops [after the last image, it
shows the first image], the user is
confused whether they are seeing new
products or repeated products.

17. UX TOP 10 [ # 5 – 7 ]
5. If the human eye is trained to attend to things that move or change (whereas static content often goes
unnoticed), how can we use ANIMATION (judiciously)?
6. How are actions that the user can take EMOTIONAL, and how do they make the user happier?
• Does the CTA create a desire engine (trigger, action, reward, commitment, and again). Simply, does the action make
the user smile?
• How can you gamify the flow? What kind of progress bars, badges, points, levels, challenges, unlocks, and
incentives, can you offer to make the user a winner, at each stage of engagement?
7. How would the user’s experience improve with GROWTH HACKING, for example if their friends
joined and created a network effect?
• Virality Equation: if XYZ >1, then you have exponential growth, where 1 user begets more than another user...
o X = % users who invite other people
o Y = average # people they invite
o Z = # accept
• What exists to encourage the first user to involve their friends, and create virality? Ie. do joint goals for referral
programs motivate user number one?
• Is that encouragement early in the interaction funnel/flow? Is sharing at the beginning of the flow, and is sharing early
and often?

18. | Page 19
USER INTERFACE
TRANSITIONS
For Content/
Commerce
Nets
Dan Silver's code

19. UX TOP 10 [ # 8 - 10, PROCESS ]
8. UX PROCESS: Always know what consumer PAIN POINTS are you solving for. How do your
solutions disrupt the market, or help users more than existing solutions?
9. UX PROCESS: Always iterate and validate, through qualitative research or A/B testing.
10. UX PROCESS: What can COLLABORATION between designers and engineers look like?

20. Andy | Building time for UI review into sprints
Can’t
“Technically, this does not work with our current architecture. Or can not be combined with other, more
important, UX functionality.”
• Team Lead, Product Manager, & UX Lead decide if another sprint should be spent researching and
implementing desired UX functionality.
Overlook
“I didn’t notice that white space was important.”
• Devs are responsible for making their commitments, and asking spec questions early on.
• Specs: Balsamiq sketches take on default or existing styles.
• Colorful pixel perfect comps: Code new styles.
Planning Phase
“I don’t like how much white space we are using between headings and rows”
• How can we invite developers to participate in initial design sessions? Scrum? Printed calendar?
Reminder: Use Jira ticket labels

21. Building time for UI review into sprints | Feedback
• Pros and Cons?
• Constructive suggestions for improvement?