Mobile Design at Gilt

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 ProcessMost tech companies are the same

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

UX ProcessAll 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 ProcessIterate on simplicity

Design Tools

Wire Frames Tools Static Mockup

Photoshop

Illustrator

Skala View

Live View

Paint CodeSketch App

Quartz Composer

xCode

Process & Collaboration

Iterate

Review Refine Prototype

Design to Engineering

Specifications Assets & Images Review On Device

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

UX & UI PatternsConsistency & 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 architectureand use a navigation bar

https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

Patterns & Resources

Responsive DesignDesign 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

InspirationTake breaks to stay productive & informed

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

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