Increase your chance of success by understanding the differences first

The process of switching roles is frightening and exciting. You’ve considered doing it yourself, but never quite got there. To remove the confusion and help you decide, let’s explore some of the important differences between these two roles. Make sure to read until the end.

Note: In this article, the term Product Designer is used to refer to the role of the designer working on digital products, not to the role of the designer working on physical products also known as Industrial Designer.

Trivial titles, great disarray

Why is there confusion surrounding these two titles? Here are some potential reasons:

• A weird demand and supply problem. Recruiters have a shallow understanding of what they are looking for and designers of what skills they offer. The classic “we’re looking for a creative person to join our team” that no one questions, only adapt to.
• While the role of a designer is not new, many companies are just now integrating them into their teams. This means design expertise and domain knowledge often start from scratch.
• Design roles are vague in companies with immature design cultures. This results in dissimilarities between roles in the market.

How did we get into this awkward situation?

1. The old view that “design titles don’t matter, all designers do basically the same thing” is still around but never actually did anyone any good – It’s time to move past it. Skills are shared between roles, but that doesn’t mean all roles are identical. For example, visual design skills are a must for graphic designers, production designers, UI designers, and Product Designers alike.
2. The preferred coping mechanism to deal with the confusion is following “the trends”. It’s easier to swap “UX” with “Product” on LinkedIn and call it a day.
3. Today’s design community is dominated by design influencers who sacrifice accuracy and honesty for clicks, validation, and sponsorships. Because of this, it’s difficult to know what’s true and what’s a marketing ploy, especially for newbies.

The other day I heard someone using the term UX Product Designer in a video with 50k views where they were explaining how design collaborates with engineering. I left more confused than enlightened.

How did two roles with similar responsibilities come to be?

Here’s the short answer…

Software companies began to figure out how to generate value and monetize it predictably. As a result, some naturally evolved into product companies. These companies soon realized usability and aesthetics are a competitive advantage and vital aspects of their software’s success. By further investing in design thinking, they discovered multiple ways design can enrich their business. Because of this, the scope of what we call “elegant problem solving” had to evolve as well.

Designers
The main concerns of designers in the golden era of digital design were usability and defining better interaction models, amongst other things. However, these became less the core of our work as we entered the era of products and began tackling a new set of challenges.

Environments
Today, there is also a clear distinction between product companies and other software-developing companies (outsourcing, enterprise, agencies, etc.). While working for the latter requires a similar understanding of design principles and similar responsibilities, there’s a clear difference in the way these companies operate (how they make money specifically). This has a direct influence on us as designers and it shapes us in our role.

A short comparison between the two roles

Although there are no official definitions, there are some notable differences between Product and UX. As a result of having held both roles for a number of years, I observed the following:

User Experience Designers

• The pillars of their role are Research, Prototyping, and Usability Testing.
• They work under the constraints of a Project Manager or client, sometimes receiving a requirements brief.
• They drive various user research techniques like user interviews or conducting simple quantitative analyses themselves.
• Consider shipping a usable (and enjoyable) experience as the key indicator for success.
• Have a narrower and more specialized role.

Product Designers

• The pillars of their role are Product Thinking, Interaction Design, and Visual Design.
• They work closely with Product Managers to identify, understand, and clarify the opportunity space.
• They work closely with User Researchers, Data Scientists, and Content Strategists to discover and define the solution space.
• Consider impact as one of the key indicators for success.
• Have a broad and more strategic role.

The most important concepts in Product Design you need to master

Because the Product Designer role is newer than the User Experience one, it’s important to understand how it is different. To do this, here’s a list of concepts designers working in Product should be familiar with — this is by no means an exhaustive list:

• Product Mission, Vision, Strategy, and Tactics — and the distinctions between them.
• Product Thinking — what makes a product useful and loved by people. Understanding the set of motivations and expectations the market has, while conceiving solutions, simulating their effects, and picking a path based on the predictions of these effects.

This implies having a good understanding of the market, the people, the product itself and how they interact with one another.

