{"id":1022,"date":"2018-05-29T12:10:13","date_gmt":"2018-05-29T19:10:13","guid":{"rendered":"https:\/\/www.supamonke.com\/a\/?p=1022"},"modified":"2018-06-06T17:01:05","modified_gmt":"2018-06-07T00:01:05","slug":"lifeshield-app-redesign","status":"publish","type":"post","link":"https:\/\/www.supamonke.com\/a\/lifeshield-app-redesign\/","title":{"rendered":"Lifeshield App Redesign"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tDate\t\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t2016\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tClient\t\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tLifeShield\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tServices\t\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tUX\/UI
\nJavascript
\nCoffeescript\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tTools\t\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tFramer
\nIllustrator
\nPhotoshop\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

When the CEO <\/b>and founder <\/b>of LifeShield<\/a>, Louis Stilp<\/b>, saw the work my team and I had done during one of DLab<\/b>\u2019s open houses, he gave us a call.<\/p>

LifeShield <\/b>was acquired by DIRECTV <\/b>to compete in the home security space, and reach some parity with other broadcast providers. As LifeShield <\/b>was updating their system and services, Mr. Stilp came to us to take a hard look at their existing app, and update its design and capabilities.<\/p>

Our timeframe was limited. we had 8 weeks to bring Lou something he could work with, and we had to add home automation features to the app.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Our approach was to immersive ourselves in Lifeshield <\/b>\u2014 to examine the company\u2019s existing and previous UX and UI to understand what current customer expectations were, and to try to create an intuitive and yet powerful interface to add a whole set of new features, without taking anything valuable away.<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

We begun by taking a trip to Pennsylvania, to LifeShield <\/b>headquarters, where my team and I toured the company, met with personnel in every department, and interviewed a cross section of the employees. We met with developers, customer service, operations, fulfillment, management and more. We learned about every device in the system, and a deep dive in the current app.<\/p>

We stayed in town for several days, sketching ideas and using our access to the company to ask questions and test some basic concepts. This time was invaluable, and through the organic conversations it allowed, we learned what made LifeShield\u2019s <\/b>product special, what the LifeShield <\/b>customer liked and disliked about the product, and what level of change the company was willing to commit to. We found them to be excited and open to new ideas \u2014 a great way to start.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Our conversations led us to a few priorities for LifeShield: live video, remote control, and a live local crime map. We then focused on usability — quick access to information and control of the system in a minimum of clicks. Our goal was to access anything in 2 clicks or less.<\/p>

Our first prototypes were designed based on swipes to access the major features of the app: down for video, up for the main menu, leaving left and right to swap from a control to an alert view. Testing showed us that while the basic idea was working, there was a long way to go to find the sweet spot.<\/p>

Later iterations simplified this idea with an onscreen dashboard, a peek to view camera shade and button UI for swapping from commands to alerts. We simplified the menu, locked it to the bottom, and added a modal window for sub menu commands. Our commands list acted as a button to launch, and swiping revealed buttons to edit or delete commands.<\/p>

\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

We also had to manage adding significant complexity in adding a rule-building system for true home automation. The idea was to make a best in class system that could set up simple commands with ease, but with the power to create deep and complex commands for power users. We took inspiration from MIT’s Scratch project, and came up with a system that could build simple commands into rich macros without ever needing to leave the app. A community based system could add depth for those not interested in building their own commands, and act as a guide to those who wanted to dig deeper. We explored a few different methods of building those rules, including sentences, a method that we thought had a lot of potential, especially if virtual assistants could be added to the mix.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

The final result looked simple, but hid a tremendous amount of power. Our demos showed the process of quickly building complex rules to solve basic homeowner problems like controlling sprinklers on a schedule that accounted for weather conditions, or supervising a home while away during an intrusion. It also showed the ease of normal day-to-day use, a customer focused approach that gave LifeShield an exciting direction for future revisions of their app.<\/p>\n

<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t<\/i>Prev<\/span><\/span>Jet.com AR<\/span><\/span><\/a>\t\t\t<\/div>\n\t\t\t\t\t\t
\n\t\t\t\tLED Projects<\/span><\/span><\/i>Next<\/span><\/span><\/a>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

App Redesign  Date 2016 Client LifeShield Services UX\/UI Javascript Coffeescript Tools Framer Illustrator Photoshop When the CEO and founder of LifeShield, Louis Stilp, saw the work my team and I had done during one of DLab\u2019s open houses, he gave us a call. LifeShield was acquired by DIRECTV to compete in the home security space, […]<\/p>\n","protected":false},"author":2,"featured_media":1137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[30,28],"class_list":["post-1022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-portfolio","tag-app","tag-prototype"],"_links":{"self":[{"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/posts\/1022"}],"collection":[{"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/comments?post=1022"}],"version-history":[{"count":10,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/posts\/1022\/revisions"}],"predecessor-version":[{"id":1279,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/posts\/1022\/revisions\/1279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/media\/1137"}],"wp:attachment":[{"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/media?parent=1022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/categories?post=1022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.supamonke.com\/a\/wp-json\/wp\/v2\/tags?post=1022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}