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
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
Feature Team Shared Resources
Company Structure
Product Manager
Engineers QA
UX Visual Research
Build Test
Drive Interactions Design Usability Testing Customer Data
Deliverables
Kickoff Establish requirements, goals, deadlines
Product Eng.UX Visual
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
Design Tools
Wire Frames Tools Static Mockup
Photoshop
Illustrator
Skala View
Live View
Paint CodeSketch App
Quartz Composer
xCode
Design Tips
Stay organized 00(pgLevel)_pg/prjName_deviceOrient_MMDDYY_revisionNumber.psd !!!!!Slice naming - [email protected] 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
Kill the Hamburger• Lowers Discoverability
• Less Efficient
• Clashes with Platform Navigation Patterns
• Review your info architectureand use a navigation bar
https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
ResourcesDesign 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
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.