June 5, 2019

Pajamas are for pros

Personal tips for remote workers

👉 You just got a new job — congrats!— and you can choose when and where to work at least two days a week.

👉 You are the new manager of a remote team. You had done this job before but only in person.

👉 You are freelancing, the next project is for a company in your city and they are open to have meetings using a video calls.

👉 You are now in a different time zone than your coworkers. You are used to talk with a lot of people daily.

There are a thousand configurations of remote jobs, mostly because we are creating them on the fly. Our needs are changing and Internet is helping us being creative with our schedules. How can you avoid becoming a serial procrastinator?

Routine is a remoter’s best friend

Think of yourself as Pavlov’s dog, and train your brain to follow some simple routines. Creating new habits or modifying old ones isn’t easy. Try to include new routines little by little to not overwhelm yourself. It takes time to readjust but it can be done.

Being a scientific-method-holic, I tried different routines to measure my productivity as a remote worker.

These are my routines, why I follow them, and how details have impacted my productivity and personal-professional balance.

Pajamas are for pros 👖

When you wake up, make sure you’ve really woken up.

I know working in your pajamas is tempting, but you risk accumulating a list of lazy new habits, which can be counterproductive for your daily work and your personal life. Find your own waking up routine. From my experience, a shower and a change of clothes set your brain in motion for the day.

It also comes in handy to be prepared for a video call.

If it’s your first time working from home, try following your commuter routine except for the commuting part. You’ll have the cozy feeling you don’t need to waste time on the road anymore.

Stopping to work is harder than getting started ⏰

This is a special call for those who live alone and don’t have a real world schedule reference, or those who had easily fallen in the when-did-it-get-so-dark-in-the-room wormhole.

When you work from home you can be working for hours. When your only distractions are your own, you get focused and you can forget everything else. Some of my friends get so focused they skip meals.

It’s OK to work overtime once in a while before a deadline. Add a little real life event here and there so you don’t forget about it. A good habit is setting a schedule — and an alarm, if you need it — and following it, which also helps your remote reliability.

Don’t forget to rest 💤

When you work from home you get tired differently than when you work in an office. You lose your energy slower and you can change your resting habits, even not getting enough holidays.

Your usual red alerts are different now. For example, if you see yourself being lazier than usual you can change your schedule to start an hour later and solve that for a while.

I’ve been in this situation and realized it when I was already burnt out. As a freelance if I say not now to a project I risk losing it. So at some point I chained project after project for two years and a half with no more than a couple of long weekends off.

Different locations for different activities 🍜

Establish a different location for work and for everything else. Physically separate your work space.

The ideal scenario is to have a room just for work, where you are only during work hours. But space constraints can make your home office a table and a chair, or just a chair.

No matter where I am, at home, a hotel, a friend’s house, an office, I never eat in the same space I work. Having lunch is my resting time, everyone needs a break, it’s better to make it a habit. Even changing the chair arrangement — literally having a new perspective— helps your brain rest for a while. Taking physical distance while having lunch helps you focus on your job after lunch. It’s a win-win situation.

Find personal music-mindset patterns 🎶

You can trigger a certain mindset with sound. Remember Pavlov’s dog and apply it to music. These are my focusing levels:

  1. Everyday tasks = Random music I listen to music while working. With everyday tasks I don’t need to listen to anything in particular. By trial and error, this is where I discover good focusing music for the other focusing levels.
  2. Kind of difficult task = One playlist I tend to listen to one album in loop. For six months it has been Solange’s, and now I’m in a Janelle Monáe phase. I discovered both while listening to random music, and they have helped me feel in a mental comfort zone to relax when solving difficult tasks. This is the equivalent of having a soup when you feel a little under the weather.
  3. Deadline is yesterday = One song or silence I have a playlist with a single song to play in loop. Yes, it’s crazy but it works for me. I’ve been listening to that song in loop to focus since I heard it in a Fringe episode. I also use silence as a concentration tool, but I need to be using my headphones to isolate myself.

