My name is Alice and 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, to prepare a proposal for a new client, you need to study, come up with and bring to life the concept of the application in just a couple of days. In such situations, there is no room for error.

In March, I spoke at a hackathon that we organized together with the Food Party. Told the participants how to do well in a short time. Based on the lecture, I prepared an article-memo. It will be useful for 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 in a hackathon is time. Think about whether you will have time to realize your plan? If not, simplify and boldly cut off the functionality that you are not sure about.

Did you get a scooter? Great!

At the end, you should have a product that you can launch and show to the jury. So that they have a complete idea of ​​what it is and how it works. Nothing ruins a presentation like "don't watch it now, we'll have it here later...". But do not forget that we are making a product for users.

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

#1 Start from the context

• What are your user's goals?
• Under 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.

Let's take an app with step-by-step recipes for cooking as an example.
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 turn off.
2. Use audio and video track.
3. Use voice control for recipe steps ("next", "repeat", "one step back")

#2 Cut off the excess

« Everything should be presented as simply as possible. But not 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 the Solution one tasks or problems. Let your product solve only one problem - but the main thing is that it works.

#3 Building on best practices

Before starting work, you need to familiarize yourself with the products of competitors and highlight their strengths and weaknesses. So you save yourself from other people's mistakes and, possibly, supplement your interface.

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

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

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

See what they have in common: a white background, just one accent color, a clean and tidy interface without unnecessary features.

#4 Design - today

Use the one night rule - work out not only the structure today, but also the UI. In the morning with a fresh head, it is worth looking at your product. Thoughts will definitely appear on how to improve the user interaction or the visual part. Don't forget empty states and error handling.

#5 Emotional

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

Let's take a look at what tools we have in our arsenal.

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

Font. Try to use no more than two fonts. Do not use small unreadable text - build on guidelines.

Color. Choose one accent color to set the mood.

Photo. Use only high-quality photos in the same style. Consider how the cap for the photo block will look like.

Illustrations. 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 micro-interactions.

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

Your product must be friendly. Win hearts like Rocketbank.

#6 Simplify

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

If the screen needs comments and detailed onboarding, this is a bad screen.
The interface should be intuitive and should not raise questions.
The best interface is no interface. Try to keep the number of steps required for the user to complete the main case to a minimum.

I've put together a small selection of home screens with a single function or clear focus.

Shazam
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 the animation. Ideally, when you want to quickly find out the artist - you do not need to look for a long time for the button that starts the search.

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

Boomerang
A small application from Instagram is 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 conspicuous. Try to check the entire text for literacy. Use short titles. Headings do not need dots. Think over the text of the buttons, the user must understand what happens when they are pressed. Use a language that the user understands.

Examples of how not to write:

Be careful with foreign words (for example, "device"). Will your audience understand them?

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

#8 Take breaks

It is very important to relax at the wild pace of the hackathon. At least not for long. Let's relax ourselves. 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 in the fresh air.

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

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

Remember

The most important

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

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

In March, I spoke at a hackathon that we organized together with the Food Party. Told the participants how to do well in a short time. Based on the lecture, I prepared an article-memo. It will be useful for 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 in a hackathon is time. Think about whether you will have time to realize your plan? If not, simplify and boldly cut off the functionality that you are not sure about.

Did you get a scooter? Great!

At the end, you should have a product that you can launch and show to the jury. So that they have a complete idea of ​​what it is and how it works. Nothing ruins a presentation like "don't watch now, we'll have it here later...". But do not forget that we are making a product for users.

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

#1 Start from the context

• What are your user's goals?
• Under 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.

Let's take an app with step-by-step recipes for cooking as an example.
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 turn off.
2. Use audio and video track.
3. Use voice control for recipe steps ("next", "repeat", "one step back")

#2 Cut off the excess

Everything should be presented as simply as possible. But not 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 task or problem. Let your product solve only one problem - but the main thing is that it works.

#3 Building on best practices

Before starting work, you need to familiarize yourself with the products of competitors and highlight their strengths and weaknesses. So you save yourself from other people's mistakes and, possibly, supplement your interface.

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

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

