December 4, 2018

A UX journey from a copy confusion to a new header

Thanks to the heuristic evaluation, customer journey insights, and other work done in the past few months, we now know more about our users behavior, goals, and problems than before.

Our journey to a new header

One of the problems we identified is the confusion between User and Account. A DNSimple User can have multiple Accounts. That dependency has confused our users for a long time.

Being a solid business we don’t want to make big changes just because, and we often look for the tiniest possible adjustments to solve problems. In this case, we were asking the wrong––or incomplete––question. We were wondering why User and Account weren’t clear enough concepts.

Asking the right question

Instead of immediately trying to answer why isn’t the copy clear?’ we started digging on our database to learn our users behavior towards this feature. We wanted to know how our users are using that feature.

As an eight year old product we have access to the real usage of our features through time. Thinking about how to solve a problem is easier if you know the potential impact of changes.

Data informed design, not data driven design

I’ve based the new design on the data we extracted from our current users, but not only that. We can’t forget we only have quantitative data, not qualitative. People are biased by their context and some user’s behavior could be influenced by the application itself.

For example, we could say people don’t edit their Facebook Privacy Preferences enough and therefore they aren’t interested in privacy, but we also know that Facebook Pirvacy settings are currently overcomplicated and hidden. Data driven design would only listen to the first argument, while data informed design considers specific data and context together.

Looking at DNSimple account feature usage we discovered Anthony, the CEO, is the user with more accounts at seven. We also learnt 96% of our users have only one account. How could users tell the User-Account dependencies when they have only one of each and by Internet standards both words are used as synonyms?

Designing for the most probable scenario

A useful design is expected to serve at least 80% of the users. Good UX design is thought-out for the most probable scenario, not for all possible ones.

{:.excerpt} Good UX design is thought-out for the most probable scenario, not for all possible ones.

Changing the header is not an aesthetic decision, but a functional consideration. Form follows function.

If we look at the current header, this is how 96% of our users see it––96% have only one account––:

Old one account header

We read from top to bottom. That’s how we perceive dependencies. In the current UI we display Account over User, when User is hierarchically over Account.

The lack of color and size differences don’t help differentiate them either.

We also had a link displayed as a button: User Settings is not a button because it doesn’t trigger any action. If I’d fixed just the link, we would had ended up with an even more homogeneous menu.

Form follows function means we need to see what’s needed, how much of it is needed (bigger things look more important or higher in hierarchy in our minds), and what’s not, and then we can decide what shape it will take to make clear the concepts we want to display.

If almost everyone sees only one account, why don’t we display that account integrated with the rest of the app, with a displayed hierarchy––parents on top of children––?.

Creating two headers

I started thinking about doing only one header, but it was made to fit the content of the 4% of our users. The rest will have an extra unnecessary row. We weren’t letting 96% of our users view the best version of the app for them.

These are the two versions of the new header: the first one is shown for users with one account, and the bottom one for users with more than one account.

New one account header DNSimple New multiple account header DNSimple

Simone, CTO, asked me why don’t we follow Google design and include an Add account’ button right next to the account: that button is already easy to find and rarely used. Google and other products have an Add account very handy because their main product––or differentiation value––is having accounts. It’s also because of their constraints. Google has to display that kind of dropdown menu and account selection in one hundred places, so they decided to create the less bad option. They use a design system throughout a wide array of products. For example, because the design system must be useful for very different products, if someone wants to delete an event from the mobile calendar, they have the user tap on a dropdown menu with just the Delete option. I’m not saying we shouldn’t look at Google designs, rather that Google’s context is very different from ours.

Getting rid of the drop down menu

We shouldn’t use drop-downs for less than three or four options if we could display the options right there, or even better, in their context of usage. We should spare one step–or one click–when we can and it fits our purpose of a better user experience.

We have made this change in the past, in the Records page, changing a two item dropdown to two displayed buttons.

Dropdown to buttons DNSimple

The default will still be a two rows header. I’ve designed the third one to fit the content for the 4%, including us.

Changing colors

We don’t have a three row header anywhere. I needed to create a third row. If I’d followed our current style, the three lines would have been white.

We can show hierarchy of content using size, white space around it, color, etc.. I’ve chosen color because it also helps closing” visually the top of the page.

Chrome top using light gray

Design is made in context, not in a void. Most browsers have a light gray top bar. That means our app blended with the browser’s menu. A darker header makes it clear for the eye when does this page starts’.

Color also helps users separate the header from the rest of the page.

vignetting effect example Vignetting effect example, cc gallery wocintechchat

A darker color on top and at the end of the page tells us when the content starts, like the vignetting effect in in the picture above. Surrounding the page helps the user focus, it says Here’s where you have to look’.