The lamp trick 💡

A while ago I had a tiny apartment in the middle of a big city. It was less bright than I would have liked, but it was the first time I lived alone and I loved it. I worked at the tiniest table with a 50s lamp on it. The table was in the shadows and I used the lamp to see further than my screen reflection. Every time I seated to work I turned on the light. After a while, I had sleeping problems and turning on the light kept me focus during work hours. Unknowingly, I had conditioned myself to a new stimulus.

I rarely use this trick anymore because I live in a brighter house now. I still have the lamp though.

Meet with people 👯

If you think you need to meet people once a week, do it twice a week. I always add an extra social event to my weekly plans.

When you work in an office, you are surrounded by coworkers. You get to see people on your way there and your way back. That’s one of the reasons it is a good idea to work in a co-working space a couple of months a year, because we learn habits the same way we lose them.

We tend to think basic skills are there forever. Think about a language you learnt a while ago, or a middle school subject you were good at. If you don’t practice it your brain uses that space for something else. Don’t underestimate your ability to losing basic skills such as socializing.

Maybe you aren’t in your country or your friends are busy. Try a social hobby like practicing a sport or learning a new language. Events related to your discipline is also a good idea because you get to know your peers.

Look out of the window 🖼

When everything you watch, listen, read, write, and everyone you talk to are in one screen, this screen is your new comfort zone. You’ll have breakfast in front of it, and you’ll forget the outside world is comfortable too.

Breathe in and look out the window during breaks. You‘ll remain grounded.

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


Post originally published in Medium

remote
June 4, 2019

How remote communication works

If it isn’t documented it didn’t happen.

cc gallery flickr.com/photos/wocintechchat/

Remote reliability: Follow your own schedule

One of the perks of working remotely is creating your own schedule. This is no easy task because your work hours affect your communication with the rest of the team–or client.

Choose your favourite hours range and stick to it for a while. Tell your coworkers what’s going to be your availability beforehand, so everyone knows when they can count on you. Routine is a remote worker’s best friend.

Think about these two scenarios:

👉 Remoter A worked 10 hours on Monday, 2 hours on Tuesday, no hours on Wednesday and 12 hours on Thursday and Friday. Each day started at a different hour.

👉 Remoter B worked six and a half hours from Monday to Friday, from their local 1PM to 7:30PM.

You had hired both in the past. A and B are equally qualified for the craft. Who would you hire again? For starters, only one of them can be easily traceable. Is not that you can’t trust Remoter A, it is more about reliability: If I connect at 2PM I’m sure remote B will be there.

Manage your remote conversations and save everyone’s time

Remote communication is asynchronous. Working with people located in other time zones is part of the beauty.

Teach yourself new ways to interrupt others less.

If you have a question, try finding the answer on the Internet or company documentation. You’ll spend the same amount of time than waiting for an answer, but you won’t spend somebody else’s time. Of course, if you can’t find it, ask directly to the person in charge of that decision.

Try to imagine the entire conversation and display a closed list of options to your interlocutor.

Let’s say you need to schedule a meeting with Sarah. You both need to agree on a day, an hour, a channel. Sarah lives seven hours away and your schedules rarely overlap.

Scheduling a meeting

👎 Hello Sarah. I need to talk to you about the design system project. When will you be available?

👍 Hello, Sarah. We need to prioritize the next three months task list for the design system project. Could you talk about it on Monday or Tuesday, at my 5PM, your 10AM? I think it will take around 30 minutes.

The latter can be scheduled right away. If Sarah is equally efficient, she’d agree and add the meeting to the team calendar right away, as she already knows your availability.

Remote to-do lists: don’t stop your workflow because you don’t have an answer right away I usually write all the questions and comments I have during the day and send them all together in a single list. When your colleagues are in answering mode they can answer everything at once. Don’t interrupt anyone unless necessary. Being focused isn’t a constant.

