SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
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
Mobile Design at Gilt
Mobile Design at Gilt
Mobile Design at Gilt
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

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile and Responsive Design
Mobile and Responsive DesignMobile and Responsive Design
Mobile and Responsive Designcreed
 
My ux portfolio 2013
My ux portfolio 2013My ux portfolio 2013
My ux portfolio 2013Emily Thomas
 
What is User Experience @iRajLal
What is User Experience @iRajLalWhat is User Experience @iRajLal
What is User Experience @iRajLalRaj Lal
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Amrita Aviyente
 
Discovery 101
Discovery 101Discovery 101
Discovery 101creed
 
Jonah Osawa - UX Portfolio
Jonah Osawa - UX PortfolioJonah Osawa - UX Portfolio
Jonah Osawa - UX PortfolioJonah Osawa
 
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"UX STRAT
 
10 spaces-ux capabilities-presentation
10 spaces-ux capabilities-presentation10 spaces-ux capabilities-presentation
10 spaces-ux capabilities-presentationMatt DeYoung
 
How Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMHow Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMProduct School
 
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom WebinarUserZoom
 
UX Portfolios: How to tell your story
UX Portfolios: How to tell your storyUX Portfolios: How to tell your story
UX Portfolios: How to tell your storyPatrick Neeman
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
Jay Ramirez – UX Designer Portfolio
Jay Ramirez – UX Designer PortfolioJay Ramirez – UX Designer Portfolio
Jay Ramirez – UX Designer PortfolioJay R
 
#flashtest: User Research Live
#flashtest: User Research Live#flashtest: User Research Live
#flashtest: User Research LiveUXPA Boston
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 

Was ist angesagt? (20)

Mobile and Responsive Design
Mobile and Responsive DesignMobile and Responsive Design
Mobile and Responsive Design
 
My ux portfolio 2013
My ux portfolio 2013My ux portfolio 2013
My ux portfolio 2013
 
What is User Experience @iRajLal
What is User Experience @iRajLalWhat is User Experience @iRajLal
What is User Experience @iRajLal
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
 
Effective ui
Effective uiEffective ui
Effective ui
 
Discovery 101
Discovery 101Discovery 101
Discovery 101
 
Jonah Osawa - UX Portfolio
Jonah Osawa - UX PortfolioJonah Osawa - UX Portfolio
Jonah Osawa - UX Portfolio
 
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"
UX STRAT USA, jim Kalbach, "Mapping Experiences with Alignment Diagrams"
 
10 spaces-ux capabilities-presentation
10 spaces-ux capabilities-presentation10 spaces-ux capabilities-presentation
10 spaces-ux capabilities-presentation
 
UX workshop
UX workshopUX workshop
UX workshop
 
Building an MVP
Building an MVPBuilding an MVP
Building an MVP
 
How Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMHow Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PM
 
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
 
UX Portfolios: How to tell your story
UX Portfolios: How to tell your storyUX Portfolios: How to tell your story
UX Portfolios: How to tell your story
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
Jay Ramirez – UX Designer Portfolio
Jay Ramirez – UX Designer PortfolioJay Ramirez – UX Designer Portfolio
Jay Ramirez – UX Designer Portfolio
 
#flashtest: User Research Live
#flashtest: User Research Live#flashtest: User Research Live
#flashtest: User Research Live
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 

Andere mochten auch

Building high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQueryBuilding high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQueryDavid Park
 
Ba z cityformu
Ba z cityformuBa z cityformu
Ba z cityformufroloo
 
Jayakar, pupul krishnamurti. biografía
Jayakar, pupul   krishnamurti. biografíaJayakar, pupul   krishnamurti. biografía
Jayakar, pupul krishnamurti. biografíasergi75
 
Estudos Qualitativos On Line
Estudos Qualitativos On LineEstudos Qualitativos On Line
Estudos Qualitativos On LineMadalena Lupi
 
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagor
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico FagorMi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagor
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagorserviciotecnicofagor
 
Kreishäuser in Siegen
Kreishäuser in SiegenKreishäuser in Siegen
Kreishäuser in Siegensiwiarchiv
 
Hiperion Digital Microwave Radio Presentation
Hiperion Digital Microwave Radio PresentationHiperion Digital Microwave Radio Presentation
Hiperion Digital Microwave Radio PresentationBarry Rule
 
Reflexiones junto a la fuente taza, finales de octubre 2013
Reflexiones junto a la fuente taza, finales de octubre 2013Reflexiones junto a la fuente taza, finales de octubre 2013
Reflexiones junto a la fuente taza, finales de octubre 2013gamiruela
 
