Pet peeves of a designer?: ?8 things you should probably stop doing

• Designer, peeves
pet-peeves-of-a-designer?:-?8-things-you-should-probably-stop-doing

Nikhil Kirve

It was a small moment and a late one when I realised… Why do designers approach design in such a way? Why not like this, and so on… Being a designer for over 6 years, I’ve made these mistakes and probably you’d have made one too.

At times, designers just want to “please” the stakeholders and get their work done by the day. While on many occasions we invest a lot of time in searching or designing a solution, when we are needed to address the question in the first place — and this leads us to walk astray without realising our errors.

Hence, below are few of my observations towards some common design flaws that I stumbled across, that made me think about my understanding and my exercise that helped me accelerate my UI/UX design process. I hope this helps in your everyday design.

Creativity is not easy. Coming up with a design in a short time can be difficult, and so we look for references and copy them the same. As a designer you need to stop plagiarism and try to modify a reference work into your own design.

I agree — Designers are not born with innate ability to create gorgeous interfaces, or gifted with some special color psychology. Designers also need to work hard on their craft, experiment and learn like everyone else does. Although, as a newbie designer it is OK to copy and hone your skills from Pros. It’s the right way to learn when you do not have an industry perspective.

That said, having somewhat experience as a designer you will agree to one thing that, we all take UI reference material from Dribbble, Behance, Awwwards etc. In my opinion, our references should remain as an inspiration. It is one thing to get inspired but it’s another thing to copy paste someone else’s design entirely. Its always good to get ‘inspired’ (motivated) from others, like your favorite designer — you will always fall in love with their work, their style of design, color palette, interaction and more… but think this, their design language & style might not necessarily be appropriate to the product you are building.

Do not copy! Understand if it will work for your product or not.

Copy pasting UIs will save your time and a non-designer would never notice. But seriously: Why? — after years being a designer, if plagiarizing is still your way then, my friend, it’s time to bring some change. The creative process is an exercise, one in which you need to give time and train your mind. Once you overcome your creative block, you will come up with something different even with the shortest of ‘icon’.

It’s important you save time on illustrations, icons or any graphic element on UI while making early designs. Having an idea of what the illustration will look like and then selecting an appropriate placeholder will accelerate your work.

Off course, this doesn’t mean that you don’t have to make one. But, is it actually necessary to design visual elements before you finalize the layout? — NO.

Let’s take an example: You are designing an ‘Invite friend page’ for which you want to add an illustration — so you design the layout of the page accordingly, Now, rather than jumping into making that illustration or artwork.. take it slow. In your mind you know what kind of illustration you want — A guy holding a phone and a friend next to him.. Ok now, go ahead search for a similar type of illustration as a ‘placeholder’ on Dribbble and use it in your design.

Pick the reference image from Dribbble.

Get the design approved by the stakeholders prior. You will have plenty of time to work on illustration once the design is in development. This shows your ability to quickly move the project ahead without actually putting your creative skills on priority.

By doing so –

  • You have presented your page structure a lot faster
  • Saved your time and rework on graphical elements
  • Project timeline is not compromised due to delay in design

Final work on illustration before release!

If you are asked to provide a design or even a popup by your PM… Just wait for a sec. Do not pour their words into design just for the sake of giving it. Listen to the requirement and get every necessary piece of information, as this will only help you to strategize your process of design and save both of your time.

Ask questions: __What is the objective? __What are we expecting the user to understand? __Is this information necessary to the user? __Is this structure coherent for the user? __What will happen if there is no data to show? And so on…

You are not bound to do everything as the PM says.

As a designer you need to do your part of research & exploration for you to share insights for the best experience a user could possibly have. Do not rush into design blindly. You are not thinking deeply about the product and its use, period. If you do not agree to a certain thing as a user experience designer, take a minute… Get your brain to process and you will have a different & better way around.

(Look the requirement from your perspective).. by Agatha Yu

Sometimes, you won’t even require a design and a problem could be solved using system native components. Think before opening ‘Sketch’ — Stop doing donkey work!

As UX Designers we are often inclined towards the craft and expression of an idea. Whereas PMs helps in translating the user problems into tasks and are focused on execution of the product. However, in the end, both Designers & PMs set the vision and bring value to the product. Thus, give your own thought to what you are about to design in order to save your iterations.

While designing, we start thinking of elements that the user will need or will interact with — which ends up crowding our artboard with elements such as — heading, subheadings, graphic, bullet points, video, ticker, fab icon and what not… and all this happens when we don’t have the time to sit and wireframe. In such case, having all information that we think is necessary to the user in our design ends up confusing us even more, and all we end up doing is — moving the pieces up and down to make the layout look good. Don’t do this.

“A Designer will arrange details on the page, but a Good Designer will eliminate all the unnecessary details.”

It is crucial for us as designers to understand on a psychological level, why our users are doing what they are doing, what motivates them to use our products/service. This awareness will allow us to create an impactful and well-defined structure for the product.

Treat your design as a Story — which has a start, middle and end. Every small feature you deliver is a story in itself and each page you design weaves that story together. Do not overwhelm the user by tossing stuff on his face and letting him figure the story by himself. Instead, walk him through. Design should intrigue him enough that he is compelled to stick till the end.

Adding everything into design -vs- what’s actually needed

Be more empathetic rather than being instructed. There is a certain depth to understand a page when it comes to the real user. Once you have their point of view it will be easy for you to eliminate unnecessary and keep only what’s actually required on the page.

…Less is required, more is unnecessary!

Consistency is the key principle of design! Going all artistic will end up with an inconsistent interface to the product that will not only confuse the user but will also make it hard to decipher the final product.