The user can focus on the content OR the header because they are different colors. They will no longer be visually at the same level.

If the goal was to make the dependencies between account and user clearer, then we should highlight their hierarchy differentiation.

The third row is the same height as the others because color already displays hierarchy, we don’t need to add a size variation.

It is always a good idea to repeat sizes and angles because of consistency and vertical rhythm.

Using gradients and pop culture influence on taste

We could use a dark blue on the top row and our default blue for the second one instead of a gradient, and in fact I did in the first draft of this header update, but it would look outdated, it would look like 2010 Facebook.

We could use white and light grays–our other brand colors–, but as explained above it won’t help with dependencies. Also, this formula has been overused, with designers borrowing heavily from Apple’s successful 2007 design style.

Gradients becoming a trend several factors and don’t happen in one day. Starting a couple years ago, we begin seeing gradients and contrasted colors everywhere. Let me explain why.

It all started with Apple devices designing modal forms or pop-ups blurring images in the back instead of applying a black layer with transparency. At the same time, the CSS blur filter spread this effect to many apps and websites.

The blur effect creates interesting gradients with combinations that were supposed to be too much for the eye, like mixing bright red and bright blue. In an era where everything was white and light gray, this combination made the product using it stand out from others.

iphone and 99u using gradients iPhone(left), and 99U Adobe design conference(right)

As everyone was using this effect by the end of 2017, gradients in 2018 are turning into a softer transition. They are not as contrasted as combining red and blue.

Gradients in Sketch Gradients in Sketchapp.com

This appeared at the same time marketing campaigns are using the 90s as their aesthetics for two reasons: it is nostalgic for grown-ups who are spending money, and it’s appealing for millennials because it is old enough to idealize it. The 90s aesthetic brings us all kinds of revisited holographic materials and backgrounds. We can see this trend in fashion, hairstyles, movie posters, and of course websites.

holographic backgrounds

Another reason for using gradients is because it looks good and beauty is a usability value.

Aesthetic things are often subjectively rated as easier to use, even when no usability advantage can be objectively measure.

Universal Principles of Design, 2003, Kritina Holden et al. More on Aesthetic-Usability effect.

Very opposite color gradients are trendy now but they will look old and overused very soon. That’s why we are not using complementary colors, but a transition of analogous colors chosen from our default blue. Here you can learn more about the color wheel and the difference between complementary and analogous.

Conclusion

Not all problems can be solved looking at them with the same level of zoom. Products are alive and their features should be considered as part of a whole. As I mentioned above, design is made in context not in a void.


Post originally published in DNSimple Blog

product-design
November 6, 2018

Perspective switch, the first step towards a good UX

We tend to imagine our users based on ourselves. Well, ourselves in laboratory conditions.

Reality is messy, users get distracted. Users bookmark pages we didn’t predict. Users don’t visit your website starting from the homepage. Not anymore. Users don’t use your app as you planned, because users have a thousand other things in mind when they get to any particular form.

Stop assuming users are totally focused on their screens, with only one tab open, no music, and alone. People have cats, and coworkers, and mobile and desktop notifications.

Not to mention the diversity of technology knowledge, and the different purposes when using your product.

Help! My features have eaten my product

One common situation when developing a product for years is the Frankenstein Monster Effect, a.k.a. a product that has grown organically tends to be shaped by its features. Even the most scalable product needs to be revamped from time to time. Products grow and the context in which they were created changes with time.

To overcome this effect we need to rethink the product as a whole, and from the outside.

Changing your perspective

When you are part of a product-oriented team, you get to know how everything was built. You know the app inside out. Looking at it as a user does for the first time is no easy task. Inherited assumptions are our enemy.

Imagine these two scenarios:

A. Unlock your iPad with your finger and tap an icon.

B. Turn on your computer, enter your password, open one folder, open another folder, and open one file.

Both processes get you to the same point, but only the second one requires a previous knowledge by the user–where is that file located in the system–. That’s why iPads are so popular in our parents’ generation. They don’t need extra time to figure out how it works or how it’s built.

Our challenge is to create a product from the users perspective, even if we know what’s behind the curtain.

In the words of Peter Merholz: Our users see the user interface and everything else is magic. We spend all of our time obsessing with data and logic but users don’t care.”

The idea is to go from how do we get this feature out into the world to what are users trying to accomplish and how do we change what we are doing to anticipate that behavior.

Perspective switch in action

This is one example in that direction. The image below shows the form to add a CNAME record.

Add CName form

Could you enhance the experience in any way? Hint: try thinking from a human perspective, not the data structure.