When planning your day, have in mind you may encounter some questions. Have a Plan B to-do list and you won’t depend on someone else’s feedback to be productive. I usually have a list of big brainy things and a list of small tasks for this kind of situations. Add documenting to your list.

Documenting is key for remote teams

Write down, register and catalog whatever you are doing and reasoning. It takes a little time at first but saves you thinking about the same thing twice. Make the information retrievable for you and everyone on the team. Make sure everyone on the team share the same cataloging method.

Sometimes you know the context and premiss of your projects because you have been working on it for a while. Don’t assume everyone else have the same amount of information. That’s one of the good things of regularly document your work. You can get back to your own thoughts and reasoning in case you need them again.

Remote irony doesn’t work

Communication shapes your persona when working remotely: chosen words, tone, regularity, etc.

Avoid using irony or double meaning sentences. Written text doesn’t have intonation. I know you are thinking d’oh!”. It is obvious but not everyone remembers it. Tweets are constantly misinterpreted. This study about irony in Twitter shows how you can only detect irony if the user has previously tweet the opposite opinion.

Remote irony only works if the other person knows you very well.

Emojis are your remote face

Gestures and micro expressions don’t exist for others unless you tell them they happened. If a tree falls in a forest and no one is around to hear it, does it make a sound?

How others perceive us is directly linked to what we share with them. There is no need of sharing everything you do, but don’t forget to be a person.

One of my mottos for remote communication is: Let others know how you reacted to non-work-related issues. In other words: every cat picture needs its heart-eye emoji.

Emojis or animated GIFs are perfect to acknowledge others’ interests and display your own. They help shape your character.


Summary: Six tips for remote communication

  1. Choose a schedule and stick to it. Be reliable. Even when freelancing, you are not alone in the world.
  2. Remote communication is asynchronous.
  3. Interrupt others the way you’d like to be interrupted.
  4. Document, document, document.
  5. Your remote persona is shaped by your communication. Avoid being misinterpreted.
  6. If you are happy and you know it 👏

Post originally published in Medium

remote
June 3, 2019

Maintaining sanity and social skills when working remotely

The need of an artificial water cooler experience

Photo by Dan Gold

Working remotely is my default status, and even I forget sometimes to interact with humans in real life.

I once started a job where I was going almost everyday to a physical office after six years of working only remotely. First five days in, on Friday afternoon, my voice got hoarse. Five days of good mornings and a hundred questions had made my voice vanish for the weekend.

To be fair, I hadn’t enjoyed a lot of social life for almost a year for medical reasons. Nevertheless, I decided I would take more care of my social skills in the future.

This is my personal reminder to never stop training my social muscle.

The artificial water cooler experience

When you work in an office, you take for granted lots of everyday things. If you drive there or use public transportation, you’ll look at some other person’s eyes, navigate the space to avoid crushing, and eventually have to talk to somebody.

Discussing projects at meetings, going for a coffee with a coworker, standing by the water cooler or just getting to the office and say Good morning makes you interact with your peers and exercise your social skills.

Although speaking with others is the most visible way of social interaction, there are automatic actions that are also forgettable social skills: waking up in the morning, taking a shower, getting dressed, not farting in public, covering your mouth when you sneeze, etc. is part of any functional social being.

It’s all part of those natural habits you think you won’t forget. But, as shown in this tweet by Tyler Feder, the freedom of working remotely in any clothes you want is also a chance to abandon yourself to the wearing-whatever-is-clean circle.

If you think you need to meet one person a week, make it two

Having freedom of schedule could mean you will meet with friends or family almost whenever you want, because it isn’t constraint by a strict work schedule anymore.

This is one of the tricky parts of working remotely. Almost everything needs to be decided by you and only you: location, schedule, meals, meeting friends, meeting family, physical activity, etc.

One of the things I mentioned in the post about my personal tips for remote workers is to meet with more people that you think you need.

We underestimate how much our social skills are constantly trained at a physical office. Some remoters like to work in co-working spaces because of this. Unlike commuters, remoters need to also decide this. What co-working space do I like?, do I like where it’s located?, can the activities —including noise — in this co-working office fit with the way I work?

