Hackathon Design

My name is Alice, I am a senior designer at Touch Instinct. We are an outsourcing company. Speed ​​is one of the most important criteria for evaluating our work, along with quality. Sometimes, in order to prepare a proposal for a new client, you need to study, invent and implement the concept of an application in just a couple of days. In such situations, there is no room for error.

In March, I performed at a hackathon that we organized with the Food Party. She told the participants how to do well in a short time. Based on the lecture, I prepared an article-memo. It will be useful to team members who plan to participate in hackathons, as well as novice designers.

Time is our enemy

It doesn't matter how brilliant the idea is in your head. The only thing that matters on a hackathon is time. Think about whether you have time to implement your plan? If not, simplify and boldly cut off functionality that you are not sure about.

Did you get a scooter? Wow!

At the output, you should have a product that you can run and show the jury. So that they have a complete idea of ​​what it is and how it works. Nothing spoils the presentation like "don’t look now, then we will have here ...". But do not forget that we make the product for users.

Design tips

Let's figure out how to make a quality product in a day.

# 1 Stay out of context

  • What are your goals?
  • In what conditions will he use your product?
  • At what point will the product be accessed?

From the very beginning it is worth discussing these issues with the team.

Take as an example an application with step-by-step recipes for cooking.
The main limitation in this case is busy or dirty hands.

There are several ways to simplify user communication with the application:

  1. Put all the necessary information on one screen. The screen should not go blank.
  2. Use an audio and video track.
  3. Use voice control according to the steps of the recipe (“next”, “repeat”, “one step back”)

# 2 Cut off excess

Everything should be presented as simple as possible. But no more. ”- Albert Einstein.

You can see many ways to develop your product, the main thing is to highlight the main idea and choose which part can be launched in the first version. Focus on solving one problem or problem. Let your product solve only one problem - but the main thing is that it works.

# 3 Build on the best practices

Before you begin, you need to familiarize yourself with the products of competitors and highlight their weaknesses and strengths. So you save yourself from the mistakes of others and, possibly, complement your interface.

If you are creating a mobile application, use the guidelines and popular libraries. This will speed up your development, and for users, the interface will be more familiar.

Another tip - rely on the experience of large companies. You may have a completely different theme, but you can adopt something from the style.

Some examples of successful products: Instagram, Dropbox, Notion .

Look at what unites them: a white background, just one accent color, a clean and neat interface without unnecessary functions.

# 4 Design - Today

Use the one-night rule - work out today not only the structure, but also the UI. In the morning with a fresh head is worth a look at your product. There will definitely be thoughts on how to improve user interaction or the visual part. Do not forget about empty states and error handling.

# 5 Arouse emotions

Actually, it doesn’t matter what you develop on the hackathon - a mobile application, a chat bot or something else. Design is communication with the user.

Let's look at what tools are in our arsenal.

Text. Write simple and clear text. Decide on the style direction - it should be inherited throughout the application. Do not overload the user with unnecessary information. Be friendly - give tips and tricks.

Font. Try to use no more than two fonts. Do not use small unreadable text - make a start from guidelines.

Colour. Choose one accent color to set the mood.

Photos. Use only high-quality photos in one style. Think about what the stub for the block with the photo will look like.

Illustration. Illustrations work very well in onboarding and on empty states.

Animations If the team has a designer - great. You can experiment with onboarding or work out microinteractions.

A good example of working with emotions is the Rocketbank application. In the support bar there is a heart icon. In correspondence with a bank employee, you can attach a document, photo or send love. Love is sent in the form of a sticker with a heart. And what's more, the sticker download spinner is also in the shape of a heart. Very loving bank.

Your product must be friendly. Conquer hearts like a Rocketbank.

# 6 Simplify

During the development process, do not forget about critical thinking - constantly ask yourself the question “how can this be simplified?”.

If you need comments and detailed onboarding to the screen, this is a bad screen.
The interface should be intuitive and should not cause questions.
The best interface is the lack of an interface. Try to keep the number of steps necessary for the user to complete the main case to a minimum.

I have compiled a small selection of main screens with one function or clear focus.

Probably everyone is familiar with this product. When entering the application, the emphasis on the button is set not only by its size, but also by animation. Ideally, when you want to quickly find out the artist - you do not need to look out for a long button that starts the search.

An application that converts sounds that come from a microphone. In fact, this is just a set of sound filters that you can swipe. Nothing extra.

A small application from Instagram - a camera that allows you to make looped mini-videos. A couple of camera controls and an archive are all you need.

They look concise.

# 7 Write clearly

Errors in the interface are very striking. Try to check the entire text for literacy. Use short headers. Headings do not need dots. Think over the text of the buttons, the user must understand what happens when you click. Use a language that the user understands.

Examples of how to write do not need to:
Be careful with foreign words (for example, "device"). Will your audience understand them?

Read advice on stop words in the interface from the Gorbunov Bureau.

# 8 Take breaks

It is very important to relax in the wild pace of the hackathon. At least not for long. Let's get distracted. It is desirable that these were not social networks, but a change of scenery. Go make tea or coffee, go out for a couple of minutes into the fresh air.

If you want, you can use the Pomodoro technique . It consists in dividing working time and rest time into periods: 25 minutes you are working on a specific task and you are resting exactly 5 minutes. If such a luxury is not permissible due to tight deadlines or knocks you out of the flow state, determine the working hours for your team and general breaks. For example, 55/5.

Why is all this necessary? The look is not blurred. A short break will give a little strength. Perhaps you will see a solution to the problem or an error that you did not pay attention to.


The most important

You make a product as part of a hackathon. Your task is not only to do something working, but also to interest everyone with your idea, to be remembered.

Do not forget to rehearse before the defense and try to show the full amount of work done.