These are the materials of a full-day workshop for a Fortune 500 company. It explores the best practices for mobile design, sprint-teams, and considerations to make when designing for omni-channel.
8. Mobile
Best
Practices
What is driving this shift?
Less ScarcityImpulse Factor Social ProofLean Logistics
Risk-free Purchasing Hardware Tech Software Tech Wider Access
12. Mobile
Best
Practices
Mobile
Best
Practices
What are the challenges?
Too many product, need to
categorize and sort for the user
to browse through
Volume of content
If a user knows what he/she
wants, make it available for
the user immediately
Quick Accessibility
13. Mobile
Best
Practices
Mobile
Best
Practices
Navigation
General best practices
Limit the layers of navigation
• Mobile users aren’t known for their patience so you need to limit the
number of interactions before they get to the product options.
Limit the number of menu options on each page
• Even Amazon, with its wealth of product options, only gives six categories
on its homepage.
• Another report published in The Journal of Personality and Social
Psychology suggests that people tend to get confused when presented
with more than six options.
Obey the 44x44 rule
• Give each interactive element ample spacing
Make it native
• Utilize UI transitions and efficiency
14. Mobile
Best
Practices
Mobile
Best
Practices
Navigation: Best practices on iOS
A hierarchal navigation structure
Navigate by making one choice per screen
• In a hierarchical app, users navigate by making one choice per screen until they reach
their destination. To navigate to another destination, users must retrace some of their
steps—or start over from the beginning—and make different choices.
15. Mobile
Best
Practices
Mobile
Best
Practices
Navigation: Best practices on Android
A navigational drawer
Navigate by swiping from the left edge
• The user can bring the navigation drawer onto the screen by swiping from the left edge
of the screen or by touching the application icon on the action bar.
16. Mobile
Best
Practices
Mobile
Best
Practices
Navigation and browsing
In-depth look
Offer thematic or guided product browsing
• Customers that need inspiration before deciding which types of products to buy. For
example, Summer pants or Birthday Gifts for 10 year olds.
Design an easily scannable homepage that enable users to get a feel
for what they can do and expect to find at your site.
• 80% of users scroll up and down through the entire page when they land on a
homepage or a category list, in what was described by most as "getting an
• overview of my options”.
Avoid sub-category redundancy and ambiguity.
• More specifically, avoid too deep and too shallow categories, illogical hierarchies, and
mismatches between categories and their content.
17. Mobile
Best
Practices
Mobile
Best
Practices
Navigation and browsing
In-depth look
Offer thematic or guided product browsing
• Customers that need inspiration before deciding which types of products to buy. For
example, Summer pants or Birthday Gifts for 10 year olds.
Design an easily scannable homepage that enable users to get a feel
for what they can do and expect to find at your site.
• 80% of users scroll up and down through the entire page when they land on a
homepage or a category list, in what was described by most as "getting an
• overview of my options”.
Avoid sub-category redundancy and ambiguity.
• More specifically, avoid too deep and too shallow categories, illogical hierarchies, and
mismatches between categories and their content.
18. Mobile
Best
Practices
Mobile
Best
Practices
Design an easily scannable
homepage that enable users to
get a feel for what they can do
and expect to find at your site.
• Confusing eye-path
• Highly graphical
• Visual clutter
• Too many CTAs
• No effective hierarchy
Navigation and browsing
In-depth look
20. Mobile
Best
Practices
Mobile
Best
Practices
Search
Best Practices
Mobile is highly local (40% according to Google), focused and timely.
• Four out of five people use their smartphone to look up local information.
Have search handle mis-spellings and, more importantly, synonyms.
• Users have little knowledge of industry-specific jargon and keywords.
• A more systematic and automated approach would be to do machine dictionary lookups of
synonyms and add them as fallback (lower weighted) keywords in your search logic.
Handle thematic search queries intelligently preferably
• with matching product results or at least with links to matching thematic category lists.
• Apparel search is often difficult to use as product titles are rarely descriptive but instead use the
product model name. So unless the user knows the exact model name of the clothing item they
want, it will be difficult to get a list of relevant search results.
21. Mobile
Best
Practices
Mobile
Best
Practices
Search: In-store behavior
Best practices
Neiman Marcus
• This app provides customers with the ability to personalize
the in-store shopping 'experience' by bookmarking certain
items, and connecting with sales staff.
Meatpack: Hijack
• It used GPS technology to detect users of its app when
they were in competitor stores, before sending them a
message with a discount. The discount amount acted as
timer as well, so the customer had to run to the store.
http://vimeo.com/58411219
Amazon
• To make searching for products even easier, Amazon’s
mobile apps have a barcode scanner that allows users to
immediately find the product details and cost
22. Mobile
Best
Practices
Mobile
Best
Practices
Exploration 1
Try an exercise
Let’s draw something.
Break into teams of three and spend 15 minutes on one of the following:
• How do you organize a pantry?
• How do you sort your laundry?
• How would you find a good Thai restaurant without the internet?
24. Mobile
Best
Practices
Mobile
Best
Practices
Exploration 2
Try an exercise
Let’s draw a comic strip.
Break into new teams of three and spend 15 minutes drawing a comic strip.
You are limited to presenting just THREE panels.
• Describe how Health Care Reform works
• The story of Romeo and Juliet
• How to fly a plane
26. Mobile
Best
Practices
Mobile
Best
Practices
1. Develop an aesthetic integrity
• Aesthetic integrity doesn’t measure the beauty of an app’s
artwork or characterize its style; rather, it represents how
well an app’s appearance and behavior integrates with its
function to send a coherent message.
• It's a measure of how well the appearance of your
application integrates with its function.
Content Design: Best practices
Aesthetic Integrity
27. Mobile
Best
Practices
Mobile
Best
Practices
2. Create concise and contextual content
• Always keep in mind that the content for Mobile has a different
context, the approach needs to be tailored for this particular
medium.
• Describe only what the user needs to know.
• Eliminate redundancy, such as titles that restate the body of
an information box.
• Keep text as short as possible.
Content Design: Best practices
Contextual and Concise
28. Mobile
Best
Practices
Mobile
Best
Practices
3. Focus on visual hierarchy
• Contrast
• Color, creating visual emphasis to create clear
distinctions
• Shape, different shapes have different visual weight
• Size, Bigger elements demand more attention than
smaller ones.
• Continuance
• Lines, a very standard and user-friendly mobile
element is the list
• Similarity, Grouping similar items together tends to
create emphasis and demand attention
• Space, Negative space and the space between
elements not only gives your design room to
breathe, but it can also be used to create
continuance.
Content Design: Best practices
Visual Hierarchy
32. Mobile
Best
Practices
Mobile
Best
Practices
Performance: Best practices
Hardware and data limitations
People expect a faster experience on mobile then they get on
the desktop but the networks connecting them to your service
are naturally slower. As a result, your app ends up fighting
performance on both sides.
In these situations it really pays to be an optimist.
33. Mobile
Best
Practices
Mobile
Best
Practices
Performance: Best practices
Perception of performance
How speed can be a design feature?
• Its part of the core experience, it needs to support the user flow.
Preform actions optimistically
• Have a reactive UI, make the elements respond faster as you interact
at the back. Like Add to Cart buttons. If it fails in the back, then UI can
adjust.
• Amazon new patent for shipping methods.
Adaptively pre-load content
• Listen to what Users the user is interested and preload that particular
element instead of all doing it to all the content at once
Move bits when no-one’s watching
• When you can anticipate better, you can take contents from step 1
and start utilizing data by the time your on step 3. In example, how
Instagram uploads images.
34. Mobile
Best
Practices
Mobile
Best
Practices
Exploration 3
Try an exercise
Redesign a situation to appear faster
Break into new teams of three and spend 20 minutes designing an experience to appear faster.
It can be written, drawn, acted out, or described.
• Baggage claim
• Waiting in line
• Growing a garden
• Elevator ride
• Make one up!
Exploration 3
Try an exercise
37. Mobile
Best
Practices
Team Structure
Forming Stage
Gathering information and impressions
This stage is about feeling out who else is involved, the scope of the
task, and how to approach it. Typically void of conflict as opinions are
still positioned as ‘discussion points’ for later.
Opportunities
• Develop an understanding of each person’s/role’s objectives
• Find common interests and make new friends
• See how each team member works and functions
• Ability to build mutual respect between roles
Challenges
• Little tends to get done at this point due to conflict avoidance
• Desire for acceptance/romance of the idea can over-simplify things
• Team members can create independent activities/opinions that can
work against the bigger picture if
• Team members tend to be focussed on themselves
Comments - phrased by ‘we’ and ‘maybe’
- “I do my part. I hope you do yours.”
- “We have no differences.”
38. Mobile
Best
Practices
Team Structure
Storming Stage
Different ideas, competing for consideration
This stage can be emotional as team members begin to cross
paths on ideas, perspectives, and ways to go about solving the
problem. It can be upsetting and driven by pride.
Opportunities
• Communicate opinion-agnostic goals of the project
• Develop an understanding of each person’s/role’s objectives
• Analyze logic and reasoning to identify commonalities
• Look at the problem with a wider perspective to limit group think
• Create a safe place to share opinions and views
• Tension and struggle is ok if there is impartial adjudication
• Ability to build mutual respect between roles
Challenges
• Cliques and ‘sides’ can form, creating fragmentation in the group
• Can be contentious, emotional, upsetting, and frustrating
• Tendency to focus on minutiae
• Tolerance and patience is a must
Comments - direct and disagreeable
- “I’m doing my part. Why aren’t you doing yours?”
- “I hate your differences.”
39. Mobile
Best
Practices
Team Structure
Norming Stage
A mutual plan is needed for the team
This stage is about finding a way to build a mutual plan that
everyone can work toward. It will involve some give and take from
all members in order to function.
Opportunities
• Develop empathy and mutual ownership
• Maintain a forum of open and accepted discussion
• Paint a picture of what success looks like
• Have an open debate structure around divisive issues
Challenges
• Some may not wish to give up on their ideas
• Pride/authority may create unhealthy hierarchy
• Reluctance to share controversial ideas
• Loss of confidence or trust in themselves or each other
Comments - getting help to get stuff done
- “We are doing the work. Thanks for the help.”
- “We work through our differences.”
40. Mobile
Best
Practices
Team Structure
Performing Stage
Different ideas, competing for consideration
This stage sees team members as motivated, knowledgable, and
competent to function autonomously. Dissent is still expected, but
there is mutual trust and respect to work productively through it.
Opportunities
• Streamline decision making processes
• Open, direct, and honest feedback loops
• Develop higher levels of skill and mastery
• Less ongoing management or supervision
• Higher quality output
• Mutual trust and respect for future endeavors
• Tendency for members to supplement each other’s weaknesses
Challenges
• Changes in team members will revert back to forming stage
• Management trying to always control the Group Development
• Insecurity in the form of “Impostor Syndrome”
• Personal vulnerabilities and issues
Comments - about the work and getting it done.
- “We are awesome. Let’s do more stuff!”
- “Our differences make us stronger.”
42. Mobile
Best
Practices
Forming Storming
Performing Norming
Team Structure
Review: Storming
• High degree of guidance
needed from manager
• Individual roles are unclear
• Process not well established
• Understanding how team
decisions are made
• Purpose is clear, but team
relationships are blurry
Forming Storming
43. Mobile
Best
Practices
Forming Storming
Performing Norming
Team Structure
Review: Norming
• High degree of guidance
needed from manager
• Individual roles are unclear
• Process not well established
• Understanding how team
decisions are made
• Purpose is clear, but team
relationships are blurry
• Relationships are well
understood in the team
• Commitment to team goals
• Begins to work to optimize
team process
Forming Storming
Norming
44. Mobile
Best
Practices
Team Structure
Review: Performing
• High degree of guidance
needed from manager
• Individual roles are unclear
• Process not well established
• Understanding how team
decisions are made
• Purpose is clear, but team
relationships are blurry
• Team is committed to
performing well
• Focuses on being strategic
• Team runs well with
little oversight
• Relationships are well
understood in the team
• Commitment to team goals
• Begins to work to optimize
team process
Forming Storming
Performing Norming
46. Mobile
Best
Practices
Team Structure
Who is a performing design team made up of?
Skill-set
• Front-end/native development knowledge
• Knows how interactions and interfaces relate to the technology
Motivation
Has a deep interest for content interactions, color, typography, layouts,
and the finer visual and textual details of an experience.
Most likely to find resonance with
• UX Designers
• Product Managers
UI Designer
47. Mobile
Best
Practices
Skill-set
• Some dev and UI design experience
• Knows how interactions and interfaces work together as an experience
Motivation
Has a deep interest in how people act, think, and make decisions in
order to design an intuitive and positively usable experience.
Most likely to find resonance with
• Product Managers
• Domain Experts
• UI Designers
Team Structure
Who is a performing design team made up of?
UX Designer
48. Mobile
Best
Practices
Skill-set
• Wide proficiency in the full-stack of mobile development technologies
• Experience or appreciation for UI/UX design
• An ability to think iteratively and in the realm of prototyping
Motivation
Has a deep interest for technical details, data relationships, data logic,
and understanding how various technologies inter-relate.
Most likely to find resonance with
• UX Designers
• Product Managers
Team Structure
Who is a performing design team made up of?
Full Stack Engineer
49. Mobile
Best
Practices
Skill-set
• An experienced ex-engineer or ex-designer now leading strategic product vision
Motivation
Has a deep interest for a smooth user experience that meets all objectives, and
provides both qualitative and quantitive insight for future product strategy.
Most likely to find resonance with
• UX Designers
• Domain Experts
Team Structure
Who is a performing design team made up of?
Product Manager
50. Mobile
Best
Practices
Team Structure
Who is a performing design team made up of?
Skill-set
• Deep field experience and knowledge of the operating space
• Experience in software UI/UX design
Motivation
Has a deep understanding of how the work relates back to operational,
and what it would take to gain success within the organization.
Most likely to align with
• Product Manager
• UX Designer
Domain Expert
52. Mobile
Best
Practices
Team Structure
The process of a performing design team
Teams thrive on shared culture and values
• Embrace the form and storm period
• Clearly define individual roles
• Establish interpersonal relationships
• Define the project boundaries
Form Properly Take Ownership Clear Direction Communicate
Things to help form properly
Learn more about your personality
and of those on your team
Build a culture of appreciation,
feedback, recognition, and support
Go on a retreat or day trip to get
to know your team mates in a
friendly environment
Do an empathy mapping workshop
on an unrelated topic to build a
group culture
53. Mobile
Best
Practices
Team Structure
The process of a performing design team
Cross-functional teams take ownership
• Define success as a team
• Define success as an individual
• Individuals and the team are responsible
for the end product
• Identify team goals and deliverables
• Establish an inclusive decision process
Form Properly Take Ownership Clear Direction Communicate
Things to help take ownership
Build a team profile and identify what
is missing / could be stronger
Establish the rules of your culture and
organize how they will be measured
Split test designs and validate with
users to reduce subjective debate
Elect a vocal dissenter (and anyone)
for a specific design task and have
them conduct a Lunch & Learn
54. Mobile
Best
Practices
Team Structure
The process of a performing design team
Everyone stays up-to-date in real time
• Have individual articulate how they will contribute
• Help each other identify strengths/weaknesses
in order to fill gaps
• Create clear deadlines, milestones and events
• Scoping Documentation may be required
Form Properly Take Ownership Clear Direction Communicate
Things to help clear direction
Simple task oriented project
management may help with focus
Simplify daily stand-ups into ongoing
streams of communication
Have a meeting-free day for
undisturbed design sprints
Do a problem/statement matrix to
reframe the problem and provide a
fresh perspective
55. Mobile
Best
Practices
Team Structure
The process of a performing design team
Everyone stays up-to-date in real time
• Create a communication hierarchy
• Keep meetings/stand-ups to a strict schedule
• Work side-by-side where and when possible
• Avoid side conversations so no one-person has
to manually give context to the team
• Read a daily digest of progress on busy days
• Establish an adjudication process
Form Properly Take Ownership Clear Direction Communicate
Things to help communicate
Create functional prototypes and
collect/track design feedback
Gather detailed user behavior insights
in the form of video and tracked
feedback to share amongst the team
Use a collaborative platform to
share discussions, research, and
real-time updates of project work
Phone = immediate
IM = within the hour
Email = by tomorrow
Campfire = no reply needed
56. Exercise
Empathy Mapping a user experience
Time
10 mins
Materials
Easel pad, Sharpies, different colored post-it notes
How To
1. On a large easel pad, draw the base empathy
map with four quadrants: 1. Say; 2. Do; 3. Think;
4. Feel.
2. Notice that “say” and “do” are very explicit and
“think” and “feel” are implicit.
3. Consider a specific user’s experience and walk
the map, writing down on sticky notes what the
user said, did, felt, or thought.
4. Use another color for another user’s experience.
5. Once populated, step back and reflect on the
content. Look for patterns and inconsistencies.
What’s at the heart of this experience? Write
down these observations and insights.
6. From your discussion, write “Ways of…”
statements that can seed a brainstorm of ideas.
57. Mobile
Best
Practices
“Not finance. Not strategy. Not technology.
It is teamwork that remains the ultimate competitive
advantage, both because it is so powerful and so rare.”
Patrick Lencioni
59. iOS7 Overview: Focus
Content is brought to the foreground.
Maximize the user experience by
applying iOS 7’s three core
design principles
60. Mobile
Best
Practices
iOS7 Overview: New features
Airdrop
Flat design language 1500 New APIs Enhanced Multi-tasking
Physics EngineiCloud Keychain
iBeacons
Automatic App Updates
61. Mobile
Best
Practices
iOS7 Principles: Deference
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
Deference
The UI helps users understand and interact
with the content, but never competes with it.
62. Mobile
Best
Practices
iOS7 Principles: Clarity
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
Clarity
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate.
A sharpened focus on functionality
motivates the design.
65. Mobile
Best
Practices
Tigerspike Key Considerations: Overview
Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90
The new flat aesthetic
Tinting, not textures
Dynamic typography
Full bleed interfaces
Hierarchy conveyed through depth
Physics engine
Enhanced multi-tasking
1500 new APIs to use
New Safari is omni-channel friendly
66. Mobile
Best
Practices
Key Consideration: iOS6 Support
Does your app need to support iOS 6?
iOS users tend to be very quick to update
their devices and expect their favorite apps
to follow suit.
76. Mobile
Best
Practices
Where to start
Get
iOS7
Ready
Compile and test your iOS 6 app(s) on iOS 7 ASAP
Get a point release ready with updated iOS 7 UI components
(and any bugs fixed) for when the update arrives
Begin work on your next major release re-imaging your
experience to take full advantage of the OS
Don’t boil the ocean—release, iterate & release.