Let’s say, One day you’ve been asked to redesign a ‘Profile page’.. So, you go and skim through all the profile page designs on Dribbble. You liked a design that is appeling with all the colored icons and gradients, which then you use that as a reference to make your own profile page. Kudos! You’ve completed your task! Now, the next day, you are asked to design a ‘Detail page’ inside the ‘Profile page’, which shall have numerous text fields, actions and content.. So you repeat — go on Dribbble, see similar samples and design your page. Why?…

First of all, All design decisions should come from understanding the user. And secoundly consistency in the design pattern should reflect in the product.

Trying to make designs beautiful as per Dribbble will not benefit to the user experience of your product.

Alteast, having a consistent Visual Language will help the user to execute a task without learning the UI every time they switch the context. By doing so, you are also setting a Voice and Tone for the product.

Save components that can be reused — Styleguide!

Visual consistency must be taken care off. Similar elements that are perceived the same way make up the visual consistency. Font sizes, spacing, button style, colors, even the line width of the icons should be consistent across the product. And so we create library/styleguide.

… Keep it simple, reuse components!

If you are one of those designers who think that content writing is not my job… I will write ‘lorem ipsum’ and move on and later incorporate the content I receive from the PM or content team then — Stop practicing this. Even if you feel your language is verbose, try to write your own copy.

Well, Content Strategy and UX writing falls under the large UX umbrella. Few industry best (Airbnb, Slack, Dropbox, Patreon, Squarespace) follows content strategy as a design practice. Likewise, not as a professional but being aware of what content adds to the core product experience and how it goes much beyond metrics and ROI is important.

“Writing content in your words will help you decide on how a design should work and look rather than trying to fit the content into a design”. As a designer, you have a fair understanding of the user journey and what the user is expecting to read or see on a particular screen, hence writing copy will helps you to keep the content flow consistent and further provides a context to UX writers to refine & create a unified voice for the product in ways that a designer may not.

Content lives in design and design communicates via content.

By adding lorem ipsum in your design you are dressing your king before knowing his size.

It’s a good practice to write content on your own during the design process, instead of using placeholder text. It will truly differentiate your design style from others.

Read about — Content First Approach in Design

I know how exciting it is to show your design skills. As a designer we want the best looking UI and interaction to what you are making — That like a dream of a designer:) You will prefer to sit in isolation until you are finished with your crazy designs and only then give the designs away. Creating beautiful pixels without knowing technical feasibility is just waste of time.

Ah, the beautiful relationship between Designers & Developers! We have heard so many times about the cold war brewing between these two world apart parties. Yes, we guys are equally involved & responsible for shipping the product. The whole process of creating a product or introducing a new feature always starts with keeping the user in focus, right? And, no matter how fancy a design we make, if we are not aligned with the engineering partners then it won’t do any good to the user and certainly will not help the business.

Love between designers and developers

Understand the possibility of effort that goes into building your design solution. Make sure they understand the reason behind designing it in a certain way. Provide a realistic example and also have an alternative way in case it’s truly infeasible.

Communicating early and establishing a clear shared understanding between you and the developer will surely save a number of redesigns, delays and will also cost less to your organization.

I have worked home after office hours:00 for almost six years, and I am not sure if I am the right person to advise on this but here are my two cents. I am not going to lie and say that this hasn’t help me to accelerate in work or career wise. But raising my head from the screen has made me think of how much I’ve missed all these years.

So, you are passionate about design. You like the complexity of a problem and are willing to put all your creativity, energy and your mind to solve it. You don’t see day or night, you are just so much in love with your work that you see nothing except that — ah, I know the feeling.

Most of my time is spent in front of the laptop WORKING. One thing we all know, is that the process of learning will never end. We have plenty of time in a day to work and be productive, and this is something that I am still working on. I still at times take my laptop and work late at night in my cave. Point being, we all can choose whether we want to work plenty or work little and smart.

This I can advise you —

“Stop doing quantity work, start doing quality work”

Don’t be satisfied with your designs, you will always do better the next day. It’s just the matter till you initiate. Set a goal that will drive to at least make that attempt…Keep working towards it — lose sleep, create, innovate, work home (doesn’t matter:) make amazing designs.

You’re doing great!

Designer unmasks the secret of the PS5 logo

• Designer, unmasks
designer-unmasks-the-secret-of-the-ps5-logo

(Image credit: Sony)

However you feel about it, Sony’s not-particularly-new logo for the PlayStation 5 has definitely got people talking. Revealed this week at CES 2020, the new logo (above) is remarkable for its similarity to the PS4 logo, and indeed the PS3 logo – prompting some savage but hilarious reactions from the design community. 

Obviously it’s never going to make it into anyone’s list of best logos, and somehow we doubt that Sony even cares. It’s almost as if the designer simply opened up SONY_PS4_LOGO_FINAL.AI, deleted the ‘4’, typed in a ‘5’ and saved it as SONY_PS5_LOGO_FINAL.AI before going home early. And fair play to them.

That explanation’s just not cutting it for some people, though. And while we’re with Occam and his trusty razor when it comes to divining the process behind the PS5 logo, we can take a certain delight in this particular theory of how it came about:

Posted on Reddit by user DeBeard – we’re not entirely sure if it’s their work or not – this neat little animation surmises that the ‘5’ in the PS 5 logo was created by copying, pasting, rotating and flipping the ‘P’. And then drawing out an arm on the top, because that’s definitely a lot less effort than hitting Backspace and pressing ‘5’.

That said, though, we’ve all occasionally found ourselves in a position where, due to lack of the right fonts, we’ve had to cobble together the odd glyph from bits of other characters, right? Right. And just maybe Sony’s been a little careless with its in-house assets, and someone really did have to make a ‘5’ out of the ‘P’. These things happen!

Sorry, but no. Finding ourselves with just a little too much time on our hands this morning, we decided to try it for ourselves. And while it kind of fits, on closer inspection you can see that no, it doesn’t quite fit enough. Take a look:

It's good but it's not right