• The problem, opportunity, and solution spaces and the relationships between them.
• Understanding the difference between customers and users.
• Outcome in favor of output — how designing for what matters is more important than delivering a large number of design artifacts.
• Impact at scale and the levers of product growth.
• Jobs to be done — thinking in terms of products rather than individual features while considering people’s functional, social, and emotional needs.
• Customer funnel models — everything from traffic sources to TOFU, MOFU, BOFU, to re-engagement paths. AARRR! or “Pirate Metrics” — is probably one of the most practical ones and the easiest to remember.
• Monetization models.

Answering the initial question — which is the right choice?

Staying competitive in the market as a designer gets harder every year. We get new tools, new processes, new concepts, and new industries to design for. But these only expand the already vast possibilities and opportunities we have now.

Designer skills are still very sought after, regardless of which formula they come in. We can thrive regardless of our role, so you don’t have to become a Product Designer to be successful.

Thanks for reading! Since you made it this far, I’ll introduce myself.

My name is Emanuel Serbanoiu and I’m a Product Designer at Meta.

If you feel like talking, or connecting you can follow me on Twitter and LinkedIn.

Special thanks to David Teodorescu and Peter White, you’re the best 🙌

UX or Product Design — which one should you pick? was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Some of us designers like building systems. We think things through and we pay attention to details. We make sure things work and we always ;) cater to our users. But when we design, we have this fantastic idea that everybody will behave in the same perfect way when interacting with our system.

You go here, swipe that, press this and voila. You purchased your thing!

Then, we user-test our system and observe how it is actually used. We correct and adjust and test it again only to find out users will still use it based on their perception and not our plan. And deviating from the ideal cases always will come with unpredictability, untreated edge cases, and errors.

It is hard for some of us designers to accept that it is actually impossible to design a system that isn’t susceptible to human error. Everybody makes mistakes. Even our users!

Human error is still a primary cause contributing factor in disasters and accidents in industries as diverse as medicine, nuclear power or space exploration.

Let’s go over the types of errors we make, what causes them, what are the strategies for correcting errors and last but not least how to design for errors.

Disclaimer: the term system is used loosely to describe digital products, flows, actual systems, etc.

How many types of error are there?

As someone who studied human error as close as possible, James Reason, Professor Emeritus at the University of Manchester, divided human errors into two categories: Slips and Mistakes.

Slips — when the intention and the action don’t match

• Action-based slips: You unlock your phone to call mom but because of conditioning, you jump on Instagram instead.
• Memory lapse slips: You forget your keys hanging in the door lock when you leave home.

Mistakes — when the goal and the outcome of the actions are wrongly evaluated

• Rule-based mistakes: The doctor interprets an illness correctly but prescribes the wrong medication.
• Knowledge-based mistakes: You frantically press the enter button when the computer is stuck, wrongly assuming it will unblock the computer.
• Memory-lapse mistakes: You forget to finish the task in progress because you got distracted and carried away by an Instagram notification.

To remember:

Most everyday errors are slips. Slips are the result of automatic, subconscious processes. You plan to take one action and you find yourself taking another.

Mistakes are sometimes referred to as errors of intention or errors of planning and they result from conscious deliberation. You plan to achieve something but consciously take the wrong steps.

When researching for this article, I found this PDF published on UK’s Health and Safety Executive website with more examples and details.

Why do errors happen?

That’s right, you guessed, human errors happen for many reasons. 🙋🏻‍♂️

Selected from the large pool of contributing factors, here are the most influential ones:

1. Decision-making biases
2. Working under stress
3. Working under un-natural conditions

Let’s briefly zoom in a bit on each of these.

1. Decision-making biases

For the purpose of this section, I selected three of the most common biases that influence human error so you can make an idea of what they entail:

• The focusing effect: which is our tendency to place too much importance on one aspect of an event. Tunnel vision might sound more familiar ;)
• Illusory correlation: when people inaccurately perceive a relationship between two unrelated events.
• Automation bias: the tendency to depend excessively on automated systems which can lead to erroneous automated information overriding correct decisions.

Of course, as humans, we are predisposed to a huge number of biases. There is a huge list on Wikipedia where you can find more.

If I would to give you some advice, at the beginning of your project, you should create a list of biases you assume will influence your users’ decisions and validate or invalidate them during user-testing.

