Shield.

Vanessa Vilela
8 min readOct 14, 2017

--

The app that helps get your focus on fleek. Shielding you from the outside, without the shame.

How many times where you interrupted from an important activity to you and had a hard time getting back to it after?

May it be because you lost focus responding or because you wondered whether people were disappointed with your lack of time, it is always a losing situation.

Shield helps you own your time, preventing incoming distractions during your busy hours, at the same time that people you want to inform get to know the reason of your absence.

Shield main screens.

https://youtu.be/aoHtKZUIR7s

For the past 10 weeks, within Coursera’s Interaction Design Specialisation, I have been working on a digital artefact that aimed at challenging the brief provided, entitled Glance.

My considerations leaned towards the way people are flooded with information and seem to get lost while performing regular day-to-day tasks on their smartphones and other mobile devices.

During the research phase, two examples that stuck with me were the one from Graça, who takes care or her parents and feels the need to update her family regarding their condition, loosing track of other things she needs to accomplish throughout her day; as well as the one from Sofia, a designer who usually works remotely and under tight deadlines — she tends to have long periods of more relaxed time, where friends and family call or count with her through the day and some other times when that is not possible at all because she’s within a tight delivery date.

Both these cases made me realise the importance of the Other in relation to ourselves and how the way we are perceived impacts our days.

If I start thinking that someone might have gotten upset because I didn’t had enough time to spend chatting or giving updates on a given subject, I might get distracted or lose focus, which will unbalance efficiency and ultimately people’s mood, getting them frustrated because they can get things done the way they intended to.

In this light, and after the Needfinding phase, it came the time to brainstorm and get all the ideas out to paper. A big list of both good and bad ideas was made and only after considering every option — even the inconsiderable ones — was it time to taper its results, which would be the base for the next phase.

After getting some ideas together and considering the different options available, it was time to start putting some stuff together. Thus, I started sketching the most important features and what the core of this application should be. I considered not having an application at all, since this should be something to keep one on track with work, forcing a habit in a way.

On the other hand, there was always that punchline keeping me focus on solving the “shame” problem. How could people interact with others, by not interacting really?

So I started considering those “send later” ideas for email, for example. Or Slack notification feature to disable notifications. Of course the majority of smartphones touches the same point with the “flight mode”, which many tech savvier people use, or the “Do not disturb” feature already available.

But something was missing, to let others empathise with you and let them really understand the reason why you couldn’t be reached. That it wasn’t because you didn’t really wanted to make the time, but rather because you had a work priority on your way, for example.

Before the first screens and feature placement, it was finally the time to tweak it a bit and respond to some design heuristics, which definitely helped prepping up the prototype before thinking about usertesting.

Through this phase I discovered a few things I didn’t consider at first on my initial sketchs, such as confirmation screens and more targeted calls to action, as well as more context within actions.

First paper prototypes

Now everything starts taking a more shaped definition, with the first approach to hi-fi prototypes.

The major changes done after looking into the Heuristic Violations feedback were regarding confirmation screens and giving the user more context to the action being performed. For example, setting the information text while choosing a level of being busy. Also, taking ambiguity out of the way and clearly stating the action through straightforward calls to action.

Again, providing options and clarity reflected a more detailed approach for choosing groups to see a given message.

Now the fun part begins, with polishing the prototype interface, having in mind the task for the user test.

Setting the task helped also in getting all the needed screens ready and uploaded to InVision. Everything started looking put together for the next phase: Testing!

Task: Set the Shield for Super Busy level and define the message your friends will see once they try to contact you. When you feel like you can be disturbed again, stop the Shield and try to check who from your friends was a part of the “message-thread” during your busy hours. Then change the Super Busy schedule to 9 hours and save it.

Now ready to start learning from some user feedback in person. It started with getting the user’s written consent and then introducing them to the role they were about to play.

Then, observing/recording some of theirs interjections and pain spots was critical to understand what could be changed.

Participant A using Shield and wondering about the Stop button: “I wish I had a Pause action”.

The major flaws highlighted during these sessions were having a Pause button, because through the Stop one available they couldn’t understand whether it would actually stop the action or make them return to the stopped time. So it was ambiguous and that was something saved to change later on.

Also, there was the concern to check who was a given contact and the doubt in knowing through the small picture who that person would be. Another one to be reviewed.

After in person tests, it was time to set up the online A/B testing, featuring only one change from one prototype to another, shown below.

After the online testing there were some conclusions to withdraw.

  • Overall users had a common difficulty: they hesitated when trying to pause the Shield on test A, because the CTA was either “stop” or “extend”. On the other hand, the test B had already a Pause button and there was no hesitation at all, some people even said, “oh there is a pause button here, this is better” or “if it didn’t have a pause button I would probably be reluctant using the app, specially because I might want to check my notifications during lunch break and thus pause the Shield”.
  • Regarding the messaging, there was also some hesitation for 1 user about how to know that people in the contacts would not be notified before she actually defined that they would. This behaviour happened on both test versions.
  • One user commented that if it wasn’t for the task orienting him to enter the contact-group manager page, he probably wouldn’t have noticed the feature.
  • “Extend” button was also causing some issue on both tests A and B, since one of the tasks was to change the Busy Level scheduled time from 8 to 9 hours and it seemed like the best option for them was to use the “extend” button alone. The second option was always the gear icon, for those who got confused, in which they could actually change the time schedule for the busy level.

The online test ended up confirming the hypothesis observed in person, with people clearly using the pause button without hesitation or doubt, whereas the stop one caused some confusion; as well as having people wondering how they could check the people if the only thing they could see were small faces — “what if there are no pictures, how can I recognize them?”.

Additionally there was the broad concern about the action performed through the “Extend” button, they couldn’t understand if the time to extend was adding to the current period or if they could edit the “Busy Level” through that call to action.

After all this process, some changes were considered for the final concept of the app:

  • Change the copy of “Extend” to “Shield + 1 hour”
  • Add a total number of contacts within each group
  • Change the presentation of contacts from only the faces to a simple list of contacts
  • Add a disclaimer saying that the message will only be sent in case the user defines and chooses a group
Shield.

Try it on Invision: https://invis.io/52DTTY5B3

Watch the video on Youtube: https://www.youtube.com/watch?v=aoHtKZUIR7s

And send me comments below with your thoughts or suggestions. :)

--

--