It’s good but it’s not right (Image credit: Sony/Jim McCauley)

The top logo is one made by flipping the ‘P’ and drawing out an arm to turn it into a 5. The middle logo is the actual logo, with slightly mode pleasing curves around the midsection. And at the bottom we’ve overlaid the two; the grey areas are where things don’t quite match.

So there you have it. Didn’t happen. Sorry about that. To make up for it, here’s a lovely tweet we found where someone remade the PS5 logo in the style of previous PlayStation designs.

PS5 logo with previous designs pic.twitter.com/ZsbHgvJh2PJanuary 7, 2020

Related articles:

React: Designer?s Guide to the Terminal

• Designer, React
react:-designer?s-guide-to-the-terminal

You can learn how to use the terminal in a fairly short amount of time. You don’t need a C.S. degree. You don’t need to know how to hack any mainframes.

With the terminal, you can open, move, rename, copy and delete files. Same with directories (folders). The terminal is the Finder app on steroids. File management is just the start. The terminal is the interface for a slew of power tools.

You can install and run programs.


You can version files.


You can read documentation offline.


You can write scripts to automate tasks.


You can edit programs.


You can configure hidden OS settings.


You can tunnel into servers.


You can take full advantage of open source resources.

If you’re using React, you can quickly spin up applications and install design systems.
If you’re using git you can contribute to the execution of your design work.

The terminal is a powerful tool.


It’s a powerful tool for designers.


It’s a powerful tool for anyone.

Make it look nice



colors

The Terminal can also be a bit daunting.
I recommend making it look nice first.
Download a nice theme.
Extract the zip file, and import it into your terminal.

Open Terminal.

CMD , to open up settings.


Import the .terminal file and set it to default.


Restart the Terminal.

If you aren’t happy with the default monospace font, there are plenty of good options to choose from:

SF Mono (Pre-installed)

Input

Inconsolata

Space Mono

Office Code Pro

PragmataPro (paid)

Operator (paid)

Cartograph (paid)

Starter Commands

The Terminal helps you move around and modify the file system.
Here are 7 commands that are important as you get started:

1. List — ls

ls shows the files and directories in your current directory.

2. Change Directory — cd

cd is how you move around.

cd .. will take you to the parent directory.

cd Documents will take you into the Documents directory. For this to work, you need to be currently in a location that contains a Documents directory.

3. Move — mv

mv is used to move files from one directory to another.

mv file.txt new/file.txt moves a file from your current directory to the new directory.

mv file.txt new.txt will rename file.txt to new.txt.

4. Create — touch

touch is used to create files.

touch hello.md creates a file named hello.md in your current directory.

5. Make Directory — mkdir

mkdir creates a directory.

mkdir images creates a directory named images in your current directory.

6. Remove — rm

rm removes a file.

rm -d removes a directory.

rm -rf node_modules will recursively delete the node_modules directory and every file/directory inside of it. Most commands you run in your terminal are harmless. Be careful with this command. Deleted objects aren’t stored in Trash, and there’s no undo.

7. Open — open

open will open a file in the using the default program for that file type.

open index.html will launch your default browser with the html page in the location bar.

open README.md will open up your default markdown editor.

Important Locations

If you’re on a Mac some locations have a shorthand.

/ is shorthand for your root directory.

~ is shorthand for your user directory.

. is shorthand for your current directory.

You can change directory from any location into your user (cd ~) or root (cd /) directory by using these shorthand locations.
Additionally, cd without a provided location will move you into your user directory.

You can use a tool like bashmarks to save and visit commonly used directories.

Typing long location names gets old. In addition to shorthand, you can autocomplete locations using tab.

Custom Prompts and Commands

By default your Terminal includes computer and user information in the prompt.

Philips-MacBook:Documents philipdavis$

It’s common to remove this and replacing it with the current location followed by a $ sign.

To do this, we need to edit a .bash_profile file (.zprofile if you’re running MacOS Catalina) which allows us to customize our terminal further.
The .bash_profile file is located in the home ~ directory. If you run ls and you don’t see it, it’s because it’s a dot file.
Dot files are hidden by default, but we can see them if we add parameters to our ls command.

Parameters for terminal commands are often passed after a - dash. ls -alhG shows you all files (including dot files) in an easier to scan format, with file size and colorized folders.

This is what the normal ls looks like.



list

And now with the additional parameters.



list formatted

If you don’t see a .bash_profile in your home directory, you will need to create it.

Once you have the file you can open it in a text editor.

Once the file is opened, you can add the following string to replace the prompt cruft (computer name, location and user) with the location and a money $ sign.

In addition, instead of remembering all the parameters for ls -alhG you can add an alias so that ls uses it by default.

Save the .bash_profile file, run source ~/.bash_profile and then restart the terminal to start using the new settings.

You can create aliases for any commands that you commonly use.
I’ve created aliases for scaffolding react applications, and starting node applications. Here’s what your .bash_profile might look like after you’ve added your own custom aliases.

export PS1="W $ "
alias ls="ls -alhG"
alias ns="npm start"
alias cra="create-react-app"

The Power Tools



logos

In additional to basic shell commands there are a number of powerful tools that allow you do more in your terminal. I’ve listed a few below. Each takes time to learn. Each has something valuable to offer.

git for versioning and collaboration.

npm or yarn for installing and versioning node modules.

homebrew for installing programs and applications.

ssh for tunneling into servers.

vim for editing files in the terminal.

create-react-app for scaffolding react applications

Piping and Chaining

By default, output from your terminal is displayed in your terminal. You can reroute the output of a command to another file or to your clipboard by using the pipe command |.

Here we are running base64 on an image which converts it to a data URI. We are then copying the data URI to our clipboard. pbcopy and pbpaste are the commands to copy and paste in terminal.