2. Working under stress

The Yerkes-Dodson Law
Back in 1908, Robert Yerkes and John Dodson, two psychologists, postulated the relationship between stress (called arousal in the field of psychology) and performance and it can be summarised as:

Little stress (up to one point) can help you perform a task because it heightens awareness, but when the stress is too high, performance decreases.

Of course, research shows that the optimal amount of stress/arousal depends on the difficulty of the task.

• Low-stress, low-difficulty equals boredom.
• Little-stress, high-difficulty equals better performance thus less human error on the task compared to:
• High-stress, high-difficulty which leads to poorer performance and an increase in human error.

As a best practice when you build systems, you should take into account the stress level of the environment in which our system is used because it might drastically influence the occurrence of human error.

3. Working under un-natural conditions

Knowing the conditions in which people will use our system may drastically influence our designs. The tradeoff between error correction mechanisms and un-natural working conditions should be proportional and should be partially observed from user-testing.

Some scenarios our users might find themselves in when working:

• Staying alert for prolonged periods of time
• Constantly providing accurate, and minute details
• Having to work in environments prone to interferences
• Working with large amounts of diversified data

How do people solve problems?

It might be of no surprise, but several patterns of problem-solving and error correction emerged when studying people executing usability tests.

The important ones you should know about and take into account (when making assumptions about your users) are:

Systematic explorations

This is an optimal pattern of behavior that leads to the highest probability of successful task completion. People try all the available options in a particular order until they found the one they need.

• Example: Your task is to open the “Feedback” app on a phone with a new operating system that represents apps only through icons. You will proceed to open every app from top to bottom until you open the requested one.

Trial and error

This is another viable technique, even though it is considered less effective or less efficient than the systematic exploration technique. People randomly try different options until they find the one they need.

• Example: Your task is to take a screenshot on a new phone. You will randomly try combinations of buttons and gestures in order to complete your task.

Rigid explorations

People assume the way to solve a task. They proceed to repeatedly use the same action or process over and over even though the outcome is never achieved yet they still believe it will work.

• Example: Your task is to play your favorite song on a music app. You will open the app and press the big play icon, restarting and re-doing the same process, even though it never worked to begin with.

Further reading:

The smart people at the University of Amsterdam published this very interesting paper that is definitely worth your time if you are curious to know more.

Designing for human error

We now know how many types of errors there are, why they happen and how people usually correct them. Human error might be inevitable, but it need not be catastrophic.

Let’s see some design techniques you can use when designing for human error.

1. Preventing errors

It is a good design practice to avoid human error before it can even happen. This transforms your regular old system into one that gives your users a sense of security and stability.

Techniques you can use:

• Adding constraints: you will expose a credit card number text field to human error way less often if you allow it to receive only numerical characters.
• Being consistent: having the confirmation button of your modal window on the right side at all times makes it less prone to human error because it builds a specific mental model of your system.
• Using clear metaphors: the trash can icon means delete for most users because it’s a distinct and recognizable metaphor, making the chance of a misunderstanding very small.

2. Forgiving

Having a way to correct your errors is a reassuring thing and allows you to explore, navigate and learn any system without any anxiety or fears of doing something wrong.

Techniques you can use:

• Good affordances: buttons should look like things that can be clicked or tapped.
• Undo capabilities: destructive actions are susceptible to human error and the system should allow them to be reversed in case of a slip or when the intent of the user changes.
• History log: your system should keep an action-log so that your users can identify and correct any potential human error.

3. Explaining

As designers, we know people don’t read screens/pages of text word by word. They scan. That doesn’t mean we shouldn’t use explanatory text at all. No communication is bad communication and when we’re dealing with human error, that can prove itself to be a delimiting factor.

Techniques you can use:

• Confirmation messages: the actions users are going to take (along with its outcomes) should be explained in short, plain and clear language.
• Warnings: your system should clearly indicate a potential misbehaving with the help of signs, alerts, and prompts.
• Help sections: easy-accessible, well structured, dedicated FAQ/help pages or screens, user manuals or usage instruction in the form of plaques/leaflets.

