What I learned as a design mentor in a hackathon and how it helps me every day
About 2 years ago I volunteered as a design mentor for the Van{Hacks} hackathon in Vancouver. I ended up sleeping in the Hootsuite lounge to make sure nothing went wrong and to provide support to the teams in the form of design feedback and healthy snacks, making me the only mentor who stayed overnight.
It was a really fun, exhausting, and eye-opening experience. I had the chance to interact with many designers working on similar problems, all trying to hit the same deadline. All of them were trying to develop a presentable idea that solved the social challenges presented at the beginning of the hackathon. At the end, they would all present their solutions to the judges and show their approaches.
Having to interact with 16 teams, I started seeing patterns that would slow them down, bring them to a creative halt, and in a couple of cases actually make things worse for other team members. More shockingly, I started recognizing those patterns in my own way of working in the following weeks!
I’m going to share with you 3 of the patterns that many of us UI UX designers repeat, in most cases without even being aware of them or simply not paying attention to them. My hope is that by the end of this article you will walk away with a better understading of yourself and having identified some areas for improvement. And, more importantly, knowing that you’re not the only one going through it. Almost all of us are guilty of at least one of these oversights.
1. Perfectionism!
Finding the perfect font. Making sure every icon is pixel perfect with the right actual and perceptual margins around it. Making sure the layout is consistent on every page down to the pixel. Finding the right shade of blue that will compliment that #DEDEDE background that you spent 20 minutes selecting perfectly. We’ve all been there.
But do you know where else we’ve all been? Having one day left on a project, you haven’t even started on screen two out of ten you’re supposed to present, but you’re still fiddling with the colour picker.
You might think that’s just part of your creative process. That your perfectionism sets you apart and it builds on your carefully crafted designer persona that everyone is now expecting of you.
But do you know what the reality is? Do you know why you can’t start working on the second screen and you’re stuck in the same place for days? It’s not because you’re a perfectionist, but because you’re scared. Scared that your work isn’t going to be good enough. Afraid that your best would make everyone laugh and think, “this is what you’ve been working on for two weeks?” It’s easy to hide behind perfectionism and pretend everything is alright. But it takes a lot of gut to say, “I’m going to give it my best. Whether they like it or not. I’ll give it my best and I’ll use the feedback to improve.”
What we do is hard. We pour ourselves into our work and put it up on display for others to judge. It’s a very vulnerable moment when people look at your work. From their perspective they’ll be judging a solution to their business problems. But from your perspective they’re judging your creativity, your problem solving skills, and all that you’ve worked for to get to where you are.
It’s important to remember the stakeholders’ perspective in these meetings. It’s easy to feel personally attacked when they criticize your work because you poured your soul into it. But remember that ultimately they are paying you to solve a business problem.
Lost my track of thought for a bit… right… hackathon and perfectionism. The point is don’t let your perfectionism, which is in fact your insecurities in disguise, let you miss a deadline.
2. Staying on time.
Another thing that I saw happen in the hackathon more than I wish I had was designers falling behind developers and not having the assets and specs ready when they needed them.
Development in many projects is the slowest moving part and a project as a whole can only move as fast as its slowest moving part. It’s ok for designers to slack around a bit and think of creative transitions between screens and fun micro interactions, but there’s a limit to how much time can be wasted here. You cannot be slower than the development team. Period. Get involved with them early on and ask when they would need the wireframes, the specs, and the assets. It’s very important that you schedule your time so that you will be finished before them. The worst thing that can happen to a project that’s constrained by time is to come to halt because developers don’t have what they need to move forward. And believe me, you don’t want to be the reason that a whole project comes to a stop while you rush to make the screens that are missing because you forgot to add the forgot password screens, while everybody else is waiting for you and the stakeholders are breathing down your neck.
Figure out when you need to deliver each of your deliverables, be done earlier, and use your extra time for “perfectionism.”
3. Don’t waste precious time making non-essential things.
We’ve all been there. You just finished designing the login screens and now instead of moving to the rest of the project you spend 2 days working on animations and transitions between the register page and the login page. You’ll end up being late for passing the assets to the developers and none of those animations make it to the final product.
Learn the scope of the project early on. Start with simple wire frames and add detail uniformly to the whole project. Don’t waste time that’s needed to create a good structure in the beginning on making the mascot look away when the user is inputting the password.
Make a list of all the pages that are needed for the project. Check them with developers and stakeholders just in case anything is missing. Create as many artboards in Sketch as there are pages in the project, name them and arrange them so that they kind of make sense.
Next, start adding the basic UI elements. To all of the pages. Don’t style anything, you need to get the skeleton right before worrying about nail polish.
Once the skeleton is done, you can start styling and adding the colour palette to the interface and making the small changes. At each step, make the changes on a few pages and once they’re good enough apply them to all other pages. Then, repeat the process to add more details and consistency.
Do not make the mistake of perfecting the first few pages and then applying them to all other pages. You need to do this step by step. That mistake will cost you a lot of time and you will end up doing the majority of your work at the last minute, which will not be good. Things will be overlooked and compromises will be made because you were too busy “perfecting” the login screen, thinking that when that’s done you’ll just apply the same style to other pages.
Do it step by step. This way you will save more time and you will have a better idea on where to focus your energy for the extra animations and micro interactions. Login screens are not the most important pages of the app, but you won’t know that, if they’re the only pages that get your focus on for 80% of the time.