You can use the && operator to chain commands. This is useful when you need to wait for commands to execute. The && operator acts as a queue. If the first command successfully executes the second will begin running.

npm install && atom . && npm start

Here, when npm install is finished, atom will open with the current directory loaded and then npm start will run.

sudo GoForthAndH4ck.exe

The terminal is a powerful application but it doesn’t need to feel intimidating.
If you have questions about using the terminal, or just want some guidance getting set up, please reach out to me.

Investigating the Designer?s Aesthetic-Accessibility Paradox

• Designer, Investigating
investigating-the-designer?s-aesthetic-accessibility-paradox

Costa Alexoglou

I stumbled across an article on medium last week from the UX movement. The content was describing the paradox of Accessibility and Aesthetics.

Although I enjoyed reading this, I found my self disagreeing with the paradox the writer is expressing, and wanted to mention that we, designers, have a strong aesthetic bias which we need to acknowledge.

The Irrational Scale that was create for the blog post.

The paradox

The example that the writer posted included two variations of a sign-up form attached bellow.

Two forms with different color contrast

Two forms with different color contrast

Originally posted here.

The blog post writer classified the left design variation as a highly accessible prototype with low aesthetics while the right one as highly aesthetic design and scoring low on accessibility.

Accessibility is a broader domain but let’s stay only in the font and contrast subset.

Who defined the left as a harsh on the eyes prototype for the normal visioned eyes?

The designer’s bias

We, as designers are highly biased from the designs of our community. We tend to scroll hours on Dribbble, check Awwwards every once and then, but we forget that we are not our users. Our users are probably not designers, and they do not have the same design taste as we do.

Validate the assumption of the UX movement

I got the aforementioned sign-up forms and tested them with the Clarity feature of VisualEyes.

I wanted to get fast how clear and aesthetically pleasant those designs are perceived from an average user.

How VisualEyes ranked each design based on each ones clarity.

And then I got my results! The average user clearly prefers the first design, and me too, to be honest.

Another reader who liked the “Too accessible” more?

As designers, it’s our responsibility to put ourselves in our users’ shoes with one or another way. I tried to do this myself with predictive technology. Still, there are various other ways to do this, like usability testing, preference tests and ultimately A/B testing.

Low contrast does not mean beautiful

The next example is a modification of a Sketch landing page template I downloaded recently.

Sketch Template from Sebastian Mantel

As soon as I opened it in my Sketch app, I noticed that the text was too thin for my taste, and the opacity was not working in my favour. I tweaked it, increased the opacity from 60% to 100% in the text below the headline and the stats, and changed the weight from Regular to Medium.

Iterated Templated

Curious about the results that VisualEyes predicted? If we trusted the irrational scale from the controversial blog post, we would predict that the Clarity Score should go lower than on the initial design.

Irrational scale of Aesthetics and Accessibility

The modified design, with higher contrast, and bolder text on the same background scored 6 units above the original, and is way more accessible to users!

Key take aways

We, designers and product managers, tend to see hundreds of designs every day. We seek inspiration in Dribbble, and we have a life goal to appear in Awwward’s list.

This daily routine is affecting our aesthetic criteria. I am not saying that those criteria are better or worse. Still, those criteria tend to be different than those of an average internet user. Not all of our users are designers, and we need to acknowledge this. Their taste is different, and sometimes it may feel strange that they do not appreciate our highly delicate designs.

And here is the question we have to ask ourselves:

Are we designing to please our ego, or to serve our users?

The question is rhetorical and the answer obvious.

Designer Gift Guide 2019: The best holiday gift ideas for designers

• Designer, Guide
designer-gift-guide-2019:-the-best-holiday-gift-ideas-for-designers

‘Tis the season, Dribbblers! You might find yourself in a pinch racking your brain trying to find the perfect gift for the designers in your life. But we’re here to help, friends! We’ve got some holiday gifts that will avert any gifting disasters and turn you into a hero this holiday season.

So for a moment put aside your last-minute plans to pick up a witty coffee mug or t-shirt, or rush out to the pharmacy for a last-minute Amazon gift card—we’ve got you covered with some thoughtful gift ideas we think will delight the creative practitioner you’re shopping for.

Whether you’re shopping for a graphic designer, UX designer, typography maven, or any manner of design geek, be sure to dive into all the unique gifts in our 2019 Gift Guide!

Quality notebooks

Whether your colleague or creative loved one is a dyed-in-the-wool gadget hound who’s glued to a computer screen at every waking hour, there’s something to be said for getting your ideas out on paper. Retro, right? So here are some great gifts that’ll encourage your designer friend to embrace their inner doodler or break open their sketchbook more regularly as part of the process of creativity.

5300db7be18383986b63826a67fb6261

Products:

  1. Baron Fig Starter Kit — $64.00 USD
  2. Grids Guides: A Notebook for Visual Thinkers — $16.95 USD
  3. Field Notes Project Kit — $54.95 USD
  4. Pantone 10 Notebooks — $19.95 USD
  5. Panobook — $20.00 USD

Desk accessories

Whether you’re hammering away on designs on your Mac in your home office, or firing off smartphone emails from a coffee shop, it’s important to keep all your pertinent documents and tools front and center. Here are a few tools that will help your lucky gift recipient set up all their design gear, whether they’re at home or setting up shop on the go.

D9d0378d7494bf42432775d8d9fac963

PRODUCTS:

  1. Ugmonk Gather Basic Set — $149.00 USD
  2. 2020 Stending Poster Calendar — $36.00 USD
  3. Concrete Desk Set — $50.00 USD
  4. Bellroy Classic Pouch — $49.00 USD
  5. Good Vibes Collection Laptop Case — $25.00 USD
  6. Poketo 13” Minimalist Folio — $58.00 USD

The fun stuff