Bonus techniques

• Reducing the cognitive load: by having a simple, easy to parse design or by reducing visual or audio stimuli altogether(this also reduces stress).
• Offering support: by designing dedicated onboardings, offering hints, providing a customer support line, video tutorials, or training in the form of courses.

In conclusion

The reality is that something always goes wrong: a colleague makes a mistake in shared-file, or a company releases an app that has too many bugs, or an engineer builds a system that is unusable because he or she doesn’t understand their user’s needs.

With all this, we should aspire to better understand human nature and how to utilize its strengths and correct its weaknesses.

If you enjoyed this article, I would appreciate if you’d share it with your co-workers and friends. Hold the clap button as much as you like 👏 👏 👏

Bibliography

• Universal principles of design
• 100 things every designer needs to know about people
• The design of everyday things
• James Reason’s 12 Principles of Error Management
• Human error on Wikipedia
• Ray Pank’s Human Error Website

Another article by me

The other dimension of design

Human error: an important ingredient in great designs was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Meet Ana and Andra, two internship graduates

I had the opportunity to interact with these two amazing girls during their internship and they were kind enough to answer 5 questions about their experiences.

1. What were your expectations when you enrolled in the internship? If you had any. Were those expectations met?

When I enrolled, I really wished that during the internship I could make a real connection with the domain, to understand what design really is, which processes are involved and if I really was the right person for the job. Now, at the end of the internship, I think I got all my answers. I understood it, I saw what the steps are and I think I will be the right person to work in this domain.

I didn’t know what to expect at first. When I started looking for an internship, I expected to find something that involved programming. After the interview here, I realized that wouldn’t be the case and that design was something else completely. By the time I began the internship, nothing was clear in my head. I expected to learn using a special Design app from scratch (for Visual Design only), but that was it.
So these expectations of mine, I realize now, were very low and, of course, they were met. I learned to use Sketch, Flinto and some other design tools. However, I learned so much more and I never expected UX Design would be such a complex and important process regarding the IT industry.

2. What part did you enjoy the most and why? Was there something exciting?

The part I’ve enjoyed the most was the actual work on the project because it was quite engaging. Although the rhythm was alert and sometimes tiring, that was the part where I’ve learned the most from. The interesting part was that you can always make improvements on a project, no matter how many iterations it has been through. My conclusion is that there is no such thing as perfect design, but only something that can be improved.

I’ve always been curious, so I really enjoyed getting to know more about what User Experience Design actually means, what are the steps a UX Designer takes when creating the actual experience.

Also, after going through high school and college, where teachers would only tell stories about a certain topic, making us memorise a lesson or solving useless problems, this internship was an opportunity to learn things in a different manner, a more practical one. I was able to apply what my mentors taught me in my internship project (a health app for kids). Everything they explained eventually made sense, and it was easy to see how each step in the UX process determines the next one and that this job requires both empathy and critical thinking.

3. Looking back, what could you have done better?

Looking back, I think it would’ve been best if I was more organised. This would’ve helped me avoid the mental fatigue which I often felt during my last month on the project. And I think it would’ve been far better if I would’ve asked the team more questions about UX and UI.

Ask for feedback more often.

4. If you can go back in time in the first few days of the internship, what advice would you give to yourself?

Trust yourself more, because you’re no less than the other interns who participate. This would’ve helped me not to be as inhibited and discouraged.

Observe and learn from others as much as you can. Take advantage of every opportunity that shows up.

5. What do you think the team should’ve done more?

The internship went well, maybe some extra theory sessions would’ve been of help because the domain it’s such so complex and there is a lot of information that you need to learn in order to make good designs

I’m not trying to idealise my team, but I don’t think there’s anything they should have done more. They were there whenever I asked for help, ready to answer my questions, give me a piece of advice or even hold a seminar (Thank you!). But what I will remember for a long time are the daily lunches with them (how hard it was for us to decide where to eat) and the never ending inappropriate jokes.

Read more about design internships

— https://uxplanet.org/guaranteed-results-of-design-internships-and-how-to-get-them-26a1b217195b