CNAME records can be used to alias one name to another. You can redirect www.yourdomain.com to yourdomain.com. We also offer the possibility of redirecting every single subdomain that doesn’t exist to the main domain. For example whatever.yourdomain.com will show yourdomain.com.

There are two fast fixes:

Preventing errors

Even with a preview at the bottom, the most common mistake in this form is the user thinking they need to rewrite the entire domain. So people end up creating a record called www.mydomain.com.mydomain.com. Thankfully, records are easy to delete and create in DNSimple.

Avoiding the double domain error, saving user’s time and their working memory can be achieved by adding the domain at the end of the field and aligning the text to the right. The user will see the entire URL like they usually read it.

Field next to yourdomain.com

Translating to human language

We offer the possibility of adding everything-before-this.yourdomain.com. Right now, this is activated by the user writting an asterisk and a point to the field _*._. The instructions are right below the first field. It is not difficult to understand, but it’s an extra second to think and another extra second to act. Instead of writing something down, even if it’s just an asterisk, perhaps it is better to use a chekbox or radiobutton for this? It’s an ON/OFF kind of question, so it can be answered with a switch.

I’ve also changed the copy to sound more human like.

Add all as radio button

Conclusions and resources

The experience is the product. Look at your app from the user’s perspective. Put yourself in their shoes.

The goal of this perspective switch is not only offering a better experience overall, it’s also easing the learning curve and getting to a wider audience.

Resources

The experience is the product graph

Printable–black and white–the experience is the product graph


Post originally published in DNSimple Blog

product-design
June 5, 2018

Debunking 10 remote work myths

Talking with commuters (1)

I was a remote worker when working remotely was called teleworking. It was a long time ago–by Internet standards–. After years of doing several jobs, from a waitress to a cinema assistant, my first job as a designer was my first remote job. It was my last year studying Journalism and Communication Science and I already knew I didn’t want to be a journalist. At the time, I was living in Italy and the design studio I started working for was based in Spain.

We were the perfect fit. I could live wherever I wanted and they didn’t need to limit their talent search to a city. I thought this situation would become a natural evolution for many jobs.

Remote aversion is also aversion to change

I wasn’t prepared for how every commuter, including my family, saw my new way of living. Here I’ve gathered some of the most common misconceptions people have when they find out I work from wherever I want.

All of the titles below are based on real sentences people have told me over the years.

1. Oh, so you work in your pajamas”

I can, but I don’t. And you shouldn’t. Pajamas are for pros. If you want something done and it’s your second week working from home, don’t do it in your pajamas. You need to let your body know you are out of bed or you’ll start being lazy with more and more things around you. You don’t need to be all dressed up, but a shower and a change of clothes sets your brain in motion for the day.

It also comes in handy in case of a sudden video call.

2. Great! No one can tell if you are working”

When you are in an office everyone assumes you are working, even if you are not. This is not about where you work but how are you as a worker. If someone’s intention is being lazy, location doesn’t matter.

Remote relationships are based on trust. And one of the perks of working with a remote team is sharing that trust, earned through time and communication.

Work spaces in the past were designed for a very vertical leadership, which tends to be counterproductive:

Traditionally, leadership has been conceived around the idea that one person is firmly in charge” while the rest are simply followers […] Research indicates that poor-performing teams tend to be dominated by the team leader, while high-performing teams display more dispersed leadership patterns.

3. I probably couldn’t do it, I’d get distracted”

How many times you get involuntary distractions in an open-office? The main difference when you are at home is those distractions are only your fault. This is something not everyone is comfortable with. I’ve identified some of mine and modified or got rid of them.

For example, I drink one coffee, one tea, and one glass of water throughout the morning. When the glass is empty, I go for the next one. I stretch my legs, look out of the window, and prepare for the next hour-hour and a half. It’s my custom Pomodoro Technique.

4. I couldn’t do this part of my job remotely”

Some things are easier in person because we learnt to do them that way. Sometimes I need to make up a new method of doing something with a coworker just because we are not in the same location.

I adapt my workflow to my context, the same way I do with my designs and their user’s contexts.

5. Do you ever go outside?”

I remember reading this Oatmeal comic about losing social skills and thinking he was exaggerating. He is not. One day you wear your pajamas while working, the next thing you know you are not seeing or talking to anyone during days.

Depends on the time of the year, this one is tricky for me. I must confess I once stayed at my apartment for so long–maybe eight days–I went outside wearing summer clothes and it was already autumn. It was like a crazy dream in which you are naked and everyone else was wearing big coats.

6. I definitely couldn’t stay away from the fridge”