Who said designer gifts can’t be both functional and fun? We’re going to help you level up your gifting game with some selections that celebrate the triumphs and tribulations of being a designer. That way, whether your recipient is rocking them in the office, or posting about ‘em on social media, these unique gifts will let the world know they’re a designer, and they’re darn proud of it.

B2e3112d66f9adf5d0f5c85d53fd76bc

Products

  1. Misc. Goods Co. Playing Cards — $15.00 USD
  2. Ampersand Socks — $19.00 USD
  3. Gradient Puzzle — $25.00 USD
  4. CMYK Temporary Tattoo (Set of 2) — $5.00 USD
  5. RGB Temprary Tattoo (Set of 2) — $5.00 USD

Give the gift of learning

Sometimes, the best gift is the gift of knowledge! Whether it’s learning some illustration skills, boning up on your typography tricks or typeface histories, or finding novel ways to think yourself out of a creative rut, we’ve got some great gifts with an educational bent that will make any designer swoon.

35c4e007292461eff0f5d3cd86db1798

Products

  1. Spark Creativity: 50 Ways to Ignite Bright Ideas — $12.95 USD
  2. Vintage Typography Notecards — $14.95 USD
  3. Fifty Type Specimens From the Collection of Tobias Frere-Jones — $24.95 USD
  4. Oblique Strategies — $54.44 USD
  5. Skillshare Gift Card — Various pricing options
  6. A Book Apart Gift Card — Various pricing options

UI/UX design tools

Who says digital designers can’t also get their hands dirty when it comes to sketching out things like user flows, wireframes, or UI elements? These design process tools are not only eminently useful, but they also make nice holiday items for the designers in your life who are building sites, apps, or other digital products.

04b597dd7f53d7d917cbb9026bc4ea02

Products

  1. UX Index Cards — $9.00 USD
  2. User Flow Stencil Kit — $24.00 USD
  3. UI Starter Pack — $65.00 USD
  4. Wireframe Deck — $19.00 USD

That’s it, friends! Get out there and shop for your designer with confidence. We hope our list of gifts will satisfy even the most discerning designer wishlists—happy holidays!


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

Building trust as a designer

• Building, Designer

Being a designer is a constant balancing act. Whether it’s finding a balance between users’ needs and an organisation’s needs, or forgoing a better design to deliver something quickly, we’re always making trade offs.

One of the trade offs I’ve been thinking about lately has been the one between building trust with your users and fostering positive relationships with your teammates.

In an ideal world, we’d all be fighting the good fight and prioritising user needs at all costs, regardless of objections from others, or logistical constraints like time and money.

But in reality, it’s very hard to advocate for users if you’ve lost the trust of your team.

To do our work effectively, we need to build trust in both directions.

Being a developer working with designers

I began my career as a frontend developer. Designers would hand me mock-ups and I’d code them up. The designers I worked with were passionate about getting things to look right.

I took pride in making interfaces cross-browser, accessible and ‘pixel perfect’.

But I also learned that websites don’t need to look the same in every browser and that users don’t really care about pixels—not beyond being able to use and trust your product.

I tried to influence my team to consider user needs. But the designers I used to work with wanted absolute adherence to their designs.

They also valued the ability to code past constraints—embracing constraints and pushing back didn’t elicit the best response—and the conversation would quickly break down.

Putting users first

I was left frustrated, and hoped to find work that would let me prioritise user experience and simplicity.

And thankfully I managed to do that when I joined Just Eat. I worked closely with a designer called Mark, who shared my ethos, advocating for simplicity over pixel-perfect design.

It was possible to put users first and I was happy doing that.

Facing constraints

I’ve always faced constraints in some form, both as a designer and a developer.

One story I have involved cutting the scope of our MVP by 50% to launch Kidly, an online store for baby products.

But more recently, working in government, I’ve had to deal with different kinds of constraints that I hadn’t encountered in the private sector.

Budget restrictions are a different ball game when you’re talking about taxpayers’ money, and policy and legislative requirements mean you can’t always take the most user-centred approach.

I met some amazing designers, doing the best work they could within the parameters they faced, and I began to empathise with the need to accept constraints and respect the limitations of those around me.

Designing the impossible

Some years later, I came across Craig Abbott’s article, designing the impossible.

Craig says it’s our job as designers to push for better, a lot better. Not to bow down to pressure when developers push back on our designs because of [insert technical constraint here].

And it’s true. If you embrace every constraint that comes your way, you’ll only ever design a subpar experience.

But, pushing for the impossible isn’t always conducive to building trust with your colleagues. And it got me thinking some more.

Finding a balance

We gain trust with teammates by being valuable and practical. By being a team player. It’s a difficult balancing act when you want to help your colleagues do the basic thing but also push to make things better.

I’ve been to many backlog refinement sessions, where my work has been scaled back to deliver faster.

And I’ve been okay with that. Not just because I want to deliver faster, but I want to build trust by taking my ego out of the equation — something that I learnt from Mark.

But I sometimes wonder if I should have fought harder to make sure our users get a better experience.

Is it my job to be realistic and empathetic to constraints, or to be the persistent voice of the user who makes stuff better at the cost of momentum and team morale?

As with most things, it depends.

The length of time spent on a team, your team’s size and capacity, and the deadlines you’re facing, all factor into the equation.

I’ve found both approaches are valid, and which I choose depends on the situation at hand.

Building trust

Being a designer is full of challenges and tradeoffs. But that’s why it’s a job. That’s why we call it work.

We have to learn to push for the impossible while navigating and respecting the constraints of the people and organisations we work with.

Working out when to push our products to work harder for our users, or let go and accept a bit less is a skill. But it’s a skill worth honing, and one I’m still continuing to learn.

Push too hard and things fall apart. But avoid conflict and we may as well not be there.

Thankfully trust can be built up over time. And it’s reciprocal. So when you give it, you tend to get some back.

By working to give trust and to earn it back, with both our users and our teammates, we create the space we need to do our best work.