Enhancing the gas barrier properties of polylactic acid by means of electrosp...
Enhancing the gas barrier properties of polylactic acid by means of electrosp...Enhancing the gas barrier properties of polylactic acid by means of electrosp...
Enhancing the gas barrier properties of polylactic acid by means of electrosp...Sergio Torres-Giner
 
Listing eurobonds on the cisx
Listing eurobonds on the cisxListing eurobonds on the cisx
Listing eurobonds on the cisxprahladtripati
 
03 m-ct-inyeccion-bosch-me744
03 m-ct-inyeccion-bosch-me74403 m-ct-inyeccion-bosch-me744
03 m-ct-inyeccion-bosch-me744lebegui2
 
BeTrains for Qt
BeTrains for QtBeTrains for Qt
BeTrains for Qtmaleadt
 
Erl1 panorama de samaritan´s purse
Erl1 panorama de samaritan´s purseErl1 panorama de samaritan´s purse
Erl1 panorama de samaritan´s purseJosue Miranda
 
Bacula Workshop - Teil 1
Bacula Workshop - Teil 1Bacula Workshop - Teil 1
Bacula Workshop - Teil 1inovex GmbH
 
Trabajo colaborativo girs nathalia apraez julio avellaneda jairo marin
Trabajo colaborativo girs nathalia apraez  julio avellaneda  jairo marinTrabajo colaborativo girs nathalia apraez  julio avellaneda  jairo marin
Trabajo colaborativo girs nathalia apraez julio avellaneda jairo marinJairo Marín
 

Andere mochten auch (20)

Building high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQueryBuilding high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQuery
 
Ba z cityformu
Ba z cityformuBa z cityformu
Ba z cityformu
 
Jayakar, pupul krishnamurti. biografía
Jayakar, pupul   krishnamurti. biografíaJayakar, pupul   krishnamurti. biografía
Jayakar, pupul krishnamurti. biografía
 
Html 5
Html 5Html 5
Html 5
 
Estudos Qualitativos On Line
Estudos Qualitativos On LineEstudos Qualitativos On Line
Estudos Qualitativos On Line
 
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagor
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico FagorMi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagor
Mi vce 2000 ss & vce-2200 ss - Servicio Tecnico Fagor
 
Kreishäuser in Siegen
Kreishäuser in SiegenKreishäuser in Siegen
Kreishäuser in Siegen
 
Hiperion Digital Microwave Radio Presentation
Hiperion Digital Microwave Radio PresentationHiperion Digital Microwave Radio Presentation
Hiperion Digital Microwave Radio Presentation
 
Reflexiones junto a la fuente taza, finales de octubre 2013
Reflexiones junto a la fuente taza, finales de octubre 2013Reflexiones junto a la fuente taza, finales de octubre 2013
Reflexiones junto a la fuente taza, finales de octubre 2013
 
Enhancing the gas barrier properties of polylactic acid by means of electrosp...
Enhancing the gas barrier properties of polylactic acid by means of electrosp...Enhancing the gas barrier properties of polylactic acid by means of electrosp...
Enhancing the gas barrier properties of polylactic acid by means of electrosp...
 
Listing eurobonds on the cisx
Listing eurobonds on the cisxListing eurobonds on the cisx
Listing eurobonds on the cisx
 
03 m-ct-inyeccion-bosch-me744
03 m-ct-inyeccion-bosch-me74403 m-ct-inyeccion-bosch-me744
03 m-ct-inyeccion-bosch-me744
 
BeTrains for Qt
BeTrains for QtBeTrains for Qt
BeTrains for Qt
 
edificios futuristas famosos
edificios futuristas famososedificios futuristas famosos
edificios futuristas famosos
 
DeanCV
DeanCVDeanCV
DeanCV
 
Erl1 panorama de samaritan´s purse
Erl1 panorama de samaritan´s purseErl1 panorama de samaritan´s purse
Erl1 panorama de samaritan´s purse
 
Bacula Workshop - Teil 1
Bacula Workshop - Teil 1Bacula Workshop - Teil 1
Bacula Workshop - Teil 1
 
Huawei diapositiva
Huawei diapositivaHuawei diapositiva
Huawei diapositiva
 
Manual electrolux lavavajillas esi4510rox
Manual electrolux   lavavajillas esi4510roxManual electrolux   lavavajillas esi4510rox
Manual electrolux lavavajillas esi4510rox
 
Trabajo colaborativo girs nathalia apraez julio avellaneda jairo marin
Trabajo colaborativo girs nathalia apraez  julio avellaneda  jairo marinTrabajo colaborativo girs nathalia apraez  julio avellaneda  jairo marin
Trabajo colaborativo girs nathalia apraez julio avellaneda jairo marin
 

