WooCommerce<\/a>\u00a0so the backend\u00a0of the subscription builder was straightforward. The primary challenge was designing an engaging, clear selection process that embodies the creative and passionate nature of the Picky team.\u00a0Members add or remove flavors with a simple tap and see their order fill with colorful delight. (Geek bonus: the graphics are all vector-based and work seamlessly\u00a0at all\u00a0sizes.)<\/p>\nHanding the baton to tablet<\/h2>\n
![\"Picky](\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\")
<\/p>\n
Once we’re off and funning on a\u00a0tablet, you’ll note\u00a0fairly classic\u00a0responsive design decisions; the club sign-up mirror the desktop design with relatively minor rearranging and resizing.<\/p>\n
Sprint to the\u00a0finish on\u00a0the phone<\/h2>\n
Once we move to the phone, the design starts to change. Our first approach was to mirror the iPad.\u00a0Problem was, this metaphor didn\u2019t work on a phone. \u00a0While the desktop layout makes it obvious when one has assembled an order,\u00a0this was not at all obvious on the phone. The design took up to much vertical space to be easy to use without\u00a0constant scrolling up and down to assemble or edit your subscription.\u00a0Obviously, this wouldn’t do.<\/p>\n
<\/p>\n
After rounds of\u00a0prototyping, we focused\u00a0on a winning\u00a0approach for phones that retain the original design’s vibrant personality while simplifying ordering. Now, each flavor is\u00a0a single button that indicates the number of bars of a type ordered. Boom.<\/p>\n
The results<\/h2>\n[vimeo id=145341227]\n
The Picky Bars subscription page represents much of what is compelling about modern\u00a0web design where the bar is continually being raised on what is possible and compelling in an experience across multiple devices.<\/p>\n","protected":false},"excerpt":{"rendered":"
Crafting the Picky Bars online subscription sign-up with unique designs on desktop and mobile.<\/p>\n","protected":false},"author":3,"featured_media":12813,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,665],"tags":[100,624,51,359],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/2014\/08\/Picky-Bars-iPhone-1.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/13062"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=13062"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/13062\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/12813"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=13062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=13062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=13062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Picky](\"\/wp-content\/uploads\/2014\/08\/Picky-Bars-iPad-Story.jpg\")
<\/p>\n![\"Picky-Bars-Laptop\"](\"\/wp-content\/uploads\/2015\/11\/Picky-Bars-Laptop.jpg\")
<\/p>\n![\"Picky](\"\/wp-content\/uploads\/2014\/08\/Picky-Bars-iPad1.jpg\")
<\/p>\n![\"Picky](\"\/wp-content\/uploads\/2015\/11\/Picky-Bars-iPhone-1.jpg\")
<\/p>\n