Thanks to Amy Hupe for turning my messy thoughts into something coherent.

—

I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below:

Site Design: The Geek Designer

• Design, Designer

Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer
Designer

Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director
Art Director

Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek
Geek

Be a Better UX Designer with Heuristics

• Better, Designer
be-a-better-ux-designer-with-heuristics

I like usability heuristics. Instead of us all solving the same problems over and over again, we can refer to tested and proven heuristics to inform user interface designs.

Heuristics can improve the efficiency of your design team in two important ways;

Settle Disagreements

In design reviews or day to day collaboration, designers will disagree about a specific design choice or direction. For example: what formats a date entry field should allow? What if I tell you the answer is already known.

Jakob Nielsen’s famous UI design heuristic includes a heuristic about error prevention. It states that you should strive to prevent errors rather than trying to design good error messages. The implication is that instead of asking the user to enter a date, let them select a date form a calendar.

This example is a bit a contrived, but the idea applies in many scenarios. If you find that your team gets stuck in arguments about designs, try and define a set of agreed-upon heuristics that you and your team will follow. Then whenever you get stuck in a disagreement, try and use the heuristics to settle the differences.

More efficient usability tests

I often hear UX designers complain about the lack of user testing as part of their design process. And I agree, there is no substitute for getting your product in front of a user and seeing first hand the stumbling blocks and pain points of your designs. But if we struggle to find resources and time to perform usability testing, then we should aim to use the time with users most effectively.

In a usability test with a user, we want the user to identify the problems that we are unaware of and that we are incapable of identifying on our own. However, sometimes, a user interface has a usability issue that is obvious and has an obvious solution. Then instead of the user identifying invisible problems, they get stuck on the obvious ones.

Therefore, before we go into a usability study, we should make sure that the design is without obvious usability flaws. And the best way to identify such issues is with an expert review using usability heuristics.

An expert review is a purposeful evaluation of a user interface using a set of heuristics as the evaluation criteria. The idea is to identify areas where the design is in breach of the heuristics, which indicates possible usability issues.

To understand when and how to use expert reviews, consider the following differences between the two:

  • Expert reviews require less planning and preparation
  • Expert reviews cannot identify all usability issues
  • Usability tests can identify more issues than expert reviews can
  • Usability tests results are more convincing than expert reviews

There is no substitute for usability testing with real users. We are not our users and we will never be able to design a perfect user interface the first time. But usability testing is hard and usually happens less frequently than we would like. Therefore, we should include purposeful expert reviews in our design process to identify obvious usability issues. Then our usability reviews can identify problems that we were unaware of an unable to find ourselves.

From freelance designer to creating a profitable creative software tool

• Designer, Freelance
from-freelance-designer-to-creating-a-profitable-creative-software-tool
The journey to ramen profitability

In just 4 months and 14 days since we have started charging for our product and about 13 months since our online video editor went live, we have hit an important milestone, we have hit ramen profitability.

As of mid October 2019 we are at $5000 in monthly recurring revenue, VEED now pays for two full-time founders (myself and Tim) and two part time developers (Mate and Veljko… Love you guys)

Ramen Profitable 

“Ramen profitable means a startup makes just enough to pay the founders’ living expenses” – Bad Man PG

We have hustled pretty f****** hard to get here and learnt a LOT along the way. There were a couple of moments where we thought it was all over, like the time we ran out of money and had to get contract work, or the time when we were kicked out of our office.

Oh and time our first two developers quit working for us immediately on the same day. But through all these drastic highs and lows, we have continued to move forward and grow.

Ramen profitability is a huge milestone, but also marks the start of the next big phase of our startup journey as we are moving towards finding product market fit and starting to scale our product to thousands of monthly paid users.

In this post I am going to go through and describe our journey as to how we got to where we are right now and document the main milestones and lessons we have learnt along the way. As bliss as our progress might have seemed from the outside, it has been a real grind with many ups, downs, failures and fuckups. So here goes…

The Backstory – $0 MRR

To start, I think its important to set the scene. In 2014 online video was hailed as the new BIG thing, everyone was banging on about it. We both could see a cultural shift accelerating. We were watching more YouTube than TV, we were flicking through Instagram more than magazines and we were not alone, all our friends were doing that too. Quality user generated content was winning in a big way.

The fact that you can shoot high quality videos with a smartphone and distribute content globally free of charge was changing how we were consuming media and in its wake creating a new generation of celebrities, influencers and publishers. In turn inspiring even more to create. Brands started to take note and the old model of creating two blockbuster TV commercials a year to connect with your audience started to become less relevant.

At this point, I realised that most video editing software was designed for making films and TV shows, not short snappy social media content. After searching, I found no editor that was powerful, yet simple enough, that would allow you to construct a narrative or tell a story. We thought there is definitely a gap in the market, but we were not sure what it was just yet.

The type of videos I was making at the time

We thought we were a great team to solve this problem. I was a recent grad from Central Saint Martins, I had directed music videos for Sony music, had experience working in advertising and branding agencies and a bunch of startups too.

Tim worked on a research project at King’s College London and built an automated video editing platform that used AI and Natural Language Processing to summarise news articles and turn them into short, bite-sized informational videos (the project was called VEED)

Tim and I did some research and really liked how Giphy’s gif maker worked and thought it would be super cool to make something similar for video editing. I started designing, Tim started coding.

Early VEED UX design – October 2017 

When we messed – $0 MRR

After Tim graduated from King’s College London, we then applied to his university accelerator and got a place. We had the designs, an MVP and were ready to hit the ground running. Tim still had the veed.io domain name, and thought it sounded like video so we used it.

First day of Kings 20

We had limited runway, just enough to cover 3 month of the 12 month program. So we thought that we could win some cash by entering pitch competitions. So we changed our idea from simple online video editor, to automated video editing….