I get it. I sometimes get bored and go to the kitchen just because. I’ve set three rules for my own health:

  • Buy healthy snacks. My favourites are: fresh banana with yogurt, dehydrated mango, and homemade lemon loaf.
  • Set a snack time, and a maximum of snacks. I take one snack every morning, and one snack some afternoons.
  • Follow the outside world eating schedule, so you don’t have to adjust it when you meet your friends and family.

7. I’m sure I’d oversleep every single day”

The thing is there is no oversleeping when you work with a distributed team. If you start your day later, you’ll end it later.

It doesn’t matter that much if you don’t like to get up early, it matters when the rest of the team can count on you.

8. You‘ll never feel part of the team”

This misconception usually comes from people who tried working from home a couple of days a week in a company with no remote culture. They need to use the first half of their next day at the office catching up with coworkers about what happened during their absence.

Feeling part of the team depends on the company’s culture. It’s exactly the same as comparing two physical offices. There is more than one kind of remote teams.

9. Aren’t you tired of working remotely?”

The least thing I miss is the commute.

The last time I started working in an office, my parents told me Finally, we can relax because you have a real job”.

People easily create opinions based on their experiences, stories and context. In my experience, working remotely is what suits me best.

10. Not everyone is shaped to work remotely”

This is kind of true but not really. It takes time, but I’m convinced you can learn what working remotely means for you.

Zapier’s book about remote work list the skills to look for when hiring a remote team member: prone towards action, able to prioritize, proficient written communicator, trustworthy, and with a local support system.

If you want to be a good remoter, trying to improve one or more of those aptitudes is a good starting point for you and your future coworkers.


(1) Commuter vs. Remoter

I use the word commuters to define workers who don’t decide where they work. As opposed to remoters.

I like to think I’m witnessing the evolution of some words and their meaning through time. Teleworker sounds a little old between designers and developers but it’s still common for other not-so-fast-changing industries.

One of my favourite terms to define a remote worker is Road warrior. Or the funnily established Italian term–thanks Luca–: Smart worker.

remote
March 11, 2018

El pijama es para profesionales

Recomendaciones personales para los que trabajamos en remoto


Read Pajamas are for pros in English


👉 Tienes un nuevo trabajo (¡enhorabuena!) y puedes elegir cuándo y dónde trabajar al menos dos días a la semana.

👉 Eres el nuevo líder de un equipo que trabaja de manera distribuída.

👉 Estás trabajando como freelance y tu siguiente trabajo es para una compañía en tu ciudad en la que están abiertos a que las reuniones se hagan por videollamada.

👉 Estás en un huso horario diferente al de tus compañeros de trabajo, y estabas acostumbrado a hablar con mucha gente a diario.

👉 El coronavirus ha llegado a tu ciudad y tienes que teletrabajar por primera vez.

Hay un millón de modos en los que trabajar en remoto, sobre todo porque la mayoría de ellos nos los estamos inventando sobre la marcha. Nuestras necesidades para hacer nuestro trabajo están cambiando, e Internet nos está ayudando a poder ser cada vez más creativos con nuestros horarios y maneras de trabajar. Pero, ¿cómo evitar procrastinar sin parar?

La rutina es la mejor amiga del teletrabajo

Piensa en tí misma como si fueras el perro de Pavlov, e intenta entrenar a tu cerebro para seguir ciertas rutinas. Crear hábitos nuevos es bastante difícil si se hacen grandes cambios de golpe. Es algo más fácil si incluyes nuevas rutinas poco a poco, acostumbrándote a ellas una a una. Ajustarse al remoto lleva un poco de trabajo al principio.

Como mi cabeza no puede no pensar en el método científico, durante los últimos años he ido probando diferentes rutinas para ver cuáles me funcionan mejor.

Esta es mi lista de rutinas, por qué las sigo, y cómo pequeños detalles han influido en el equilibrio de mi vida personal y profesional.

El pijama es para profesionales 👖

Cuando te levantas, asegúrate de que tu cuerpo se ha enterado de ello.

Trabajar en pijama es super tentador, pero te arriesgas a que sea el primero de una lista larga de rutinas perezosas, y puede ser contraproducente para trabajar y para tu vida personal. Si te quedas en pijama, tienes más excusas para no salir de casa ese día.

Descubre la rutina que mejor te viene para despertarte del todo. En mi experiencia, una ducha, un cambio de ropa, y un café es lo que pone en marcha mi cerebro.

Si no estás en pijama, además estarás preparada para una videollamada inesperada.

Si es tu primera vez trabajando desde casa y tienes que meter la rutina poco a poco, intenta seguir exactamente la misma rutina que tenías cuando ibas a una oficina física, menos la parte de irte de casa. Te asegurarás el despertarte, y tendrás la sensación maravillosa de que no tienes que gastar tiempo en ir a ningún lado.