Ähnlich wie Mobile Design at Gilt

Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product TrendsJeremy Johnson
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Brenna Mickey
 
Design Learnings
Design LearningsDesign Learnings
Design LearningsQuikr
 
CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)jahnaveec
 
Chip_Swanson-Resume-2016-1
Chip_Swanson-Resume-2016-1Chip_Swanson-Resume-2016-1
Chip_Swanson-Resume-2016-1Chip Swanson
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu ZouWenzhu Zou
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resumejyothsna joy
 
Sureshundley_Principal_webdesiger
Sureshundley_Principal_webdesigerSureshundley_Principal_webdesiger
Sureshundley_Principal_webdesigerSuresh Undley
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Jesse Cohen's Portfolio
Jesse Cohen's PortfolioJesse Cohen's Portfolio
Jesse Cohen's PortfolioJesse Cohen
 
iCapps workshop App Design - AFT Leuven
iCapps workshop App Design - AFT LeuveniCapps workshop App Design - AFT Leuven
iCapps workshop App Design - AFT LeuveniCapps
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App DevelopmentOsman Celik
 
Kumar Abhishek Sudhanshu1
Kumar Abhishek Sudhanshu1Kumar Abhishek Sudhanshu1
Kumar Abhishek Sudhanshu1Kumar Abhishek
 
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Bow Kraivanich
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websiteshaxorize
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villaresrayvillares
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 

Ähnlich wie Mobile Design at Gilt (20)

Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 
CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)
 
Chip_Swanson-Resume-2016-1
Chip_Swanson-Resume-2016-1Chip_Swanson-Resume-2016-1
Chip_Swanson-Resume-2016-1
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resume
 
Careers In Web Design
Careers In Web DesignCareers In Web Design
Careers In Web Design
 
Sureshundley_Principal_webdesiger
Sureshundley_Principal_webdesigerSureshundley_Principal_webdesiger
Sureshundley_Principal_webdesiger
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Jesse Cohen's Portfolio
Jesse Cohen's PortfolioJesse Cohen's Portfolio
Jesse Cohen's Portfolio
 
iCapps workshop App Design - AFT Leuven
iCapps workshop App Design - AFT LeuveniCapps workshop App Design - AFT Leuven
iCapps workshop App Design - AFT Leuven
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App Development
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App Development
 
Kumar Abhishek Sudhanshu1
Kumar Abhishek Sudhanshu1Kumar Abhishek Sudhanshu1
Kumar Abhishek Sudhanshu1
 
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 

Mobile Design at Gilt

  • 1. Mobile Design + David Park Christopher Barr
  • 2. Flash sales that last a couple days with designer products up to 60% off Founded in NYC in 2007 by Kevin Ryan, 9M members
  • 3. 40% of Gilt revenue was generated through mobile in 2013
  • 4. 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
  • 5. Company Process Most tech companies are the same
  • 6. Company Structure Feature Team Shared Resources Product Manager Drive Interactions Design Usability Testing Engineers QA UX Visual Research Build Test Customer Data
  • 7. 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
  • 8. UX Process All designers are different
  • 9. 1. Open screenshot in Photoshop
  • 10. Photoshop Guidelines Guidelines help you design inside of screen size
  • 11. 2. Copy and paste screens into Omnigraffle
  • 13. 3. Export PDF and share via email & Dropbox
  • 14. Dropbox File Structure Feature Team Projects PDF Deliverables Working Files
  • 15. Design Process Iterate on simplicity
  • 16. Design Tools Wire Frames Tools Static Mockup Photoshop Illustrator Skala View Live View Paint Code Sketch App Quartz Composer xCode
  • 17. Process & Collaboration Review Refine Prototype Iterate
  • 18. Design to Engineering Specifications Assets & Images Review On Device
  • 19. 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
  • 20. UX & UI Patterns Consistency & familiarity matter
  • 22. Take advantage of OS patterns
  • 23. 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/
  • 25. Responsive Design Design that scales across web, tablet and mobile
  • 27. iPad Portrait 768x1024 iPad Landscape 1024x768
  • 28. iPhone 5 – 320x568 iPhone 6 – 375x667 iphone 6 Plus – 414x736
  • 29. Mobile Web vs. Mobile App
  • 30. Inspiration Take breaks to stay productive & informed
  • 34. 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
  • 35. Design Studio! Brainstorm, sketch & present ideas with stakeholders
  • 36. 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.
  • 37. Questions & Answers ! http://bit.ly/1tolwOM