We got really good at winning pitch competitions, like REALLY GOOD. In fact, we won cash at pretty much every competition we entered. We got flown to Dubai to present it at a conference, a VC firm gave us free desk space because they thought we were onto something and we netted tens of thousands of pounds in prize money… crazy right?

Flying, TV, Pitching

During those 6 months we won thousands in grant funding, we were balling and everything was going amazing, so with the money  we hired two talented students to help us build this highly anticipated award winning product. From the outside, it might have looked pretty rosey. This is how you run a startup right?

The product seemed like a GREAT idea. The BIG problem was all of the people who said we were doing so well were and awarded us prize money where not our target customers. After that we have built the products MVP, we have spent months trying to sell it with no interest, we got close a few times, but it was clearly not going to work.

So we had a product no one wanted and with about 6 weeks runway left. We got the team to rip everything apart and pivot back to our original idea, the product we had wanted to build from the start – a simple online video editor.

It was horrible, the worst summer ever Tim and I have ever had, we were broke, our startup was not working. To make matters even worse in those last 6 weeks, both of the students we hired had quit and walked out on the same day, a week later the VC firm that gave us free desk-space kicked us out too. It must have been pretty obvious we were crashing hard.

We where lost

So Tim got a contract Job and sent me half his wages every week so I could keep running the company. Tim would meet me in the office at 6am every morning and then headed off to his contact job for 9am and I would continue hacking and marketing till later in the evening. Fortunately, we managed to launch and get some early users with our MVP.

Early MVP and Traffic

A few weeks later, while eating a hot dog on London Southbank, I got a cold call from a recruiter offering me a contact job too. We both were tired, drained, and needed a break and some cash too, so I took it.

This is the part where the easy thing would be to give up. We could have easily just fallen back to getting paid well through contracting. But we did not want to give up that easy, we understood the mistakes me made and knew how we could fix them.

Lesson learnt:

  • Winning awards is not the same as running a company
  • Build stuff your users want
  • Validate with your users before building
  • The co-founder relationship needs to be strong
  • Know when to pivot  

BETA – $0 MRR

Tim and I were working weekday mornings, evenings and weekends and after a few months it was paying off, we were talking to users and our startup was growing. As we were getting paid pretty well while contracting, we thought it would be a good idea to hire two developers to keep VEED moving at a good pace.

We searched high and low and where SUPER lucky to eventually find Veljko and Mate. We have learnt a lot from our previous failed hires and vowed to never make the same mistakes again.

Traffic was increasing every week and just 4 month after everything came crashing down, we had built VEED to 20K monthly active users. As my contract job came to an end I moved back onto VEED full time with Veljko and Mate. We were building fast, iterating on product and growing at a good speed and Tim was working all hours too and kept company’s runway topped up.

Lesson learnt:

  • It is possible to have two jobs
  • The only time a startup fails, is when your let it fail
  • Talk to your users and iterate fast

First Paid Users – $200 MRR

I received an email that recommended we apply to join the next cohort of well known startup accelerator.

Tim and I thought that there is no harm in filling out the application, so on a train ride home to see my mum, a few days before the deadline, I filled out the application.

To our surprise a few weeks later we had a phone interview, that went well. Just 4 weeks later, we were in Mountain View California interviewing for a place on the program.

Essentially, we got rejected, and from our rejection email feedback, we believed we got rejected for not having any revenue. So we added a $5 pay wall that weekend and converted our first 20 paid users. We then emailed them and asked them to reconsider.

Rejection email after interview

They said no..

Unfortunately, as this weekend was so mad, we did not have time to appreciate the huge milestone that we just overcome. We had always dreamed of making our first monthly revenue online and now we had it. What was even more shocking is that we found 20 users that weekend to pay for our buggy video editing app.

Lesson learnt:

  • You need to charge your users early to learn if this is a product they will pay for.
  • By charging users, you will understand where the value is for them.
  • Rejection is not a bad thing.
  • It is not always easy to not see the value in something you have built.

Summer 2019 – $3000 MRR

We returned back on London in mid June, doubled our prices to $10 and got our heads down talking to our paid users. We quickly worked out that for our paid users adding subtitles to videos and also automatic subtitle transcription were by far the most popular features. With this knowledge, we worked hard on making those features amazing.

Since we started making money, we began getting a lot of inbound investor interest. Additionally investors we previously spoke with also started to get super keen. Ultimately we decided to not take any investment, we did not want any distractions and though the lack of runway would make us focus hard to getting our product to profitability.

In July we have built a load of new features that our users did not want, like video effects and video templates.

Which was stupid.

But we wanted them ourselves, so we have built them anyway. We also changed a lot of our development processes to enable us to move much faster and speed up our lead times to deliver features and bug fixes. All this allowed us to hit 2oo paid users.

In August, we had realised that at our current growth rate we would run out of money in the next 3 months yet again. So we doubled our prices again to $20 and something CRAZY happened.

  • Users continued to pay for our app
  • Churn fell by 40%
  • New users drop by only 10%

Following this, we had our best month yet and best of all, we were projected to reach ramen profitability on the exact same week our personal funds would run out.

Summer this year was good

As counterproductive as putting prices up feels, charging $20 for VEED brought in a different and more serious type of user, they need the product and they are happy to pay for it and have different needs to the $5 users we originally had. Things started looking up for the first time in ages.

Finally overtime, our product matured and stability got better, we believe this is also a leading factor in how we reduced revenue churn to from an embarrassing 40% to less than 10% in just a few months.

Lesson learnt:

  • Put your prices up, again and again.
  • Don’t build features for the sake of it, it is a waste of time.
  • Try to avoid unnecessary distractions like investors.

October 2019 – $5000 MRR