Set up a schedule in sync with your peers

Creating a schedule similar to the city you live in makes it easier to meet with others or attend all kind of events.

I meet with friends for lunch two or three times a week. The rest of the week I eat at a similar hour so the day I meet with them I’m not that hungry I can’t listen to what they are saying.

Being aware of the importance of exercising your social muscle is the first step for a good social life.

After being given the freedom of choosing your working hours, it’s normal to experiment with a different schedule to the normative office one. I sometimes wake up super early because of insomnia. Those days I adapt my schedule to my needs and start and stop working at earlier hours. Being aware of the importance of exercising your social muscle is the first step for a good social life.

Once you have chosen fitting social routines for you, you can skip them whenever you need. Test your social needs for a month and iterate over the results.

Being productive welcoming silly puns

During my last job interview I described myself as a remote worker who manage my schedule and save other’s time. I’m used to effective asynchronous communication. The thing I disliked the most about open space offices is that you could be interrupted at any time and not everyone had an urgent matter to discuss. I think others’ time and lives are as important as mine and asynchronous communication works better when you communicate only really important things.

Even if we joked about things sometimes, I’m now working with people who think exactly that, which is great. Conversations are short and highly productive. It was great for a few months, but alas a new coworker came in and spread cat pictures all over Slack. 😻

That little gesture suddenly created more personal than job related conversations twice a week. After months of really productive conversations mixed rarely with silly puns I realized I missed relaxed talks with my interesting coworkers. Something I only experienced when we met each other in person.

Photo by Dario Valenzuela

Since then I’ve learnt of some remote friendly companies that have a Slack channel only dedicated to non job related conversations.

It was interesting how a couple of cat pictures a week enhanced the artificial water cooler experience. Conversations about small things randomly pop up more and more. Maybe I was the only one feeling that productivity was the only goal, maybe I was being too Leslie Knope. I’ve seen the importance of a silly pun and I now share more personal conversations privately and in public with the rest of the team.

Meeting whomever you want

Actively socializing when working remotely takes effort, isolating yourself doesn’t.

When your social interactions during the week are limited to one office bubble, you talk only with your coworkers. This is not a bad thing per se. I like chatting with my coworkers and do it happily every week. But I also like being in touch with people chosen by me.

Choosing who to meet, where to meet them, and what for — a coffee? lunch?— , takes time and effort at first. As with your schedule or your productivity, when working remotely you decide how many people you meet or who you meet. The freedom of choosing who to talk to is also the action of deciding not to isolate yourself.

Actively socializing when working remotely takes effort, isolating yourself doesn’t.

Not all social activities need to be done with people you know. Maybe you want to expand your circle, maybe you are in a new place. Here are ten social activities I like to do:

  • 👭 Meeting with friends, family, or other peers to have lunch.
  • 👩‍💻 Meeting with other remoters to work together.
  • 📆 Attend events related to my job: good to meet new peers and get a hold of the pulse of your profession in your area.
  • 🖌 Going to events unrelated to my job: good for changing your conversations once in a while.
  • ☕️ Working from a café, or the office of a friend.
  • 🍜 I sometimes share an hour with someone outside my bubble. I write an email to an interesting person who I’ve met, for example, at an event, to have lunch near their office.
  • 🏃‍♀ Exercise classes: also good for your body.
  • 🧘 Yoga class: perfect for introverts, as you don’t need to talk with anyone.
  • 🍯 Have a social hobby: better without screens, like pottery or archery.
  • 🚶‍♀The easiest and cheapest one: Going for a walk. Walking with no goal, losing yourself in your area is one of the key points to abandon the crazy multitasking life, as described in the book On Doing Nothing. As with any other routine, it takes a bit of time and effort at first. Hopefully, after a couple of months, you’ll get used to getting together with who you really want to see.

( Happy socializing! )

 /

🙋

remote
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
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