Pro Hackathon Tips for Designers
Ace the hackathon journey & become better
25 tips and learnings I would like to share with every designer who wants to participate in hackathons and win their way out.
I’ve categorized this article into 3 sections: What to do? What not to do? and things to remember. All the below points apply when you’re preparing for the hackathon and while you’re at the hackathon.
What to do?
1. Become the Mastermind
As a designer, you are a problem solver, a design thinker, the one who does the research, makes user personas, decides the best target audience, should know the extended features of your product, how to make your product more accessible. You are supposed to think about all these things and help your team to come up with a useful product.
2. Help in Assigning Work
Try to take lead, you should be familiar with all the domains in which your team members are such as app dev, web dev, ml & ai, AR/VR, etc. So that you are able to decide what work is to be started first, what’s more important to begin. Ask your teammates and decide mutually.
3. Finalize the Features
As a designer, you should be focused on user-centric design, what all features and elements are required to create a fine product that users would love.
4. Always do Research & Competitive Analysis before proceeding with wireframes
Trust me, knowing the requirements, needs, features beforehand helps a lot in sketching out ideas.
There might be times when you are designing almost the same product which is already there in the market. Make sure you study the competitor apps/website and find out their pros and cons.
Try to make a user-flow, maybe start with draw.io
5. Design the complete flow(all the screens) with low fidelity wireframes first
Rather than focusing on designing the complete UI for each screen first.
6. Make designs that are fast and & easy to develop by the developers
Use google fonts, material icons, open-source elements, this way it would be easier for the developer to use the fonts & icons.
Don’t go with complex animations or too fancy user interfaces. Follow the KISS principle, Keep It Simple, Stupid.
7. Use Components
Keep your own set of buttons, navbar, topbar, card designs ready beforehand. Don’t create common buttons/elements again & again. Make a good one first and use that as a component.
8. Make the Prototype
- For the developers to get a clear picture of what & how the product works.
- Make a video of the working prototype and share it with your team.
- Also, Just in the worst case if your app/website is not able to get developed, then you are ready with the prototype at least.
9. Do Testing
Test the functioning and smooth user experience of the developed product, give feedback to the developers.
Always test the app/website design on your phone also, to get a more real experience. Use mobile app of Adobe Xd, Figma Mirror, etc.
10. Think of your solution as an Overall Product
Make a logo, give it a name & follow a basic visual style. Not just about the technical development but about how it helps the user solves a problem.
11. Always test the app/website design on your phone, so as to get more real experience
Use mobile app of Adobe Xd, Figma Mirror, etc.
12. Animate a video if possible, to explain your product usage in a real-life use case format
13. Learn HTML, CSS & JS
It is essential to at least know a gist of how front-end technologies work, so as to understand the possibility and limitations of the development. Also. there might be times when you are required to develop your own designs, due to lack of time or lots of development work.
14. Design Handoff to developers using Zeplin
It’s an amazing free tool used by designers to share their designs with developers. Developers can extract everything required to make the front-end, it provides CSS & XML as well.
15. Try including Gamification elements
This is a new concept and not everyone is familiar with it, this can add a plus point to your product in the hackathon. It’s optional though, as it highly depends on your product.
16. Moderate
Keep asking for progress from others and keep them motivated, try to correct minor UI issues while development time only so that you save more time while testing.
17. Make the Presentation
A good presentation plays the most important role in winning a hackathon, the presentation should be to-the-point, easy to understand, explained things in a playful & quick manner. Using mockups & showing the live working of the product is a must.
After COVID-19, many hackathons happen online, hence make your ppt such a way that you should be able to share it on a zoom/teams call and everything is conveyed well.
18. Give the Pitch
Show the presentation & pitch to the judges, explain with your own simple words, use layman terms. As a designer, you ideated and visualized the product from the beginning hence you should understand the product more than others. Try to empathize with the judges and the audience.
What not to do?
19. Don’t use UI Kits
You might have come across a free UI kit on Dribbble, Behance, or any other website by many Individuals who make them open-source and free to use. All these UI kits are quite well and amazingly designed, but those are not suitable for development in a hackathon. As there is a time limit and front-end is not the only area to focus on.
Note: For android app design you can use an official google material UI kit.
20. Don’t exceed the product screens by more than 10–15 screens
This might be hard to achieve for you as well as the developer in the 24-hour time frame.
21. Avoid unnecessary beautification, extra UI elements that are not necessary. No fancy designs
Things to remember!
22. Always be confident with your design
Don’t lose focus if you see any fancy design made by any other team
23. Don’t focus much on the login screen design
Almost all the beginner designers start designing the login screen first the major screens, they spend a lot of time just designing that login screen. Please don’t do this mistake. The login screen isn’t of that much importance.
24. Focus on UX First, then UI
Although both are equally important, starting with UX first is essential.
25. Think on paper, always keep a notebook & pencil handy
This is very essential to generate ideas, brainstorm ideas, sketch quick wireframes, do rapid prototyping. Thinking on paper can turn out to be a very good habit.
You’ll require to use it a lot, sketching wireframes, noting down ideas, letting it all flow. Try to do divergent & convergent thinking. First, note down all the ideas, then finalize and focus on the important ones.
There might be many other important aspects to consider at the hackathon, but I believe if you will follow the above-mentioned points, then it’ll definitely boost up your productivity and make you unstoppable.
In the end, I would like to say,
In Hackathons, there are some things which are more important than the problem statement and the solution. It’s a good team, an optimistic mindset & never giving up attitude.
These are not just some abstract words I am writing. I have experienced them when these things are and when they aren’t and seen the outcome accordingly.
There should be good team synergy among all the members of the team and decisions should be taken mutually. If anything’s not working out, we should be finding a quick alternative rather than dropping that. Also, following agile, if anything new and important strikes then we should do that right away rather than shifting it to the end.
An optimistic mindset is required, because when you present your solution, then others should really be able to feel from you, that yes, there’s something positive and productive being made.
There might be times at the hackathon, especially when it’s about to end, where you’ll face a lot of challenges, things might not be working the way they should, you’ll be very frustrated. But remember that’s the most important moment, you either break it or make it. Please don’t lose your cool and focus on what could be done to complete your MVP (minimum viable product). Just have the “never giving up attitude”.
I am able to share all this because I have been doing product design for more than 2 years now and have won 6 hackathons till now as a designer in the team. Find me on Linkedin
I hope you realize that hackathons are something really important. They are wonderful opportunities for you to improve & grind your skills, be a team player, and teach you to be more resistant towards negative things. You should try to look at a bigger picture, that you can actually win it. Thinking bigger really helps us to work harder in order to achieve big.
Everyone of us is unique, and we should respect that. I am glad that you are here reading this, because there’s a lot of potential in you. Just don’t give up, don’t give in. There’s always an answer to everything.
Go on, rise and shine!