October 17th, 2:02pm – $5K MRR, after everything we have been through to date it does not feel real. Altho we have pretty much made every mistake in the book many times over and I believe we will continue to keep messing up too, but our trajectory suggests we are not going to have to go back to contracting now. We are really excited to continue building our product and now can also see a path to really accelerate growth.

Lesson learnt:

  • Getting your first company off the ground takes longer than you think.
  • A profitable companies don’t rely on anyone else.


How do we run VEED on $5K Mo?

Tim and I pay ourselves about $1666 each and we pay Mate and Viljko the same. In not sure how everyone else spends their money, but this is a breakdown of how I spend my money.

$600 Rent

$200 Bills

$200 Social Life

$100 Eating out

$100 Travel

$100 Maybe a new pair of trainers or something..

It’s not a lot, I cut corners where I can; I pack lunch, ride my bike to work (much nicer than the tube), make the most of free drinks at events before going out 😉 But we are all so happy to be working on a product we love, it really does not matter. We are filled with excitement and push hard for growth.

Cycle everywhere 

We have free cloud services for the next 8 months, but will easily cover this by the end of next month too. All other bills come out of our personal accounts right now.

Final Thoughts

We really hope this blog post was valuable. We would love for other early stage founders to read and share this so others do not make the same mistakes we did. Join our mailing list if you would like to get update from us as we build our VEED and as always, feel free to drop us an email if you have any questions.

Subscribe to VEED Blog

Get the latest posts delivered right to your inbox

Are You Too Old to Be a Web Designer?

• Designer
are-you-too-old-to-be-a-web-designer?

If you’re considering a career switch, or simply wondering if you’ll be able to keep up with the fast-paced and ever-changing landscape of the web, this post is for you.

There’s nothing nice about asking the question “How old is too old to …?” So, I’m going to start by getting the answer out of the way, right now: 

You’re never too old to… 

…become a web designer…

…transition from web designer to UX designer…

…become a full-stack designer-developer powerhouse…

…or do whatever the heck it is you want to do.

Whatever your goal might be, age isn’t going to hold you back. The only thing that’s going to do that is you.

Are You Too Old to Discover New Skills?

For every time you’ve heard someone blame age for a negative outcome — You’re forgetful? It must be old age! — you’ve likely heard a story about someone who didn’t let age hold them back from learning something new. Like the grade school dropout who not only earned their high school diploma but a university degree decades later. Or the immigrant who had little knowledge of the native tongue, only to launch a successful enterprise in their new home.

The brain is an incredibly powerful muscle. You just need to know how to make the most of it. Here’s how:

Tip 1: Lean into Your Confidence

Many times, one’s ability to learn a new skill is contingent upon how confident they feel in it. For instance:

If you tell yourself, “I’m too old to learn something new at this stage in my life”, where’s the motivation to make the effort? In this case, it becomes a self-fulfilling prophecy wherein, if you fail, you can brush it off as a matter of age. 

When, really, you should be thinking, “If I do X, Y, and Z, I can master the skills necessary to get to the next level.” By thinking through what’s needed and systematically tackling it as you would any other process, you’re more likely to taste success in the end. 

Tip 2: Broaden Your Horizons

There was a paper published in 2016 on the matter of cognitive functioning as we age. It suggests that the real reason our cognitive abilities decline as we get older is because of the way we learn. Specifically, the paper contrasts the methods by which we learned as children to how we learn as adults.

As kids, we’re encouraged to learn as much as we can about as many different things: languages; sciences; history; math; art; etc. 

As adults, we’re encouraged to become specialists: doctors; lawyers; writers; web designers; accountants; etc. 

It’s when we close our brains off and narrowly focus our attention on one career, or area of interest that we harm our ability to learn something new. So, don’t be afraid to dabble in various hobbies or to read up on new topics. It’ll keep your cognitive functioning strong and allow you to learn new skills with ease.

Tip 3: Embrace Newness

Scientific American published results of a study in 2008 that revealed how we “learn by surprise”. 

Essentially, the study revealed that our brains — more specifically, the hippocampus — are able to acquire and retain knowledge much more effectively when it’s new. What’s more, if a concept or skill we’re already familiar with is placed in a novel context, it becomes easier for us to memorize and retain it, too.

In other words, it’s a good thing to look beyond your current skill set. By learning new things, you’ll give your brain the ability to absorb new skills and knowledge more effectively. 

Tip 4: Exercise Your Brain

Dr. Ipsit Vahia of McLean Hospital says: 

When you exercise, you engage your muscles to help improve overall health. The same concept applies to the brain. You need to exercise it with new challenges to keep it healthy.

In a field like web design that’s constantly in flux, with new tools and techniques entering the picture, it’s actually easy to get into the habit of “working out” your brain. 

Sign up for the occasional online course to brush up on your JavaScript skills. Attend a local web design or development meetup and trade tips. Challenge yourself with projects that allow you to test out new skills and refine old ones. Just find something that lights a fire under you, and pushes you to do more, not less, with your web design career. 

Wrap-Up

There are two big takeaways here. The first is this: 

Don’t let fear hold you back.

you’re going to have to work for it…that’s true of anyone who enters this industry, regardless of age

If you’re nervous that the web design space is a young person’s game and there’s no place for you in it, you’re looking at it the wrong way.

Think about it: whether you’re 40, 50, 60, or beyond, you have decades more experience than your youthful counterparts. They may have abundant amounts of energy and an innate tech-savviness, but many of them can’t compete with your business-savviness, time management skills, and professionalism. 

The second thing to take away from this post is this: 

Never stop learning. 

If you want to switch gears and become a web designer, you’re going to have to work for it. And keep working at it. But, in all honesty, that’s true of anyone who enters this industry, regardless of age. 

The web is an ever-changing space that none of us should take for granted. If we don’t stay up on the latest trends and continually work on refining our skills within it, we won’t do very well. 

So, stop wondering if you’re too old to learn a new skill and start working on acquiring it!