So you’re a Product Designer, now what?

Being a designer is easy, being a solid designer takes a little more. Here’s a few tips I’ve learned along the way…

I’ve been a designer for a awhile now and what I’ve learned most about being a good designer is that you need to maintain a positive mindset.

Positive Creations

Why? Positive people create positive experiences AND when it comes down to it, who wants to collaborate with negative people? When I work with caring, kind colleagues, it helps motivate the team to create better experiences.

When you sink hours and hours into a design, you can get emotional about the feedback — stay positive and compromise

You Can Do Both

Ever feel like you are the master of one domain and the student of another? You can do both. Any “full-stack designer” can tell you it’s possible to handle both the UI & UX together if you study, practice and own it. There has been many times in my career where I’ve had to wear two hats. You may need to take charge of layout, architecture, prototyping, analytics, user studies, development planning, and even some wordsmithing.

For those getting into copy, it’s critical for us to place in some general idea of what the core message should look/feel/read like. I recommend avoiding lorem ipsum, bacon ipsum, hipster ipsum or any other filler text. Thinking through every element with maximum and minimum character counts saves valuable time for you and others in the long run too.

Boost Your Team

You’ve heard the term ‘you are only as good as your team.’ Well, it’s a good term — and it’s true. So boost your team! When you advocate something that you are passionate about, others can learn and grow too. You even have a greater chance bringing your ideas to life when you inspire your team just like you’ve been inspired. So try to be that advocate, that team leader that can interact with multiple personalities/roles. It will make you stronger, your team stronger to deal with any situation and all the stages of design.

Promote best practices, new trends and have your team grow with you

To Share Or Not To Share?

Sharing is always tough — even for adults. And I admit it, early in my career I had a tough time doing it as well. But relax! Sharing is caring — and sharing will make your design life easier. Here’s an example. If you’re the only one using a new, state-of-the-art program or style — that’s great. But if more folks on your team join you, you will grow faster together and put out a better product. Don’t worry about teammates ‘stealing your designs,’ they can never be you. The goal is to have others reuse your ideas so you can lead implementation the they way you always dreamed.

Mastering Design Systems

When building a design system it’s best to have everyone contribute to it but only a hand full of folks maintain and share the master file. Typically posting the revised master file and sending the dropbox/share folder via email/ping to every person on your team is sufficient. Try to keep it to only one master file (per platform) so everyone can download/keep current on the latest and greatest.

After you have a system in place you’ll understand the need to have lean, consistent styles, animations, SVGs and patterns. It’s less stress for you to manage and overall better user experience in terms of visual familiarity. For the format, I typically use a massive Sketch file that houses every component you need to build an app or web product. If you need a component that hasn’t been created yet, design it, shop it around and add it to the file AFTER it has been developed. Reason being, design compromises often happen in the development stages.

And here’s one important tidbit, creating a design system is much easier during a complete redesign. If you can’t do that, you’ll have to go backwards. Partner up with your Dev and start building your documentation with the exact same specs that are currently live. Chances are, you’re going to find a lot that needs fixing.

Sweat The Details

Reviewing through a series of different mediums helps discover problems

It’s your job to be pixel perfect — so make sure you sweat the details. AND I mean, quadruple check your work before a big review. Recheck it in Preview, mirror it to your phone, review functionality in a quick prototype. You’ll usually find something you’ve overlooked in different mediums. Often times I’ll work on a design flow for weeks, thinking I know every pixel but when I bring it into an in-hand prototype, I’ll notice some UX pain points. It’s also incredibly important to get the prototype in others hands, savvy and not. Of course you understand your flow, but will others? No one is perfect but being obsessed about QA’ing your own work before it goes live, helps.

Static UI is boring

Often times when your UI is approved, you think you are done and off to the next effort. Wrong! Give your design a final look and see where subtle animation can better help communicate the interaction or flow. Those subtle touches can be ‘the kiss’ that strikes an emotion and brings users back.

If you can’t animate just use Photoshop GIFs, they get the point across and can be brought into InVision. Principle, Framer.js and AE are even better for describing the desired animation to your engineers. Here’s the notes I have on a post-it by my desk to remind myself of the types of UI animation that are needed:

+ Microinteractions 
+ Path of Process 
+ Clarifying/Explanatory
+ Decorative