Parar de trabajar es tan difícil como empezar ⏰

Esta parte se la dedico especialmente a todos aquellos que viven solos y no tienen la referencia de los ritmos de la vida real, y a aquellos que caen fácilmente en el efecto oh-estoy-a-oscuras-cuándo-se-hizo-de-noche.

Cuando trabajas desde casa, puedes estar trabajando horas y horas. Cuando tu única distracción eres tú misma, puedes estar tan concentrada que te olvidas del resto. Algunos de mis amigos a veces incluso se olvidan de comer.

Está bien trabajar un poco de más un día, si lo necesitas. Pero intenta añadir a tu semana algunos eventos que te devuelvan a la realidad. Por ejemplo, apuntándote a unas clases de baile.

Una cosa que hago para tener un horario más sano es poner una alarma para dejar de trabajar. Como la sirena de terminar las clases en el colegio. No sólo me ayuda a tener vida por las tardes, también a estar más descansada al día siguiente.

No te olvides de descansar 💤

Cuando trabajas desde casa te cansas de diferente manera que cuando estás en una oficina: pierdes energía más lentamente, cambias tus hábitos de descanso, e incluso tendemos a pedir menos vacaciones.

Si ves que esta semana te está costando levantarte, puedes cambiar tu horario y poner el despertador una hora más tarde para estar más descansada durante las siguientes semanas. Esta flexibilidad es un arma de doble filo.

He estado en esta situación alguna vez y te das cuenta de que no es un cansancio normal’ sino agotamiento cuando estás ya agotadísimo. Siendo freelance, si decía que no ahora a un proyecto, me arriesgaba a perderlo. Así que trabajé en un proyecto tras otro sin parar durante dos años y medio, solo parando en algún fin de semana largo.

Escucha a tu cuerpo, y descansa.

Haz cosas diferentes en sitios diferentes 🍜

Elige un sitio diferente para trabajar que para hacer todo lo demás. El día que como delante del ordenador, sé que no estoy haciendo algo bien. Cambia el espacio físico donde haces las cosas.

En un escenario ideal, tendríamos todos una habitación solo para trabajar, donde estaríamos únicamente en horario de trabajo. No todo el mundo tiene una casa suficientemente grande para esto, y tu oficina en casa puede ser una mesa y una silla en el salón, o una silla en tu cocina.

No importa dónde esté (en casa, en un hotel, en la oficina de unos amigos) nunca como y trabajo en el mismo sitio. La hora de la comida sirve como también como respiro para el cerebro. Todos necesitamos un descanso, así que es mejor hacerlo oficial. Cambiar incluso sólo de silla para comer, te ayudará a tener (literalmente) otra perspectiva, a relajarte un poco antes de seguir, y a estar mejor concentrada después de comer. Son todo ventajas.

Encuentra la música que te pone en el estado mental que necesitas 🎶

Puedes incitar ciertos estados de ánimo con ayuda del sonido. Recuerdas al perro de Pavlov? Puedes traducirlo a ti misma usando música. Estos on mis niveles de concentración y la música que escucho para cada uno de ellos:

  1. Tareas diarias = Música aleatoria Escucho música mientras trabajo, y con las tareas diarias no necesito ningún tipo en específico. Es en estos momentos en los que encuentro por casualidad las canciones para los otros niveles de concentración.
  2. Tarea medio dificil = Una playlist Tiendo a escuchar las listas de canciones en loop. Durante seis meses ha sido el disco de Solange, y ahora estoy entrando en la fase en la que escucho a Janelle Monáe. He descubierto los dos discos mientras escuchaba música aleatoria, y me han ayudado a entrar en una zona de confort mental que me ayuda a resolver cosas. Esta música me transporta al equivalente en comida a tomarse una sopa cuando estás un poco enfermo.
  3. Tenía que estar hecho ayer = Una canción o silencio Tengo una lista de reproducción con solo una canción para que suena una y otra y otra vez. Sé que es un poco locura, pero a mí me funciona. He estado escuchando esa canción sin parar para concentrarme desde que la escuché en un capítulo de Fringe. A veces también uso el silencio, pero sigo poniéndome los auriculares para aislarme del ruido del mundo.

El truco de la luz 💡

Hace un tiempo, vivía en un apartamento muy pequeño en el centro de una ciudad muy grande. Dentro no era tan luminoso como me hubiera gustado, pero era la primera vez que vivía sola, así que estaba encantada con ello.

Cada vez que empezaba a trabajar encendía una pequeña lámpara de los años cincuenta. Trabajaba en la mesa más estrecha de ikea, y usaba la lámpara para no tener solo la luz de la pantalla delante. Cada vez que me sentaba a trabajar, click, lámpara encendida.