Psychology in design is a hot topic amongst designers nowadays. It’s a great thing to see that we’ve integrated techniques and concepts and that we’re making progress towards a better integration of the domain with our own. There is an increasing number of psychology-related articles that help designers expand their horizons and I hope this one will add to that list too.

If you’re interested in psychology as much as I am, you probably know by now that psychologists have a popular saying:

Everything psychological is biological

You might wonder why I want to bring this up.

Designers are communicators. Amongst many other things, designers bring ideas to life usually using visual means. And seeing is what humans do best, that’s why a design mockup is so efficient when presenting it to the team. It communicates a large amount of information in a short amount of time.

Did you know that humans have the best vision out of all the animals (except birds of prey)? Yup, we do.

Knowing how perception works it’s a valuable bit of information that all designers should be aware of. In my opinion, this will consolidate the reasoning behind some of the most important design decisions and it will bring everything full circle.

Let’s start with light

Light is a wonderful thing, but scientists describe it as an electromagnetic radiation. Visible light, the one that’s on the visible spectrum (which is a small fraction of the whole electromagnetic spectrum) is what gives us the sense of sight. For the purpose of this article, I will refer to light as a wave because it will help us understand things with ease without going into details.

What’s important for designers to know is that light is characterized by three things: Frequency, Amplitude and Wave Length.

Frequency gives it the hue and Amplitude gives it the brightness.

Remember it, it comes in handy!

For example, short wavelengths with high frequency give the light a blue color. Can you guess what long wavelengths with a low-frequency result?

Here is an experiment you can play with to learn more:

You promised us psychology but you want to talk biology but in the end, you actually talk about physics? What is this?

Hold on, I’m getting there! Maybe…

Moving to the eyes

Eyes are a wonderful thing too. It is rumoured that designers have the most accurate and advanced type of eyes amongst any other type of person, wink wink. They are the receivers of light and the input organs of sight.

Light bounces on objects and then into our eyes, goes through the Cornea, the Pupil and through the Lens which projects an image onto the retina.

This image is not actually a real image, it’s more of an interpretation of our senses of what we see. We have millions and millions of specialized cells named rods and cones, each one getting a piece of that light came into the eye.

The rods cells are extremely sensitive to light, it is proved that they can be triggered even by a single photon. At a really low light, the sight is based on the signal from the cones cells. This is why colour is hard to see at a low light. The more you know!

The human eye is exceptional. The average person is able to distinguish around a million different hues. Another rumor says that designers can distinguish around 10 million different color hues. Allegedly.

Now the brain

All the information captured by the eyes travels as a neuro impulse through the optic nerve, continuing to the visual area of the thalamus, being processed in the end by the visual cortex.

The visual cortex is located on the back side of the brain, called the occipital lobe and it’s specialized in visual processing. The right part of the lobe gets the info from the left eye and vice versa.

What we should remember here is that this part of the brain, the visual cortex, has specialized cells called feature detectors. These neurons or groups of neurons are responsible for identifying shapes, movement or angles or edges.

It was researched and discovered that we actually trace every angle and line of the objects we see with our eyes. When you are contemplating a new design, take into consideration how much effort your users do when they interact with your design. Keep everything simple and easy to trace with your eyes so that the visual cortex can process everything fast!

One important part of the visual cortex is responsible for face recognition.

We actually have a construct in the brain for that! Face recognition is important in design. We often hear how important are pictures of smiling handsome and symmetrical people in our mockups.

Faces attract our attention and depending on their expression, it influences our mood which is proven to influence our decision-making capabilities. Now we know how much that ties to the human nature!

Motion detection is something that’s really important for designers to know about too. The visual cortex takes care of this as well having specialized areas in its structure!

In today’s age, we have a lot of great tools and ways to create transitions, animate elements and play with movement. If you didn’t know, peripheral vision is the one that’s responsible for motion detection at a sensorial level so that’s why moving ads on the sides of your screen are so annoying! They bank exactly on this concept!

The best part about all this is that the visual cortex does everything in parallel in the process called Parallel Processing. It makes sense of color, depth, form, and motion all at once!