Awesome proto that quickly communicates desired motion to the Engineer. By J.Brown

Love Your Developer

Working directly with your developer/engineer is crucial. Unless you are coding the entire experience yourself, you’ll want your engineer involved in the entire design process. Everyone knows this but few actually remember to do it. It’s hard to share early but you can save time by learning about small tweaks that cut the LOE in half.

Developers have great ideas to enhance the experience and designers help push the boundaries of implementation. AND it’s even better for the creative flow if you are close to your developer in proximity. In the past, my developers sat far away or even in separate buildings…that’s not great. Designers should be closer to developers than anyone else.

Establish those great relationships and your product will be exactly what you designed because you’ve had touch points with them the entire journey.

Push your Dev and allow yourself to be challenged as well.

To Code Or Not To Code

Can designers be great coders? Of course! So try it, see if you like it. I dabble with coding — and it’s helped me understand how to deliver designs to engineers… SP, DP and hex values for Android. Points and RGB for iOS. EMs or PX for web. Auto layout, break points and much more. But I’ve also realized that I tend to compromise my own designs because of my lack of robust knowledge in this deep field, so I prefer to let my real code ninjas build the final magic and push the concepts even further.

Designing For All Languages

We are a global economy, a global workforce — and because of that, we must design for all languages. Think through what your content will look like in another language. Did you know Greek is roughly double the line length of English? Think about that the next time you place a long text string inside a globally used CTA.

Designing for one language is much easier than designing for all. At global companies you’ll have to make sure you spec out what happens when the line lengths double inside a component. Make sure it doesn’t explode outside of the container or extend past the desired padding. Here’s two tips I found useful:

1. Design in English leaving plenty of room for the line length to expand. Then use Google Translate to input a longer language like Greek and test that in your layout. Revise components that broke. For currencies, try testing with the Thai baht. That’s usually double or triple the line length of the dollar.

Notice how the line length almost doubles

2. Avoid wrapping or ellipses when you can. When you use ellipses the user can lose out on important content and wrapping usually just doesn’t look good. I’ve found that auto shrinking the font and spacing until you meet the minimal guideline size works best (sometimes I go even smaller). I.e. 16px reduces to 14px, then if it needs more room. 12px.

While speaking to text… I’ve found the importance of character counting for max/min line lengths incredible valuable. When your spec includes these you can hope that the life of this component will be maintained the way you intended it to. For web, try not to count them in Sketch or Adobe, count them once they are in the browser using Chrome Inspect. It’s more accurate and you get to feel like a Developer. Also while using inspect you can tweak the UI until you are happy with it. Then copy the styles you tweaked and send them to your Dev.

The right amount of time

When someone tells you that it will take “5 minutes, right”… it won’t. Very little actually takes 5 minutes and don’t be forced into being rushed. Of course I do quick hits for my Engineers but then after I shipped it, I’ll go back and double check that there wasn’t something that could be improved. When going back to an old design there’s seldomly a time where I haven’t wanted to improve something small if not beg for a complete redesign. “V2 revisions” are rare.

Tired yet? Well never sit still. There’s always something to do. Redesign a product feature for fun and pitch it. Design that new dreamy concept you had in your head. A lot of times I’ll hear someone is bored and I’ll shake my head… I wish I was bored so I could get better at something else. Sit idle too long and you could get passed by. When you need a break, get up and walk outside, that’s a better look than surfin the interwebs.

New Designers

Have strong opinions but don’t be annoying — talk about why it’s terrible, where the bad choices were and how (visually) you propose enhancing them. Then be prepared to back off if needed. Let things cool down and try again later.

Be genuine in your cover letters, interviews, portfolio and resume — what will you bring to the table? Show your true personality. We are the dreamers of dreams, don’t copy too much and try to avoid templates. We are visual people and so are the people that hire us. If they noticed something that you stole without improving… you’ll be skipped and possibly bad mouthed later.

When you’re choosing a place to work think about the difference between design lead companies and business lead ones. At a design lead company your team can lead everything, the idea, design, functionality and your team will also be responsible for mistakes. At a business lead company your product team now owns the design decisions. That takes some stress off the Designer but also some control as well. I’ve been able to work on both sides and I hope you will too.

So what are you waiting for… design something awesome and may the pixels be with you.

Show some ❤ if you found this post helpful :)