Mobile Design +
David Park Christopher Barr

Flash sales that last a couple days with designer products up to 60% off
Founded in NYC in 2007 by Kevin Ryan, 9M members

40% of Gilt revenue was
generated through mobile
in 2013

47% of customers
purchased on mobile in the
last 12 months
!
53% of customers visited
Gilt on both mobile and site
in last 12 months
!
Someone spent $30k on an
Acura & LA travel package
on their iPhone

Company Process
Most tech companies are the same

Company Structure
Feature Team Shared Resources
Product Manager
Drive Interactions Design Usability Testing
Engineers QA
UX Visual Research
Build Test
Customer Data

Deliverables
Kickoff
Establish requirements, goals, deadlines
Product UX Visual Eng.
UX Mockups
Mock layouts, interactions, screen flows
Weekly Design Review
Check in, get feedback, iterate on UX and design
Usability Test
Test with customers, get feedback, iterate
Build & Pixel Push
Release feature on staging and review
Launch, AB Test, Monitor
Launch feature to a test bucket and see how it does
Research

UX Process
All designers are different

1. Open screenshot in Photoshop

Photoshop Guidelines
Guidelines help you design
inside of screen size

2. Copy and paste screens into Omnigraffle

Useful Omnigraffle Stencils

3. Export PDF and share via email & Dropbox

Dropbox File Structure
Feature Team Projects PDF Deliverables Working Files

Design Process
Iterate on simplicity

Design Tools
Wire Frames Tools Static Mockup
Photoshop
Illustrator
Skala View
Live View
Paint Code
Sketch App
Quartz Composer
xCode

Process & Collaboration
Review Refine Prototype
Iterate

Design to Engineering
Specifications Assets & Images Review On Device

Design Tips
Stay organized
00(pgLevel)_pg/prjName_deviceOrient_MMDDYY_revisionNumber.psd
!
!
!
!
!
Slice naming - filename@3x.png or xxhdpi_filename.png
Pixel precise
• Snap pixels to pixel grid
• Use shape layers in photoshop
• Keep a consistent system for vertical &
horizontal spacing
• Work from a type scale Do Don’t

UX & UI Patterns
Consistency & familiarity matter

iOS vs. Android

Take advantage of OS patterns

Kill the Hamburger
• Lowers Discoverability
• Less Efficient
• Clashes with Platform
Navigation Patterns
• Review your info architecture
and use a navigation bar
https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

Patterns & Resources

Responsive Design
Design that scales across web, tablet and mobile

1024x768
37% worldwide (Jan 2014)

iPad Portrait 768x1024
iPad Landscape 1024x768

iPhone 5 – 320x568 iPhone 6 – 375x667 iphone 6 Plus – 414x736

Mobile Web vs. Mobile App

Inspiration
Take breaks to stay productive & informed

Resources
Design Inspiration
www.theverge.com
www.techcrunch.com
www.producthunt.com - Daily list of new products
www.siteinspire.com - Website Showcase
www.hoverstat.es - The best new & interesting interaction design
!
Resources
www.pttrns.com - Mobile Patterns
www.capptivate.co - Mobile Animations
www.reallygoodemails.com - Email Patterns
www.milled.com - eCommerce / Fashion Emails
www.iconfinder.com - Free icon search engine
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ - iOS Patterns
https://developer.android.com/design/patterns/index.html - Android Patterns
!!
Omnigraffle Stencils
http://konigi.com/tools/omnigraffle-wireframe-stencils - Wireframe Annotations
https://www.graffletopia.com/stencils/587 - Touch Gestures
!
Design Tips
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ - Apple’s HIG
https://developer.android.com/distribute/googleplay/developer-console.html - Android Developer Guidelines
http://bjango.com/articles/appdesignworkflow/ - Workflow actions & process for Photoshop
http://cdn.ustwo.com/PPP/PP3.pdf - Ustwo’s pixel perfect guide
!! Pixel Dimensions (@1x)
Web: 1024x768 (37% worldwide since Jan 2014)
iPad Portrait 768x1024
iPad Landscape 1024x768
iPhone5 320x658
iPhone6 375x667
iPhone6 Plus 414x736

Design Studio!
Brainstorm, sketch & present ideas with stakeholders

Select a prompt below and create a sketch or series of
sketches of the core experience and a few interactions.
1. Design a garage sale app where you can buy and
sell stuff locally.
2. Design an app to manage the appliances in your
smart home.
3. Design a time travel app that will allow customers
to book a stay in the past.

Questions & Answers
!
http://bit.ly/1tolwOM