Fun fact: the amount of information that the brain processes in an unconscious state is estimated to be roughly 11 million pieces of information/sec. You wouldn’t probably guess that the conscious state falls behind at only 40 pieces per second. Keep your designs nice and clean!

Takeaway

Design is a complex domain that borrows knowledge from many others and it’s not something did at random. Psychology, biology and even physics should be the ones consolidating our design decisions whenever we deal with difficult problems.

I hope you’ve enjoyed this article and I would really appreciate your support. Thank you for reading!

What designers need to know about perception was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s explore together a couple of techniques and ideas that designers can use when creating delightful user experiences. If you haven’t caught the hint from the image above, these ideas are taking advantage of the temporal dimension.⏱

Don’t worry, I will not be getting into time theory or space-time continuum, or other sciency things, I’ll be sticking with what I know and that’s about design.

The perception of time

If you ever ordered something at a restaurant that takes a long time to prepare, you probably found it easier to wait if the waiter offered you the drinks first and kept the small talk going. Good restaurants really have this nailed down. The drinks are acting like small distractions and the small talk makes the whole waiting experience smooth.

In UI design, one of the first examples of this technique was the introduction of the progress bar. It is a great way to tell users how much they have to wait while the process they initiated executes. The users can estimate how long it the process will take and even play a game by placing the cursor at the end of the blue progress indicator.

Later, research studies showed that the appearance of the bar going faster was a helpful illusion, making users perceive time as going faster as well. Don Norman even mentions this concept in one of his books:

…something that takes longer but that is perceived to be efficient is superior to something that is shorter but perceived differently.

(because others already wrote about this I won’t bore you with the details, but if you are interested in that study from 2010 you can find it here)

Getting back to modern times, we have a variety of awesome ways to facilitate a good experience when we want to affect the perception of time. Pre-loaders, loading animations and progress bars are good tools, just to name a few.

Takeaway: you shouldn’t let your users waiting without them knowing what’s happening, and when you have to do speed optimisation compromises use the perception of time to your advantage.

Temporary UI lifetime manipulation

Banking on the progress bar idea, it really helps to know how much long something will last on the screen. Having control on the lifetime of temporary UI elements is even better!

If you’re a driver and if you ever had to pay attention to Waze while driving, you might’ve noticed the self closing pop-up that tells you the route is changing. It has a good lifetime indicator on the top right corner, very well tied together with the dismiss action so the users can have full control.

On the other end of the spectrum we have the Instagram Story. Designers at Instagram did a great job showing the story’s lifetime at the top, but the twist here is that they give you the ability to stop time. By keeping a long press, users can prolong the story’s lifetime on the screen so they can have a longer interaction with it.

Takeaway: facilitate the user to have more control of the product by providing the appropriate time-based mechanisms.

Conscious actions

Permanent user actions should be treated with careful attention, there is no doubt about it. As designers we might use patterns like confirmation alerts with secondary actions, undo menus, or even a “slide to unlock” metaphors, but what if we can use time to our advantage?

Here is an example on how to do so.

Imagine a destructive action on a particular UI element. Hovering over an X icon for a short amount of time enables the action to delete or dismiss the UI element. This requires the user’s conscious action to position the cursor over the area we’ve indicated and for him to wait an expected amount of time in order for the action to take effect.

Expected time constraints

A great use of time constrains are the temporary restrictions of actions. Disabling an action for a short amount of time before enabling it again eliminates the room for spamming that action.

Here is an example I’ve created with Principle to illustrate this idea:

Another usage of time constraints is to regulate addiction. In the mobile game MarioRun, if you want to binge through levels you’ll encounter a time barrier. You’ll have to wait for a short amount of time between play sessions. From this perspective, this makes you put the phone down for a while and maybe find something productive to do. Of course the timer in MarioRun is placed there for other reasons as well.

Time and productivity

One of the great aspects of Medium is that they estimate how much time (on average) it will take you to read an article. For example my first article takes just 8 minutes to read as seen below.

On top of estimating once at the beginning of the article, another great usage of this concept is to indicate the remaining time as the user is making progress.

On the same topic of productivity, I just want to mention that autosave makes a huge difference in the user’s workflow. This is one of the invisible aspect of using time in design. Medium offers this while writing drafts by nicely combining the loading bar with a small message next to the logo.