A few examples of successful products: Instagram, Dropbox, Notion.

See what they have in common: a white background, just one accent color, a clean and tidy interface without unnecessary features.

#4 Design - today

Use the one night rule - work out not only the structure today, but also the UI. In the morning with a fresh head, it is worth looking at your product. Thoughts will definitely appear on how to improve the user interaction or the visual part. Don't forget empty states and error handling.

#5 Emotional

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

Let's take a look at what tools we have in our arsenal.

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

Font. Try to use no more than two fonts. Do not use small unreadable text - build on guidelines.

Color. Choose one accent color to set the mood.

Photo. Use only high-quality photos in the same style. Consider how the cap for the photo block will look like.

Illustrations. 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 micro-interactions.

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

Your product must be friendly. Win hearts like Rocketbank.

#6 Simplify

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

If the screen needs comments and detailed onboarding, this is a bad screen.
The interface should be intuitive and should not raise questions.
The best interface is no interface. Try to keep the number of steps required for the user to complete the main case to a minimum.

I've put together a small selection of home screens with a single 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 the animation. Ideally, when you want to quickly find out the artist - you do not need to look for a long time for the button that starts the search.

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

Boomerang

A small application from Instagram is 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 conspicuous. Try to check the entire text for literacy. Use short titles. Headings do not need dots. Think over the text of the buttons, the user must understand what happens when they are pressed. Use a language that the user understands.

Examples of how not to write:

Be careful with foreign words (for example, "device"). Will your audience understand them?

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

#8 Take breaks

It is very important to relax at the wild pace of the hackathon. At least not for long. Let's relax ourselves. 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 in the fresh air.

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

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

Remember

The most important

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

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

We continue to dispel the myth that hackathons are only for programmers. Still, the word has a root “hack” - here an association with hackers and harsh bearded coders involuntarily arises. Well, once upon a time, hackathons were really held only for them. And by them.

Today everything is different. A hackathon is a format that brings together professionals from a variety of industries. Programmers, designers, marketers, managers, entrepreneurs (and sometimes even musicians, doctors, journalists, civic activists...) all get together in teams, stock up on food and oxygen in order to launch their project in a short time. Often at the limit of capacity, intercepting several hours of sleep right on the battlefield. But would you know how much pleasure gives realization: we did it!

So, designers have several reasons to go to a hackathon.

Reason 1. Challenge

In fact, only such work can be considered true “interface design”. In general, the first reason why a designer should at least once try to go to a hackathon is a chance to challenge himself professionally. And win.

Reason 2. Good company

As one HackDay member recently said: “first of all, it is a wonderful alternative to weekends spent at home.” By and large, there is nothing to add to this.

Hackathons have a special atmosphere of a seething “intellectual cauldron” – and it in itself contributes to the birth of creative ideas and the right design solutions.

Reason 3. Useful acquaintances

In general, do you often get a chance to meet hundreds of people who think the same way as you, are interested in about the same things, are excited by the same ideas?

It is especially useful for freelancers to get acquainted with projects that will most likely need the work of a designer later.

In addition to fellow developers, you can talk to experienced startup market players (invited as mentors) - their advice is often more useful than all the business books put together.

Reason 4. New project in the portfolio

Reason 5. Teamwork in a real startup environment

Yes, a hackathon is a test of strength. It’s not for nothing that we are giving out T-shirts “I survived on HackDay” to the participants :)

But if you had thoughts of going to do something of your own, you can fully enjoy the everyday life of a startup. In fact, it is an unforgettable experience.

Reason 6. Ability to implement your idea

Evan Spiegel, one of the co-founders of Snapchat (the one that Zuckerberg wanted to buy for $3 billion) is an industrial designer by training.

The last reason - enough reasons

In general, we are one hundred and forty-seven percent sure that designers can find a use for themselves on HackDay (and any other hackathon with proper organization). You need to understand that this is not a competition where designers fight with coders for the right to call their application the best. This is a team effort that brings the right results and opens up a lot of opportunities.