Después de hacer esto durante semanas, y a pesar de mis problemas de insomnio, encender esa lámpara me ayudaba a concentrarme. Sin saberlo, me había condicionado a ello como en un experimento.

Ya casi nunca uso este truco porque ahora vivo en una casa más luminosa. Pero aún tengo la lámpara al lado de mi sitio de trabajo.

Queda con gente 👯

Si piensas que tienes que ver a una persona a la semana, mejor queda con dos. Siempre que puedas, añade un evento social a lo que piensas que necesitas en tus planes semanales.

Cuando trabajas en una oficina física estás rodeada de gente todo el rato. Ves a un vecino al salir de casa, en el camino a la oficina, en la oficina. Esa es una de las razones por las que es siempre buena idea trabajar un par de meses al año o dos días a la semana en un espacio de coworking. Porque todos esos hábitos sociales que en una oficina salen de manera natural, se pierden poco a poco cuando te quedas en casa.

Tendemos a pensar que este tipo de habilidades sociales están ahí para siempre. Pero piensa en algún idioma que hayas aprendido hace un tiempo, o en alguna asignatura que aprendiste en el colegio. Si no lo practicas, tu cerebro deja de recordarlo y ocupa ese espacio con otras cosas.

Igual no estás en tu ciudad, o tus amigos están muy ocupados durante la semana. Intenta entonces practicar alguna actividad social, como deportes, o aprender idiomas. Los eventos relacionados con tu trabajo también son una buena idea para conocer a gente y socializar.

Mira por la ventana 🖼

Cuando todo lo que ves, escuchas, lees, escribes, y toda la gente con la que te relacionas están en la misma pantalla, ésta se convierte en tu zona de confort. Llegarás hasta a desayunar delante de ella, y olvidar que el mundo exterior también es un lugar confortable.

Inspira y mira por la ventana durante los descansos de tu jornada laboral. Te ayudará a no perder la perspectiva.

👖 + ⏰ + 💤 + 🍜 + 🎶 + 💡 + 👯 + 🖼 = 💻 🔝

remote ES
March 10, 2018

Cómo funciona la comunicación cuando trabajamos en remoto

Si no está documentado, nunca pasó

cc gallery flickr.com/photos/wocintechchat/


How remote communication works, English version


Para ser fiable en remoto: sigue tu propio horario

Una de las ventajas de trabajar en remoto es que normalmente va acompañado de poder elegir tu propio horario. Esto no es tan fácil como suena. Tus horas trabajando afectan directamente a la comunicación con tu equipo o tu cliente.

Elige las horas que mejor te vengan, y repite tu propio horario diariamente. Cuéntale a tus compañeros cuándo vas a estar disponible para que todo el mundo sepa cuándo se puede contar contigo y cuándo no. Una rutina es la mejor amiga de toda persona que teletrabaja.

Imagina estos dos escenarios: 👉 Una persona A que trabajó 10 horas el lunes, 2 el martes, ninguna el miércoles, y 12 horas el jueves y el viernes. Y cada día empezó a trabajar a una hora diferente.

👉 Una persona B que trabaja de lunes a viernes las mismas seis horas y media, siempre trabaja desde la 1 de la tarde y hasta las siete y media.

Imagina que has trabajado con ambas persons en el pasado. A y B son igualmente buenas en su trabajo. A quién volverías a contratar? Solo vas a confiar en encontrar a una hora concreta a una de ellas. No es que no te fíes de A, sino que B no te hará pensar en cuándo puedes encontrarle y cuando no.

Completa tus mensajes en remoto y ahórrale tiempo a todos

La comunicación en remoto es a menudo asíncronica, es decir, puede ocurrir que los interlocutores no estén conectados al mismo tiempo. Para mí, trabajar con gente que vive en otros husos horarios y otras partes del mundo es parte de la belleza de trabajar en remoto.

Aprende nuevas maneras de interrumpir menos a tus compañeros.

Si tienes una pregunta, primero intenta encontrar la respuesta en internet o en la documentación interna de la compañía. Pasarás el mismo tiempo esperando la respuesta que buscándolo tú mismo, pero no gastarás el tiempo de otros. Si no encuentras la respuesta, entonces pregúntale directamente a la persona encargada de esa decisión.

In tenta imaginarte la conversación completa y ofrece una lista de opciones concretas a tu interlocutor.

Si, por ejemplo, tienes que crear una reunión con Sara en el calendario, tendréis que estar de acuerdo en la hora, el día, el sitio de la reunión, el formato (por chat, por videollamada). Pero resulta que Sara vive a siete horas de ti, y vuestros horarios difícilmente se solapan.