Another invisible aspect of time in design

More than a year ago, I’ve done a small presentation for a local design community in which I’ve mentioned optimistic design as a really useful technique for designers.

The idea behind it is simple: do an action and consider its outcome as success based on the fact that in the high majority of time the outcome is a succcess. Examples of it are liking or bookmarking something on your favourite social media.

This allows you to create a seamless experiences for your users creating the impression they can achieve more in a short amount of time. It’s an interesting topic to read more about.

One of my favourite usage of the temporal dimension in design

Because I just moved into a new city and I’m not familiar with the surroundings yet, I tend to use Google Maps a lot to navigate around. One of the things that I really appreciate bout Maps is the changing of theme based on local time.

A light theme during the day for a good contrast and a dark theme at night for it not being distracted.

Using local time to dictate aspects of a particular user experience can prove to be a clever way of using the temporal dimension in design. There are loads of other applications of this idea that you can come up with for your next project, especially when you have to deal with long user sessions.

Takeaway: delight can be easily obtained by introducing time into you designs.

As we designers strive to innovate and improve services and products, we should remember that we are not limited by two or three spatial dimensions and we should use the temporal dimension to our advantage.

In the end I’ll leave you with this great quote by Tennessee Williams:

“Time is the longest distance between two places.”

Thank you for reading, I hope you’ve learned something new! If you have more examples on the topic, leave a comment below!

The other dimension of design was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

The role of the designer in a company changed from I first started by a lot. From the position we have at the table to the way we organise our files, the modern designer has to continually adapt and always improve.

During my time working as a professional designer — by Steve Pressfield’s definition of a professional found in his book called Turning Pro — I’ve had the opportunity to work as the single designer in the company, but also work in teams up to 14 designers, both local and international teams. In this time I saw how other people work, what their strengths were and what they usually lacked in their workflow.

In 2018, Sketch dominates the market as the preferred tool for designers in which they can create their rockstar UI and I’m one of the majority who uses it as well.

Next, I’ve compiled a short list of best practices that I’ve observed and actively use myself in my daily routine. I hope you’ll find these things useful and integrate them in your workflow. Let’s jump into it!

Tiny time savers that live in your keyboard

I haven’t seen a single great designer that uses the UI to navigate around, they all use keyboard shortcuts.

Shortcuts are exactly what we’re always looking for in our daily lives; as humans use them to save time and resources whenever we can, not only at work. The shortcuts available in Sketch can save you a tremendous amount of time in the long run if you do the math.

Say that you want to access a tool from a dropdown. If you’re like me, that might take you 3–4s, but if you use the keyboard shortcut equivalent, that’s pretty much instant. Think about the thousands of times you select something from a menu per day.

Jeffrey and Robert from Sketch Shortcuts compiled and maintain a list of Sketch shortcuts that you should definitely learn. I can’t rave enough about how important this website is!

If you want to take this a step further and become a power user you can also create your own.

Keyboard shortcuts are essential for having a productive workflow and they are really easy to learn and use. Give them a try!

The most powerful aspect of Sketch

I’ve been using Sketch as my main tool for design for a while now and I’ve installed every possible plugin that caught my eye, except this one. People on Designer News were raving about something called Sketch Runner and for some reason I always found something to distract me rather than trying it out. It turns out it’s amazing and helps a lot. 💥

Sketch Runner allows you to do a wide variety of things, but the most important two for me are:

1. You can run everything

2. You can install other plugins and run their actions

Make sure you check all it’s features, you might find something you’ve been looking for a long time.

The good news here is that Runner is not the only one that proves to be a huge help, I’m not gonna lie!

I found that the most time saving plugins, that eliminate busy work, prove to be these ones: RenameIt, LaunchPad, Symbol Organiser, Craft, Artboard Tricks just to name a few from my list. I’m also working on a plugin myself and I’m looking for a developer that can help me finish it. If this is you or you know someone willing to help the community, let me know!

Once you integrate the usage of plugins in your daily routine, they will improve the way you work by an incredible amount. I’ve saw designers who don’t use plugins to automate their work right next to those who do, the difference was enormous!

