Prakash & JZ Q2 2014

UX/UI TOP TEN BEST PRACTICES Collaborating with engineering

| Page 3

STEREOTYPE? ASSUMPTIONS?

Lean start up UX

| Page 5

OP CLIENT PERSONAS Design is not arbitrary Reuse this link in your presentations

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).”

| 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

DESIGN

| Page 9

JONATHAN | SKEWMETRIC VERSUS FLAT •  Sharp corners •  No drop shadows •  Images are full-

width •  Lots of white

space

| Page 10

STYLE GUIDE, SNEAK PEAK Inspect Content/Commerce

TABLES / UX OP

Rows have grey background. Paddng = 10 px

UI

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?

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?)

| Page 14

PRAKASH | USER INTERFACE Paper •  Animate switching

between views •  Accelerometer

Capptivate animation library

| Page 15

TOM | USER INTERFACE Google •  Google Now

personalization •  Material Design

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.

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?

| Page 19

USER INTERFACE TRANSITIONS For Content/Commerce Nets Dan Silver's code

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?

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

Building time for UI review into sprints | Feedback

•  Pros and Cons?

•  Constructive suggestions for improvement?