{"id":4109,"date":"2018-06-15T01:53:29","date_gmt":"2018-06-15T01:53:29","guid":{"rendered":"http:\/\/digm.drexel.edu\/uxid\/?p=4109"},"modified":"2023-04-19T19:19:12","modified_gmt":"2023-04-19T19:19:12","slug":"schmear-it","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2018\/06\/15\/schmear-it\/","title":{"rendered":"Schmear It"},"content":{"rendered":"<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4130\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-705x1024.png\" alt=\"\" width=\"705\" height=\"1024\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-705x1024.png 705w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-207x300.png 207w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-768x1115.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-992x1440.png 992w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero.png 1412w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/a><\/p>\n<h2>Team<\/h2>\n<ul>\n<li>Alex Aslid<\/li>\n<li>Alex Huffaker<\/li>\n<li>Yuan Li<\/li>\n<li>Miles Waldron<\/li>\n<li>Jordan Zagerman<\/li>\n<\/ul>\n<h2>Overview<\/h2>\n<p>Over the past 10 weeks our group has been working closely with Schmear It and their&nbsp;customers to create a brand new mobile ordering experience. We conducted primary&nbsp;research, went through multiple rounds of ideation and user testing, and ultimately&nbsp;created a final interactive mockup in Sketch and Flinto. Through this process we&nbsp;learned the importance of collaboration, user testing, team meetings, and&nbsp;understanding business requirements. We are extremely pleased with the final&nbsp;application and hope Schmear It\u2019s users love it as well.<\/p>\n<h2>Context and Challenge<\/h2>\n<p>Schmear It is a local Philadelphia bagel food truck established in 2013 and recently&nbsp;expanded into a physical location in October 2016. Our team was tasked with&nbsp;developing a mobile application for Schmear It that provided mobile ordering, rewards,&nbsp;and business information for their customers. This application would substitute their&nbsp;existing order ahead solution on their website. We worked closely with Schmear It and&nbsp;their customers to test and develop this mobile application over the past 10 weeks.<\/p>\n<p>While Schmear It already had a mobile ordering function built into their website. It&nbsp;wasn\u2019t advertised or communicated to users very clearly on their website (especially&nbsp;the mobile site) or at their physical locations. The goal of this application was to bring&nbsp;mobile ordering to Schmear It in an accessible and discoverable way for users, while&nbsp;preserving the unique personality and branding Schmear It has developed. The&nbsp;application should also promote their build-your-own option as this is their preferred&nbsp;way for people to order and their collaboration with charities.<\/p>\n<h2>Process and Insight<\/h2>\n<p>We began the design process by establishing a relationship with Schmear It. We&nbsp;created a business model canvas and project model canvas for the company. After that&nbsp;we began visiting the truck and store to observe the ordering process and the&nbsp;customer experience Schmear It provides.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4121\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks-1024x765.png\" alt=\"\" width=\"1024\" height=\"765\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks-1024x765.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks-300x224.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks-768x574.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Starbucks-1440x1076.png 1440w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>From there we began conducting competitive research on competing mobile ordering&nbsp;applications to determine what ideas, flows, and features were already on the market.&nbsp;We determined our target audience based on the surrounding area and the customers&nbsp;we saw from visiting Schmear It. We determined our primary customer types were&nbsp;students, commuters, medical professionals, and to a lesser degree tourists.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Sketches.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4122\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Sketches-1024x781.png\" alt=\"\" width=\"1024\" height=\"781\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Sketches-1024x781.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Sketches-300x229.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Sketches-768x586.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Sketches-1440x1099.png 1440w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>After our initial research and planning, we began to sketch wireframes for potential&nbsp;designs and user flows. This process, like every process was collaborative and we&nbsp;went through 2 rounds of wireframes before moving to digital mockups.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4123\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board-1024x733.png\" alt=\"\" width=\"1024\" height=\"733\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board-1024x733.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board-300x215.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board-768x550.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Mood-Board-1440x1031.png 1440w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>From there we made individual mood boards that we combined into a unified team&nbsp;mood board with our color palette, potential iconography, fonts, etc.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/WF.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4120\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/WF-1024x836.png\" alt=\"\" width=\"1024\" height=\"836\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/WF-1024x836.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/WF-300x245.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/WF-768x627.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/WF-1440x1175.png 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/WF.png 1828w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>We then began creating wireframes in Sketch and tested paper prototypes with users.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Interview.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4124\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Interview-927x1024.png\" alt=\"\" width=\"927\" height=\"1024\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Interview-927x1024.png 927w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Interview-271x300.png 271w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Interview-768x849.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Interview.png 990w\" sizes=\"(max-width: 927px) 100vw, 927px\" \/><\/a><\/p>\n<p>After testing with paper prototypes we moved into testing digital mockups with&nbsp;scripted user interviews. We repeated this testing every week from weeks 6-10. After&nbsp;each round of testing we regrouped as a team, discussed our user feedback, and&nbsp;determined what changes needed to be made for the following week. Collectively we&nbsp;tested with approximately 50 users over weeks 6-10. In week 7, we began using Flinto&nbsp;to add animation and navigation to our prototypes. The navigation went through&nbsp;several revisions as the first few prototypes were difficult to navigate. By week 10 we&nbsp;had a final prototype that went through one final round of testing and validation.<\/p>\n<p>Overall we split the initial wireframe sketches and user testing between each team&nbsp;member. Alex Aslid created mockups in sketch and the final presentation. Alex&nbsp;Huffaker helped create standardized UI elements in Sketch and the final case study.<\/p>\n<p>Yuan Li created the initial wireframes in Sketch for testing and assisted Jordan with&nbsp;animations in Flinto. Jordan Zagerman focused on talking with the business, users, and&nbsp;later animations in Flinto. Miles was responsible for creating graphics and did the final&nbsp;work in Sketch before it was passed off to the Flinto team.<\/p>\n<h2>Solution<\/h2>\n<p>From the start we wanted ordering to be as easy and fast as possible. This was a&nbsp;defining trait that drove our design decisions. This led to the removal of an initial sign&nbsp;up screen and was a driving factor for the adoption of an ever-present card style cart.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Splash.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4125\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Splash.png\" alt=\"\" width=\"375\" height=\"667\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Splash.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Splash-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>You can see the application clearly promotes the charity Schmear It is working with&nbsp;that month as well as displaying their logo and branding.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-4130\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-705x1024.png\" alt=\"\" width=\"705\" height=\"1024\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-705x1024.png 705w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-207x300.png 207w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-768x1115.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero-992x1440.png 992w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Schmear-It-Hero.png 1412w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/a><\/p>\n<p>The home screen allows the users to dive immediately into the menu and ordering&nbsp;process. A card-style cart is persistent at the bottom of the ordering section of the&nbsp;application. The location and account pages are positioned to the left and right&nbsp;respectively and can be navigated with a swipe left or right or by tapping the respective&nbsp;icon from the navigation bar.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Hours-Location.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4127\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Hours-Location.png\" alt=\"\" width=\"375\" height=\"667\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Hours-Location.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Hours-Location-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The location and times of the truck are clearly displayed under the about section so&nbsp;users are aware it closes early and the location changes.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Account.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4128\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Account.png\" alt=\"\" width=\"375\" height=\"667\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Account.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Account-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>Rewards status, past orders, and account settings are all under one screen thanks to&nbsp;user feedback and provide a general account overview.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/BYO.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4126\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/BYO.png\" alt=\"\" width=\"375\" height=\"654\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/BYO.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/BYO-172x300.png 172w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>Custom orders guide users through a step by step flow where they can select their&nbsp;bagel type, toasted option, base spread, and mix-ins. Each of the bagel icons were&nbsp;recreated in Schmear It\u2019s graphic style.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Cart.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4131\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Cart.png\" alt=\"\" width=\"375\" height=\"667\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Cart.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Cart-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>The checkout process allows for setting a custom pickup time and location when&nbsp;ordering ahead.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Payments.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4134\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Payments.png\" alt=\"\" width=\"375\" height=\"719\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Payments.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Payments-156x300.png 156w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>The payment info screen displays the user\u2019s rewards status and alerts them if a reward&nbsp;is available before they complete the checkout. We also accept multiple forms of&nbsp;payment including Apple Pay for faster checkouts.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Order-Conf.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4133\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Order-Conf.png\" alt=\"\" width=\"375\" height=\"750\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Order-Conf.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Order-Conf-150x300.png 150w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>The order confirmation screen clearly shows the location and estimated pickup time. It&nbsp;also has a barcode for the store to scan upon pickup.<\/p>\n<p><a href=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Order-Processing-1.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4132\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/06\/Order-Processing-1.png\" alt=\"\" width=\"375\" height=\"667\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Order-Processing-1.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/06\/Order-Processing-1-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>Once an order is placed, a new order status button appears on the home screen.<\/p>\n<h2>Results<\/h2>\n<p>Overall we feel this project has been very successful due to the branding, ease of use,&nbsp;and feedback from users. We met all of the business\u2019 criteria to promote custom&nbsp;orders. User feedback was tracked through quantitative user studies with users&nbsp;reporting increasing satisfaction week to week. The application itself is very straight&nbsp;forward with its ordering process and the lack of an initial sign up screen greatly&nbsp;decreases first time setup for new users.<\/p>\n<p>Creating a consistent meeting time really helped us stay on track even if one or two&nbsp;members weren\u2019t able to make it that week. These meetings became less consistent&nbsp;as the project began wrapping up due to external conflicts from group members and&nbsp;affected the final product. In the future we would be stricter about these team meetings&nbsp;and at least one occurred a week outside of class. Sharing Sketch and Flinto files&nbsp;between the team also proved an obstacle as the team multiple versions for testing&nbsp;and the roles changed weekly.<\/p>\n<figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\"><iframe  id=\"_ytid_82227\"  width=\"326\" height=\"183\"  data-origwidth=\"326\" data-origheight=\"183\" src=\"https:\/\/www.youtube.com\/embed\/LKuYlknRoWM?enablejsapi=1&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&modestbranding=0&rel=1&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Team Alex Aslid Alex Huffaker Yuan Li Miles Waldron Jordan Zagerman Overview Over the past 10 weeks our group has been working closely with Schmear It and their&nbsp;customers to create a brand new mobile ordering experience. We conducted primary&nbsp;research, went through multiple rounds of ideation and user testing, and ultimately&nbsp;created &hellip;<\/p>\n","protected":false},"author":2,"featured_media":6182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[35],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/4109"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=4109"}],"version-history":[{"count":4,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/4109\/revisions"}],"predecessor-version":[{"id":6183,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/4109\/revisions\/6183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/6182"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=4109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=4109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=4109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}