Proponer una reunión

👎 ¡Hola, Sara! Me gustaría contarte algo sobre el proyecto del sistema de diseño. Cuándo estarás disponible?

👍 ¡Hola, Sara! Me gustaría que priorizáramos los próximos tres meses en el proyecto del sistema de diseño. Podríamos hablar de ello el martes a mis 5 de la tarde, tus 12 de la mañana? Creo que no nos llevará más de 30 minutos.

El segundo ejemplo se puede añadir al calendario en ese mismo momento. Si Sara es igual de eficiente que tú, aceptará y creará el evento en el calendario de las dos, porque ella ya tiene la información de cuándo tú estarás disponible.

Las listas de tareas en remoto: no dejes que una pregunta sin responder impida seguir con tu día.

Normalmente tengo una lista escrita con todas las preguntas y comentarios que surgen durante el día y las mando todas a la vez en una lista cerrada. Cuando tus compañeros de trabajo estén concentrados en responder cosas, podrán hacerlo con todas a la vez. No hará falta interrumpir a tus compañeros cada vez que te surja algo. Estar concentrado no es una tarea fácil, ni para ti ni para ellos.

Cuando estés planeando tu día, ten en cuenta que surgirán preguntas durante dicho plan. Ten un plan B preparado para esos casos, con una lista de tareas que no dependa de terceros para realizarse.

En mi caso, normalmente tengo un listado con grandes cosas que necesitan ser pensadas durante un tiempo, y una lista con pequeñas tareas que no dependen de nadie o no tienen una fecha y una hora en la que tienen que estar hechas.

Ya que estás aquí, añade documentación’ a tu lista.

Documentar es clave para todo equipo que trabaje en remoto

Escribe las decisiones tomadas en los proyectos en los que estás, apunta los planes para cada cosa. Evitarás pasar dos o tres meses después por exactamente la misma conversación.

Conlleva un poco de tiempo acostumbrarse, pero a la larga merece la pena. Guarda la información en algún lugar en el que sea fácil buscarla después.

En un mundo ideal todos los del equipo tendréis la misma forma de catalogar la información, por ejemplo, con las notas tomadas durante una reunión.

A veces sabes el contexto o los por qués de cada detalle de un proyecto en el que has estado trabajando un tiempo, pero no puedes asumir que todos tienen toda esa información cuando argumentan sus decisiones. Esta es una de las mejores razones para documentar cosas, que cualquiera puede entrar y salir de un proyecto y ponerse al día rápidamente.

La ironía no funciona en remoto

Cuando trabajas en remoto, las palabras que eliges, tu tono, lo a menudo que hablas, y otros aspectos de tu comunicación le dan forma a la imagen que otros tienen de ti

Evita el uso de la ironía o del doble sentido. Los textos escritos no tienen entonación. Estarás pensando ¡obvio!’ pero no todo el mundo lo recuerda. Los tweets, por ejemplo, son malinterpretados muy a menudo.

Este estudio sobre el uso de la ironía en Twitter muestra cómo la ironía sólo la detectan las personas que han visto a la persona poner opiniones contrarias a lo escrito.

La ironía en remoto solo funciona si el otro te conoce bien.

Los emojis son tus expresiones en el remoto

Los gestos y microexpresiones no existen cuando tu comunicación es, sobre todo, escrita. Y, solo existirán en la mente de otros, si lo expresas implícitamente.

El cómo otros nos perciben está ligado directamente a lo que compartimos con ellos. No hace falta que compartas todo lo que haces, pero no te olvides de mostrar que eres persona por encima de trabajadora.

Uno de mis lemas para la comunicación en remoto es: Cada vez que alguien cuente algo que no tiene que ver con el trabajo, reacciona. Es decir: cada imagen de un gatito necesita su emoji de ojos con estrellas.

Los emojis y los GIFs animados ayudan a formar tu imagen más allá de la pantall, y son una forma perfecta de hacerle saber a tus compañeros que tienes interés en lo que cuentan, y contar tus propios intereses.


Resumen: Seis consejos para la comunicación en remoto

  1. Fiarse en remoto: sigue tu propio horario.
  2. La comunicación en remoto no es siempre instantánea
  3. Interrumpe a otros como te gustaría que te interrumpierana a ti.
  4. Documenta, documenta, documenta.
  5. Tu imagen depende de cómo te expresas. Evita malentendidos.
  6. Recuerda usar emojis 🐱 + 🤩
remote ES
April 20, 2017

Case Study: RoomManager

After six months redesigning every aspect of PosterDigital, a ten-year-old software to control digital signage screens, it was time to create a new product

Main Goal