Clean your r̶o̶o̶m̶ Sketch file

If you live on the internet like me, you probably already know about Dr. Jordan Peterson and about his advice on cleaning your room. If not, you can check him here:

And this applies on your work ethic as well. Keeping your file organised is one of the most important things you can do when designing anything. Your future self will definitely thank you for it.

Here’s how I currently do it:

File

Start by giving your file a proper name. I saw big companies using name systems that look similar to this…

[initials-of-the-designer]-[date]-[version]

es-04042018-v1.sketch

…and I tend to see the reason for it more and more. By doing this you can easily identify who worked on the file and in which state the file is when working in a big team that has everything in the same spot. Using Finder’s colour tag to mark if the file is done (green dot) or in progress (yellow dot) it’s also an added bonus.

Pages

Usually I have the chance to work on designs that will be implemented on three platforms: iOS, Android and Web, so my page structure looks like this:

The old UI or the un-needed things are dumped into a special page called Archive. My friend Teo likes to name this page “Graveyard ⚰”, because he’s cooler and makes good use of emojis too.

Artboards

Let’s suppose I’ve designed a couple of screens by now and the structure looks like a mess. While having my artboards selected, I fire up Sketch Runner by pressing the keyboard shortcut “cmd + ’ “, run the Rename it plugin (see how it all ties up? ) and give them a proper name.

For easy export, I tell Sketch that the screens in my selection should be in the same folder, so I add for example “iOS/” at the beginning, followed by a number that indicates the screen’s position in the flow and last the name I desire.

After that I run the ArtboardTricks plugin mentioned above and everything gets arranged into a nice grid. This is the minimum I do, yay for automation!

Groups

Since a file can have a huge amount of groups, it is fair to name just the important ones. You’ll know which ones are important but don’t stop just at naming them. Make sure the layers inside the group have the appropriate layer constraints.

When I notice repeating elements, I usually use AnimaApp’s Autolayout so I can save time and headache moving or removing anything.

Symbols and text styles

Symbols are a huge topic, I can dedicate a whole entire article about them but I’m sure other people already had, so I’ll just remind you that it is strongly recommended that a designer makes great use of these tremendous time savers. Whenever you can make something into a symbol or a text style, do it. It will save you time along the way just because you can edit the content on the spot.

Tag team the developers

Usually you are not alone when working on a project. You’ll interact a lot with non-designers, mostly developers, and that’s a great thing. A short empathy driven exercise will make you aware that your final .png files are not that useful for them. This means your work is not done just yet.

Exporting the assets and specifications is no longer a pain, and if your company allows you to use services like Zeplin or Invision Inspect you are saved.

A great alternative for these two is called Sketch Mesure and it will locally (no cloud involved if you worry about security) generate a specification page like this at a press of a button.

If you didn’t know, correctly slicing your work will allow the developers to have easy access to assets like images or icons that you placed in your design. Here is the way to do it in Zeplin, a tool that I’ve used thee most:

This will turn out very useful since you are delegating part of a tedious work and in exchange you’ll have more time focusing on more important issues. I could never imagine a world without these tools!

Lend a hand to your project manager

Did I told you I have a Sketch plugin in progress? Well, I hope it will work well automating this next thing I do.

Because most of the time it’s a good idea to document everything design related on mediums like Confluence, a thing I like to do is to provide an overview of the flow/entire app by using the actual screens. It looks something like this:

What this does is to create an overview of everything I’ve designed so that people can use it as a reference. It has a big title, names for each artboard (that mimics the titles you already defined) and a big slice all around. Some people even like to print these and leave comments with coloured crayons and sticky notes.

Finally, I place everything in a Dropbox folder and share it with the team. My preferred folder structure looks something like this:

In conclusion, I think it’s safe to say that we all love to work smart and to save time. These few simple tricks made my workflow more streamlined and much more easy to execute when facing any type of project and I hope you learn something from them. 💥

If you think these things will help your workflow as well, please let me know so I can post more about similar subjects. Thank you for reading!

How to improve your Sketch workflow to save time and mental effort was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.