Corporate merchandise with human UI

My name is Alexander and I work as a former developer for Windows Phone at 2GIS. One day I approached Kirill, the head of mobile application service, and asked: “Tell me, Kirill, head of mobile application service, what should I do to present a corporate merch on behalf of 2GIS?” Kirill replied that 2GIS is a turquoise company, so you need to take the initiative. Under the cut - grocery history, corporate T-shirts, the spirit of a startup, the manifestation of the initiative, a lot of pictures and not a single microservice.



Kirill promised that if I came up with a suitable idea for merch, he could get a budget for it. Those who are at least a little familiar with Cyril, do not have to doubt that the budget really exists, because the word "knock out" sounds quite organic from his mouth. It only remained to come up with an idea. My primitive brain, working within the framework of corporate culture, reflected on the following algorithm.


That is, the options were not particularly. However, not every T-shirt can be proudly called corporate. What makes it so? A small product inside me shyly hinted that just throwing a 2GIS logo on a t-shirt is such an idea. So I thought of typing our corporate hares on t-shirts . Look what nyashechki. There are many different ones, so each employee could choose his favorite.


I needed somewhere to get the source of these animals to print them on T-shirts. I began the search operation by going up to the top floor of our office in the Sun City mixed-use  complex , where designers were playing with fonts in the bowels of the smoky loft. Designers found everything, and they were not even against sharing bunnies, but the marketing department burst in, which once again reminded me that life is not an easy thing. With the marketing department was about such a dialogue.


The guys from the marketing department insisted that on a T-shirt, besides the picture, there must be some kind of signature. At first, of course, I was very upset - my uncontrollable impulse of initiative began to be limited and driven into some kind of framework. But, as one well-known narrow fan admirer of the Wright brothers likes to say , engineers must work in conditions of limitations. Only a constrained engineer can jump above his head, producing a cool product that goes beyond the narrow frame of perception of his limited creators. So it happened.


Initially, a simple idea with hares gradually overgrown with functionality that allows you to set the size and color of a T-shirt, select a picture, create a signature and send an order. I work in a mobile application service; I don’t know how I had thought of such a thing, but an original idea came to my mind: to write a mobile application - designer of corporate t-shirts. So we did. We are a 2gift team, a dream team.



I thought hard and sketched the layout of the application on A4 paper. Here it is.



As you can see, I am far from the genius of prototyping, and over the years I have been at IT I have practically forgotten how to write by hand. However, I had the courage to come with our masterpiece to our designer Alice and ask him to make a cool UI. Alice, perhaps from shock, perhaps from high employment, disappeared for about a week, but returned with mock-ups that set the project a fairly high level of quality.

We made two clients for both mobile platforms: iOS and Android. Further in the article there will be a lot of screenshots. I have an iPhone, and I could easily show you the screenshots of the application for iOS. On the other hand, Android has more users, and many of them know where I live ... In short, so that no one was hurt, all the screenshots in this article are made under Windows Phone.

First of all, we greet the user and explain to him what is going on. Alice said that this is called onboarding.


The inconspicuous “do not understand” button, which few people clicked on, takes us to a page with a detailed description of what is happening. This page was made specifically for such people who read the small text under the asterisk in the loan agreements. There we tell you that you can only order one T-shirt, only for a limited circle of people, the offer is not a public offer, and stuff like that.

After onboarding, we proceed to the employee identification procedure, which boils down to the fact that you just need to select your team and then select yourself from the list. We tried not to forget anyone and carefully transferred all our service colleagues to the application. They didn’t forget about the owner of the office, Svetlana, who is monitoring cleanliness, in order to cajole up in case we didn’t pereobulsya and stomped in the corridor (spoiler: it didn’t help).


We proudly declare that this is the most unprotected identification procedure in the world. For example, nothing prevents you from choosing someone else’s team, choosing an employee you like (or not liking) and ordering him a cool T-shirt. Or not so cool. But we thought that in our cozy office in Akademgorodok, where everyone knows each other and can reach each other with their feet, you should not bother with securism, and possible incidents will be resolved in a natural, say, way. In the end, all turned out to be honest nyashami and placed orders only for themselves, ui!

Next, choose the size of the T-shirt and the beast, which we will print on this T-shirt.


For employees who rarely buy clothes for themselves and therefore poorly represent their size, we delivered a test batch of basic T-shirts to the office and left them at the reception on the day of the “release”, which was helpfully reported in the application when I clicked on the inconspicuous “I don't know size ". Character choose from 48 available options using swipe left or right.

Next, choose a signature that will be on a T-shirt.


The very first signature is generated after the user shakes the smartphone. The first signature is the most important, there are a lot of emotions in it, therefore we were not lazy and for each employee came up with his own close and dear phrase. For example, if the conditional Rustam last two sprints were engaged in supporting the GDPR , then he would certainly be happy to see his favorite abbreviation here.