Creating a plug-and-play service for offices improving the communication and management of meeting rooms attached to the calendar software already in use.

Contexts of Use

Someone with limited technical skills has to be able to set up the system on his or her first try: connect the screens and link the calendar solution they use with PosterDigital management software.

Someone in need of a meeting room is looking for one available.

Someone busy, who walks by about to attend a meeting, must find the useful information he or she is looking for and understand it in less than a minute:

  • When does the meeting start?
  • How long is it?
  • Who set it up?
  • What is it about?
  • Will any other meeting take place afterwards?

Needs

Setting up the system had to be plug-and-play as the user in charge of it would ideally connect screens and calendars just once. Also, the user could be not technically proficient.

Design must be responsive because small digital signage screens come in different resolutions and ratios.

All the UI elements should work both in touch and no-touch screens as clients will buy their own screen solutions.

Restrictions

The underlying software solution was an adaptation of the existing PosterDigital management software for big screens–see the picture above–, not and ad hoc development.

The user’s attention must be divided among two screens at once. Binding the screens to the system had to be done directly on them, not from PosterDigital management software.

Connecting calendars happens on a new window, provided by the calendar service. It was important to catch back the user’s attention.

A single linking process design for calendar software solutions had to work with Google Calendar, Microsoft Exchange and Lotus Notes.

Time: 3 weeks.

Hierarchy

Meetings have several information elements attached to it: What time does it start? How long it is? What is it about? Who’s the organizer? Who are the attendees? Given the contexts of use stated before, I realised this was too much information to be read at a glance.

I decided to design an information hierarchy for three different reading distances–with their attention spans–.

I used a two color scheme to tell the availabity of the rooms. At a distance, without even being able to read properly, the user is able to know which room is free and which one is not. As this product had to be released for any kind of office setting, the colors were subtle and easy to integrate in any environment, but also different enough to be easily distinguished.

The user who gets closer to a–grey background–busy room is looking for a meeting he has to attend. The subject of the meeting is the first readable thing.

The user who gets closer to a–green background–available room is looking to occupy a free room for a meeting that just came up. The bigger piece of information after Available’ is until what time is it available.

What time is it, the name of the room, who is organizing the meeting, etc. are shown in smaller text body so it doesn’t add noise in the aforementioned situations and are only meaningful for those who actively choose to read it.

Onboarding

PosterDigital is a vast platform with lots of features to cover a wide range of usage scenarios with multiple variables. Deciding which pieces would be included in RoomManager was not a small feat.

RoomManager administration was thought to be used just once. I decided the process would be a step-by-step onboarding for the entire set up:

  • Bind the screens
  • Link the administration platform to a calendar solution
  • Link screens to calendars–rooms–
  • Schedule all the screens at once
  • Upload the company logo

The onboarding was tricky because things happen elsewhere twice: The binding of the screens has to be done on the screens themselves, and linking the calendar solution has to be done via its software provider own process. This forced me to build an onboarding process with two exit points on where grab the user’s attention back.

RoomManager onboarding process was so useful I was asked to design an extended version for PosterDigital’s platform.

White background

More than half of the screen background would change color depending on the availability of the room.

Companies usually have their logo on a JPG or other graphic file over white background.

Placing the company logo over the white background area of the screen eases the task as not every company has its logo with transparent background.

Touchscreen

Every single information likely to be edited in the future must be big enough for the average fingerprint. That was not a fixed size, as RoomManager is compatible with almost every screen in the market. Everything was built with relative size units.

Cutting developing time

With two screens being used simultaneously during the binding process, the user’s divided attention would be both on the digital signage screen being binded and on the computer one.

As we already had PosterDigital’s set up video tutorials by brand on YouTube, my original design was to detect the brand of the screen being binded and embed the suitable video tutorial accordingly on the computer screen during the on boarding process.

This was a good idea but it would have taken too much development time. Not being part of the core product I changed it to a picture of PosterDigital standard set up video tutorial and link it to theYouTube channel containing all of them instead.

RoomManager in Real Life

RoomManager at the office

Tecnilogica by Accenture offices uses RoomManager for managing its meeting rooms.

RoomManager adaptation for hotel event rooms

The purpose of RoomManager Hospitality was including commercials between events and having different templates for three different kindS of events. The biggest challenge was creating a schedule including an indeterminate number of rooms and show the kind of event taking place.

RoomManager Directory Screens

Directory Screens are portrait big screens with the information of all the rooms in the area. I added a customization for sign posting the rooms direction on the onboarding.

The picture on the right shows the first functional test.

RoomManager promotional material

I adapted the online promotional content to brochures, videos and a stand for the ISE–Integrated System Europe–, the world’s largest AV and systems integration show.

product-design