Visual Design + User Experience

Snoop

Snoop was the result of a design sprint that was carried out at my previous employer, iGenero within two weeks and an additional week for the development. It is a simple CCTV app that made an attempt to recontextualize the user interface. We questioned the amount of interactions it should take in order to carry out a function. The end result was an extremely easy app with a quirky, minimalist interface that resulted in it being upvoted to the #2 spot on Product Hunt and eventually trending on the Google Playstore at the time of it's launch.

DateJune 2017
Duration2 Weeks
Websitewww.snoopapp.co
RolesUser Experience Design, Motion Design
ToolsSketch, Principle, Illustrator, After Effects

Challenge

Maximum function in minimum effort

This whole project stemmed from having a conversation while in a balcony over a coffee break. While discussing the current landcape of mobile apps, a question arised - why couldn't the general app experience be much simpler. We came up with a challenge, how might we simplify the end to end User Journey in not more than three steps? At the same time make it efficient enough so that such a solution is apt.

We further expanded this discussion, trying to look at the challenge from an advertising and branding perspective. How can we be innovate trying to evoke a sense of the brand throughout the app? A key factor we wanted to achieve was not just ideate but actually develop a final, legitimate beta that a user could download to test out themselves.

Solution

Broadcast, Stream, Audio, Video

After setting the overarching goals we wanted to achieve, we went about the design sprint methodology by trying to understand and discover potential design opportunities. We adapted the timeline as per our work schedule, not necessarily sticking to the rule-book or dedicating an entire day's to a single stage.

Between the Understanding and Converging phases, a lot of ideas were brought to the table that would make sense. We also looked at the kind of solutions other smaller agencies within India were looking to solve with their apps. The development team included myself as the sole designer of the User Experience and Interface alongwith Mayur Kawale and Edward Murari as the iOS and Android developers respectively.

India is a market where data usage and internet access through mobile devices is exploding. It wasn't uncommon to see people carry around two mobile phones with prices being incredibly cheap as a result of increasing competition and network coverage. Many people had a whole range of older devices lying around at home as a result of upgrading their existing technology.

The Indian Mindset has a general tendency to be incredibly resourceful to fix a problem. This is carried out in all stratas of society where old, discarded material has always been repurposed. We wanted to implement the same aspect of re-usability by coming up with a solution that made use of older devices and at the same time provide a sound solution, keeping in mind the goals we wanted to achieve.

We wanted to address the question of making a simplified user journey along with trying to create a practical solution that people would want to use. After much deliberation and discussion of possible opportunities, we came up with the idea of creating an alternative for a pet or a baby monitor that could make use of spare phones.

After narrowing down the direction of our prospective application, we went about trying to achieve the target of incorporating a user journey of three steps or lesser. This had to be done keeping in mind that it was an appropriate experience for the user as well.

I used the logo as part of the user interface, with the splash screen animation resulting in two buttons that formed the core of the app operation. One button to cast the video from an older device and the other to watch the video on the receiving device.

Apart from the splash screen animation, I utilized transitions as a means of adding character from the home-screen to function. They were again kept simple so as to echo the minimal ethos of the app. The transitions were incorporated using the Lottie framework.

Micro-interactions for buttons within the video streaming interface had to also be designed. The motion for the interactions was kept relatively simple utilizing masks and trim paths. Implementing them onto the app proved to be bothersome as the JSON files wouldn't always be carried out ideally.

My Process

Making Quick, Concise Decisions

Two days were allotted for the entire planning and designing of the User Experience that I was responsible for. An additional two days were required to make technical iterations during the development phase and generally to bug fix the implementation. Snoop was trying to capture the culture and mission statement of our agency being able to deliver functional solutions under stringent timelines.

Once we were centered upon the idea, we decided to quickly test out the functionality of the idea. After trying out a vast amount of API's, we decided to implement the WebRTC framework that was open-source. Our initial trials helped us narrow down to a one-factor security authetication using a generated PIN.

Whilst testing out functionality, I was going through potential logo designs. We finalized the name Snoop and I intended on having the logo as a wordmark so that the O's could be potentially transformed into buttons. Having them as eyes just seemed to make sense, further adding to the idea off keeping it quirky.

Creating transitions was something that was seemingly troublesome. I had to experiment alot with them, trying all the features that the exported JSON file would be able to support. Multiple trials had to be carried out for each iOS and Android platforms before eventually checking the files for consistency.

Despite the hectic timeline and the amount of mistrials we had, we successfully launched it to an overwhelming reception in both Product Hunt and the Google Play Store. I cannot thank Mayur, Edward and the entire team at iGenero for providing such a productive environment to work on.