Signature can be changed. This is done either by shaking the smartphone or manually. When shaking, the signature is chosen randomly from a limited list of little words that we find funny, absurd or funny. Phrases like “understood users” or “realized deadlines” are typical representatives of this list. When manually selecting the employee sees the full list.

Each signature consists of two parts. The first is always a verb. For example: I got wet, dragged, saved, pumped. We came up with 26 such options.


The second part is usually a noun. These are the names of the features we were working on, or just something abstract from the IT subject. For the second part, we came up with 118 options. Since the first and second parts of the phrase change independently of each other, we get 3068 signatures - there is something to choose from.

I hasten to inform you that we are for gender equality, so on the signature selection screen we conjugate the verbs by gender: employees will see “zakodil”, “tested” in the appendix, and employees - “zakodil”, “tested”.

At the end we draw a preview close to reality, please select the color of the T-shirt and confirm the order.


After clicking on the "What you need" button, we warn that changing the order parameters will no longer work, and if the user confirms that he has made the most thoughtful and balanced choice in his life, place an order. After this step, nothing else can be done with the application, and upon repeated visits, the user will always see this final screen.


This screen will scroll. For some time you can pozalipat it, considering the orders of colleagues.


After everyone had placed their orders, we did the data upload, which included the name of the employee, the color and size of the T-shirt, her model (male or female), ID of the hare, which we will print on the T-shirt, and the text of the signature. With this valuable knowledge, it was possible to start preparing layouts for printing.

We did the whole project for employees who occupy a medium-sized office in Akademgorodok of Novosibirsk. There are not so many of us, but it is still a little inhuman to force the designer in his free time to draw layouts for printing. Therefore, we wrote code that automates Alice’s manual work, and we managed to generate layouts programmatically.

Orders turned out the most different, and the apogee of unbridled fun, of course, became the signature. Here are some examples.


As you can see, people expressed themselves as they could: someone described the daily routine, someone gave what was desired for reality, and someone frankly fantasized.

Many were in a hurry to mark their favorite features in which they invested a piece of themselves.


It was interesting to see how differently the guys approached the choice: someone took the first available option, and someone was indecisive for several days and still wasn’t sure until the end.


In the process of working on the project, we were forced to dive a bit into the subject area.

In the course of evolution, mankind has invented several ways of applying images on garments. The highest quality and durable result, which, according to Wikipedia, has an impressive covering power , is provided by silk screen printing (screen printing). However, this method is associated with certain technological difficulties, such as preparing a stencil, dilution of paints and the like. In general, if you want to give all your employees the same T-shirts with the logo of your favorite company, then silk-screen printing is your choice.

All our T-shirts are unique, so screen printing is not the most suitable way for us. Direct digital printing is more appropriate.on the fabric. The disadvantage is that the image printed in this way will fade inevitably during the washing process and under the influence of direct sunlight. But if you live in Novosibirsk and never wash clothes, then everything will be fine.

We printed a test batch of T-shirts and realized that printing on black and colored fabrics is very different in technology and end result. You can’t just take and print a picture on a black T-shirt - the colors will be absorbed into the fabric and you will not see them. Therefore, for black T-shirts, resourceful people came up with a life hack: first, a white substrate is printed, and then the pattern itself is printed on top of it. Due to the high thickness of the layer, the fabric with a pattern to the touch is very different from the fabric without a pattern, and the pattern itself does not behave very well under tension.


On white, gray or colored T-shirts you can print without a white backing: the image feels indistinguishable from the fabric itself and stretches normally.

In addition, we found that the printer can hardware ignore white. This means that if we want to print without a white substrate, then we, hooray, do not have to remove all white colors from the layout.


As seen in the photo, the white color that is present in the layout is not on the gray t-shirt.


The whole project from the moment of the idea to the release of the application lasted two months. During this time, we were actively secretive, communicated in a private chat in Slak, hid from colleagues in negotiations, conducted a design review in the wardrobe and slept very little. Now that it's over, you can breathe out and reflex a little.

For me personally, this whole story is a great opportunity to say thanks to my colleagues, in my own way to wonderful people, with whom I am in the confined space of an office for a good half of my adult life. In addition, it was very interesting to try myself not in the role of a programmer, as it usually happens to me, but in the role of project / product. From this position you begin to look at many things differently.

For you, as it seems to me, this is a good reason to think that everything is possible, and everywhere there is a place for fiction, humor and creativity - be it writing articles on Habr, producing merchandise or any other activity. Each of you can develop the ideas from this article and apply them at work. It doesn’t matter whether it is a website for printing branded T-shirts, a console utility for sewing corporate socks or something else. The main thing - to approach the matter with the soul and get a lasting pleasure.