mobile best practices
DESCRIPTION
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.TRANSCRIPT
![Page 1: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/1.jpg)
Mobile Design Best Practices with Pauly Ting and Omar JalalzadaWednesday, 22 January 2014
MobileDesign Best Practices
![Page 2: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/2.jpg)
MobileBestPractices
What’s ahead
Introduction
Contextual Background
Exploration 1 - Navigation, Browse and Search
Exploration 2 - Content Design
Exploration 3 - Performance and Delivery
Team Dynamics
![Page 3: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/3.jpg)
MobileBestPractices
What are mobile users exposed to?
![Page 4: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/4.jpg)
MobileBestPractices
What are mobile users exposed to?
Simpler PathsNew Interfaces More InformationMore Control
![Page 5: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/5.jpg)
MobileBestPractices
What are mobile users exposed to?
Clearer InteractionsFeedback Loops More DetailNew Workflows
![Page 6: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/6.jpg)
MobileBestPractices
What are mobile users exposed to?
Multiple Platforms Hand-fed Support
![Page 7: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/7.jpg)
MobileBestPractices
What are mobile users exposed to?
Multiple Options
=
![Page 8: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/8.jpg)
MobileBestPractices
What is driving this shift?
Less ScarcityImpulse Factor Social ProofLean Logistics
Risk-free Purchasing Hardware Tech Software Tech Wider Access
![Page 9: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/9.jpg)
MobileBestPractices
Mobile consumers relate a quality experience to:
Speed of experience
Ease of use / EnjoymentReliability and robustness
Security and trustworthiness
![Page 10: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/10.jpg)
MobileBestPractices
Three Explorations
Exploration 1 - Navigation, Browse and Search
Exploration 2 - Content Design
Exploration 3 - Performance and Delivery
![Page 11: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/11.jpg)
MobileBestPractices
MobileBestPractices
Exploration 1Navigation, Browse and Search
![Page 12: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/12.jpg)
MobileBestPractices
MobileBestPractices
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
![Page 13: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/13.jpg)
MobileBestPractices
MobileBestPractices
NavigationGeneral 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
![Page 14: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/14.jpg)
MobileBestPractices
MobileBestPractices
Navigation: Best practices on iOSA 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.
![Page 15: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/15.jpg)
MobileBestPractices
MobileBestPractices
Navigation: Best practices on AndroidA 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.
![Page 16: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/16.jpg)
MobileBestPractices
MobileBestPractices
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.
![Page 17: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/17.jpg)
MobileBestPractices
MobileBestPractices
Navigation and browsingIn-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 feelfor 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.
![Page 18: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/18.jpg)
MobileBestPractices
MobileBestPractices
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
![Page 19: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/19.jpg)
MobileBestPractices
MobileBestPractices
67% of mobile users utilized search in past week
![Page 20: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/20.jpg)
MobileBestPractices
MobileBestPractices
SearchBest 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.
![Page 21: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/21.jpg)
MobileBestPractices
MobileBestPractices
Search: In-store behaviorBest 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
![Page 22: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/22.jpg)
MobileBestPractices
MobileBestPractices
Exploration 1Try 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?
![Page 23: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/23.jpg)
MobileBestPractices
MobileBestPractices
Exploration 2Content Design
![Page 24: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/24.jpg)
MobileBestPractices
MobileBestPractices
Exploration 2Try 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
![Page 25: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/25.jpg)
MobileBestPractices
MobileBestPractices
Challenges with content design
User can’t consume all information and drop off
Too much to say
Losing hierarchy and clarity
Everything is Important
![Page 26: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/26.jpg)
MobileBestPractices
MobileBestPractices
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 practicesAesthetic Integrity
![Page 27: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/27.jpg)
MobileBestPractices
MobileBestPractices
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 practicesContextual and Concise
![Page 28: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/28.jpg)
MobileBestPractices
MobileBestPractices
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 practicesVisual Hierarchy
![Page 29: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/29.jpg)
MobileBestPractices
MobileBestPractices
Clear CTAs
Concise messaging
Clutter free
Defined hierarchy
Content Design: Study and AnalysisVisual design and content
![Page 30: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/30.jpg)
MobileBestPractices
MobileBestPractices
Exploration 3Performance and Delivery
![Page 31: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/31.jpg)
MobileBestPractices
MobileBestPractices
What are the challenges?
Slow and limited processing power and poor network quality
Network & Device
No feedback, complicated flows and useless links
User Experience
![Page 32: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/32.jpg)
MobileBestPractices
MobileBestPractices
Performance: Best practicesHardware 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.
![Page 33: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/33.jpg)
MobileBestPractices
MobileBestPractices
Performance: Best practicesPerception 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.
![Page 34: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/34.jpg)
MobileBestPractices
MobileBestPractices
Exploration 3Try an exercise
Redesign a situation to appear fasterBreak 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 3Try an exercise
![Page 35: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/35.jpg)
MobileBestPractices
Working TogetherWhy most teams fail (and how you can prevent it)
![Page 36: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/36.jpg)
MobileBestPractices
Team StructureTuckman's Stages of Group Development
![Page 37: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/37.jpg)
MobileBestPractices
Team StructureForming Stage
Gathering information and impressionsThis 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.”
![Page 38: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/38.jpg)
MobileBestPractices
Team StructureStorming Stage
Different ideas, competing for considerationThis 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.”
![Page 39: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/39.jpg)
MobileBestPractices
Team StructureNorming Stage
A mutual plan is needed for the teamThis 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.”
![Page 40: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/40.jpg)
MobileBestPractices
Team StructurePerforming Stage
Different ideas, competing for considerationThis 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.”
![Page 41: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/41.jpg)
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: Forming
• High degree of guidance needed from manager
• Individual roles are unclear
• Process not well established
Forming
![Page 42: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/42.jpg)
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: 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
![Page 43: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/43.jpg)
MobileBestPractices
Forming Storming
Performing Norming
Team StructureReview: 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
![Page 44: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/44.jpg)
MobileBestPractices
Team StructureReview: 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
![Page 45: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/45.jpg)
MobileBestPractices
Team Structure
Who are the members of a performing design team?
![Page 46: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/46.jpg)
MobileBestPractices
Team StructureWho is a performing design team made up of?
Skill-set• Front-end/native development knowledge• Knows how interactions and interfaces relate to the technology
MotivationHas 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
![Page 47: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/47.jpg)
MobileBestPractices
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 StructureWho is a performing design team made up of?
UX Designer
![Page 48: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/48.jpg)
MobileBestPractices
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
MotivationHas 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 StructureWho is a performing design team made up of?
Full Stack Engineer
![Page 49: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/49.jpg)
MobileBestPractices
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 StructureWho is a performing design team made up of?
Product Manager
![Page 50: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/50.jpg)
MobileBestPractices
Team StructureWho 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
![Page 51: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/51.jpg)
MobileBestPractices
Team Structure
What is the process of a performing design team?
![Page 52: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/52.jpg)
MobileBestPractices
Team StructureThe 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
![Page 53: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/53.jpg)
MobileBestPractices
Team StructureThe 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
![Page 54: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/54.jpg)
MobileBestPractices
Team StructureThe 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
![Page 55: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/55.jpg)
MobileBestPractices
Team StructureThe 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 = immediateIM = within the hourEmail = by tomorrowCampfire = no reply needed
![Page 56: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/56.jpg)
ExerciseEmpathy Mapping a user experience
Time10 mins
MaterialsEasel pad, Sharpies, different colored post-it notes
How To1. 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.
![Page 57: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/57.jpg)
MobileBestPractices
“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
![Page 58: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/58.jpg)
MobileBestPractices
Thank You
![Page 59: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/59.jpg)
iOS7 Overview: Focus
Content is brought to the foreground.
Maximize the user experience by applying iOS 7’s three core design principles
![Page 60: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/60.jpg)
MobileBestPractices
iOS7 Overview: New features
Airdrop
Flat design language 1500 New APIs Enhanced Multi-tasking
Physics EngineiCloud Keychain
iBeacons
Automatic App Updates
![Page 61: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/61.jpg)
MobileBestPractices
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.
![Page 62: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/62.jpg)
MobileBestPractices
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.
![Page 63: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/63.jpg)
MobileBestPractices
iOS7 Principles: Depth
Depth
Visual layers and realistic motion heighten users’ delight and understanding.
![Page 64: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/64.jpg)
MobileBestPractices
iOS7 Overview: The rise of flat design
![Page 65: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/65.jpg)
MobileBestPractices
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
![Page 66: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/66.jpg)
MobileBestPractices
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.
![Page 67: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/67.jpg)
MobileBestPractices
Key Consideration: The New Flat Aesthetic
![Page 68: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/68.jpg)
MobileBestPractices
Key Consideration: Tinting, Not Textures
Get iOS7 Ready
![Page 69: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/69.jpg)
MobileBestPractices
Key Consideration: Dynamic Typography
![Page 70: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/70.jpg)
MobileBestPractices
Key Consideration: Full Bleed Interfaces
![Page 71: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/71.jpg)
MobileBestPractices
Key Consideration: Hierarchy Conveyed Through Depth
![Page 72: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/72.jpg)
MobileBestPractices
Key Consideration: Physics Engine
Get iOS7 Ready
![Page 73: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/73.jpg)
MobileBestPractices
Key Consideration: Enhanced Multi-tasking
Get iOS7 Ready
![Page 74: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/74.jpg)
MobileBestPractices
Key Consideration: 1500 New APIs To Use
Get iOS7 Ready
![Page 75: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/75.jpg)
MobileBestPractices
Key Consideration: New Safari is Omni-channel Friendly
Get iOS7 Ready
![Page 76: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/76.jpg)
MobileBestPractices
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.
![Page 77: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/77.jpg)
MobileBestPractices
Upcoming events:
San FranciscoWednesday October 23rd, 20138am to 10am PST
Wearable Tech Round-Table
Thank you!
![Page 78: Mobile Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052215/53eebf768d7f7289708b6189/html5/thumbnails/78.jpg)
MobileBestPractices
Helpful Resources
iOS7 App Redesignshttp://ios7redesigns.tumblr.com
The iOS 7 Design Cheat Sheethttp://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
36 High-Quality Flat Design Resourceshttp://mashable.com/2013/07/29/flat-design-ui-kits/
iOS 7 GUI PSDhttp://www.teehanlax.com/tools/ios7/http://applidium.com/en/news/introducing_ios_7_gui_psd/