Therefore, we invite, wait and believe in you. We truly believe in you. Come to HackDay and make a cool project. Let's!

On July 30-31, 2016, the Polylog consulting group organized an international design hackathon for Sberbank Technologies in Moscow. In this article, we will talk about the features of this format and share some of the solutions that we used to organize and conduct the hackathon.

For those not in the know, a hackathon is a marathon for software developers. In our case, designers and UX specialists gathered at the hackathon to develop solutions based on the Unified Frontal System (UFS), Sberbank’s global IT platform, which is being developed to provide multi-channel customer service in one window mode.

We have planned our work on the preparation and holding of the hackathon in four areas: attracting participants, technical support of the site, working with the program, PR support.

Attracting participants

Immediately after deciding to start working on the project, we realized that it would not be so easy to gather participants: it is easy to find a programmer, it is not easy to find an interface designer and a UX specialist. Unfortunately, there are no databases of contacts of people with such a specific profile of activity on the Internet. Our participant search algorithm included several components.

We turned to our partners, Digital October and Habrahabr, posting information about the hackathon on their websites and sending out mailings to their databases. We also created a database of the most reputable digital agencies and design studios in Moscow, St. Petersburg and several other million-plus cities, which gave more than 400 contacts for calling.

The next block is professional associations and communities. We sent information about the hackathon to the Russian Association for Electronic Communications (RAEC), the Regional Public Center for Internet Technologies (ROCIT) and Apps4all. In addition, invitations to participate in the hackathon were sent to schools and design studios: the British Higher School of Design, Netology, the Specialist Center, Redmadrobot, etc.

Polylogue did not bypass headhunting agencies SuperJob and HeadHunter in the invitation campaign. We also sent information about the hackathon to institutes and universities, but this channel for attracting participants did not work in this case: July, all students are on vacation.

Technical support

DI Telegraph was chosen as a venue for the event, where it was possible to comfortably accommodate teams of designers and programmers. Bearing in mind that one of the features of hackathons is continuous work for a long time (in this case, 48 hours), we provided a full three meals a day for the participants, and a special “refueling” zone where participants could find tea, coffee and snacks at any time of the day or night. We also took care not only about food intake, but also other aspects of the comfort of designers - when calling after the completion of registration, Polylog employees recommended that participants bring a change of clothes with them. Sofas and ottomans were provided for the rest of the participants. Everything was planned, but the weather intervened: the last weekend of July turned out to be very hot. And then it turned out that the DI Telegraph building does not have air conditioning. All windows were urgently opened, all fans turned on, but this, unfortunately, could not greatly reduce the temperature of the already tense atmosphere of the competition. So the next time we prepare an event in the summer, we will definitely check the condition of the air conditioning system.

Working with the program

Special content for the hackathon - marketplace technologies, machine learning, Big Data, smart scenarios for processing information and models for working with clients - was developed by Sberbank Technologies, and the task of the Polylog consulting group was its adaptation and integration into the event program. In addition, the development of the actual program (time plan, etc.) fell on our shoulders. Having dealt with the specifics of the content and adapted it to the format of the event, we held rehearsals for the opening of the hackathon, the main events during the event, and the awards ceremony. It should be noted that the customer had new wishes during the event, and we, therefore, had new tasks. We promptly put these wishes into practice: for example, just before the awards ceremony, we changed the names of the nominations to better match the results achieved by the participants.

PR support

The main difficulty that Polylog faced when preparing PR support for the Hackathon was the need to simultaneously work with three different types of media: IT publications, banking media, publications for mobile developers. To do this, we have developed different approaches to work with them, which made it possible to involve the media of all three types in the coverage of the event. Polylog CG entered into information partnership agreements with Interfax, RIA Novosti, Bankir.ru, Analytical Banking Journal, PC Week, Apptractor.ru and other media. As a result of the hackathon, more than 100 messages were published.

Results

Despite the very tight deadlines for preparing and holding the event, the international design hackathon of Sberbank Technologies was held at a decent level. 40 teams were registered, 16 of them went to the face-to-face round, the best solutions were awarded with cash prizes and gifts.

22 Aug 2016