Docelowa wersja 2.0 easy

Cześć, witam Was w kolejnym odcinku vloga o budowaniu EasyCard,

Hello, welcome to another episode of the vlog about building EasyCard.

w którym chciałbym opowiedzieć Wam trochę więcej szczegółów na tym,

in which I would like to tell you a little more details about this,

jak przygotowujemy się do stworzenia wersji 2.0 Easy,

how we prepare to create version 2.0 of Easy,

czyli wersji, którą chcemy zastąpić wersję,

so the version that we want to replace the version,

którą rozwijaliśmy od początku.

which we have been developing since the beginning.

W zasadzie oczywiście jest to ewolucja,

Basically, of course, it is an evolution,

ale jest to ewolucja, która po takich dwóch latach,

but it is an evolution that, after such two years,

czy prawie trzech latach solidnego rozwoju oprogramowania

after almost three years of solid software development

jest bardzo istotna i w zasadzie krytyczna do tego,

is very important and essentially critical to this,

żeby faktycznie oddać do dyspozycji ludzi,

to truly make available to people,

którzy korzystają z naszego oprogramowania narzędzie,

who use our software tool,

które ma szansę naprawdę dynamicznie wejść w fazę dynamicznego rozwoju.

which has a chance to действительно enter a phase of dynamic development.

To oznacza pofiksowanie wszystkich takich naleciałości,

This means fixing all such residues,

różnych dziwnych rzeczy, które wyszły po drodze,

various strange things that came up along the way,

rzeczy, które implementowaliśmy bardzo szybko,

things that we implemented very quickly,

bo klienci oczekiwali od nas feedbacku,

because clients expected feedback from us,

oczekiwali od nas tego, że będzie kolejna rzecz,

they expected us to have something else,

że na przykład dodamy pole do ukrywania NIP-u,

that for example we will add a field for hiding the NIP,

albo dodamy coś tam.

or we'll add something there.

I te wszystkie rzeczy gdzieś tam na bieżąco staraliśmy się

And we tried to keep up with all those things somewhere along the way.

im jak najbardziej pomagać i dodawać to do naszego narzędzia,

I am more than happy to help and add this to our tool.

ale powoduje to, że to narzędzie się rozrasta,

but it causes this tool to expand,

że niekoniecznie taka ścisła koncepcja tego,

that not necessarily such a strict concept of this,

co chcieliśmy zrobić na początku jest na końcu,

what we wanted to do at the beginning is at the end,

czyli to, co teraz mamy.

so that's what we have now.

I to jest zupełnie naturalne i chciałbym Wam powiedzieć,

And this is completely natural, and I would like to tell you,

że to jest najlepsza rzecz, która może się przydarzyć

that it is the best thing that can happen

takiemu projektowi.

such a project.

To znaczy, tak jak wspomniałem, to, że tu klienci rozwijają go razem z nami.

That means, as I mentioned, that the clients are developing it here together with us.

To oni chcą tych funkcji.

They want those features.

My oczywiście mamy swoją roadmapę, mamy swoje większe cele.

We of course have our roadmap, we have our bigger goals.

Wiemy, czy staramy się przewidzieć, co będą chcieli sprzedawać

We know if we try to anticipate what they will want to sell.

i jak będą chcieli to sprzedawać za rok, dwa, trzy, cztery.

and if they want to sell it in a year, two, three, or four.

Nie tylko teraz, nie tylko w tym momencie, w którym oni konkretnie myślą.

Not only now, not only at this moment that they are specifically thinking about.

I z uwagi na to musimy zbalansować te dwa światy.

And in light of this, we must balance these two worlds.

Ten nasz taki rozwój aplikacji, o którym myślimy

This is our development of the application that we are thinking about.

i to, co klienci chcą tu i teraz.

and what clients want here and now.

I te dwa lata pozwoliły nam bardzo dobrze zorientować się,

And these two years have allowed us to get a very good understanding of,

jakich funkcji nasi klienci używają, z czego chcą korzystać,

what functions our clients use, what they want to take advantage of,

jakich jeszcze chcą feature'ów, co jest ważniejsze,

what other features do they want, what is more important,

a co mniej ważne, z czego korzystają częściej, a z czego rzadziej.

And what is less important, what they use more frequently, and what they use less frequently.

To wszystko można tak naprawdę zrobić na różne sposoby.

Everything can really be done in different ways.

Albo można to po prostu uruchomić i zobaczyć, jak działa i iterować.

Or you can simply run it and see how it works and iterate.

Albo można robić najlepszą według nas wersję tego,

Or you can make the best version of it according to us.

wydać ją albo nigdy w ogóle jej nie wydać,

to publish it or never publish it at all,

bo w zasadzie tak też często się zdarza.

because that often happens too.

I w moich projektach nauczyłem się już tego,

And in my projects, I have already learned this,

że idealna wersja oczywiście nigdy nie istnieje.

that the ideal version never actually exists.

Software cały czas się rozwija.

Software is constantly evolving.

Oprogramowanie nigdy nie jest skończone.

Software is never finished.

Ale to, co jest ważne, to ten mindset,

But what is important is the mindset,

żeby po prostu shipować.

to just ship.

Shipować i robić to po kawałku.

Ship it and do it piece by piece.

I to jest też to, co ja musiałem w moim dev teamie

And this is also what I had to deal with in my dev team.

trochę, wydaje mi się, na początku forsować,

I think it might be a bit forced at first.

a teraz wszyscy już rozumieją to bardzo dobrze,

and now everyone understands it very well.

żeby robić funkcje, które zaczynają się od bardzo małych rzeczy.

to create functions that start with very small things.

Przykładem jest nasza waitlista,

An example is our waitlist,

którą właśnie wydaliśmy w ramach EasyCard.

which we have just released as part of EasyCard.

Nowa funkcja, która pozwala dopisać się na listę oczekujących.

A new feature that allows you to sign up for the waiting list.

No i jak myślimy sobie o takiej funkcji

And when we think about such a function

i w sumie jak ją brainstormujemy.

And actually, as we're brainstorming it.

Ja sam wpadam często w tą pułapkę

I often fall into this trap.

i tak samo było z tą waitlistą,

and it was the same with that waitlist,

że chcę do niej dodać jak najwięcej rzeczy.

that I want to add as many things as possible to it.

Wymyślić przynajmniej jak najwięcej rzeczy.

Come up with at least as many things as possible.

Czyli fajnie by było, jakby ktoś się zapisywał na tą waitlistę,

So it would be great if someone signed up for that waitlist.

miał od razu przypisane miejsce,

he had an assigned seat right away,

dostawał na przykład jakieś linki do udostępnienia w social mediach.

For example, he received some links to share on social media.

Dobrze, jakbyśmy śledzili kto co udostępnił

Okay, if we tracked who shared what.

i wtedy pozwolili mu awansować w tej liście,

and then they allowed him to advance on that list,

a może jakiś system punktowy, a może jakiś ranking.

Maybe a points system, or perhaps some kind of ranking.

No i oczywiście taka waitlista,

Well, of course, a waitlist like that,

ja korzystam nawet z wielu takich produktów,

I even use many such products.

które są samą waitlistą

which are just a waitlist

i oferują takie narzędzia do udostępniania,

and they offer such sharing tools,

jakieś rankingi i tak dalej.

some rankings and so on.

To jest osobny, cały duży produkt,

This is a separate, entire large product.

który moglibyśmy robić pewnie i dwa lata.

which we could probably do for two years.

Ale musimy sobie postawić takie założenie,

But we have to make such an assumption.

że tak naprawdę my nie wiemy,

that in reality we do not know,

czy ten produkt nam wyjdzie, czy nie.

Will this product work out for us or not?

Czy ta waitlista robiona przez nas przez dwa lata

Is this waitlist something we have been working on for two years?

i nagle wypuszczona w jakieś magiczne miejsce

and suddenly released into some magical place

się doskonale przyjmie i wszyscy będą z niej korzystać.

it will be perfectly adopted and everyone will benefit from it.

Musimy założyć, że tak nie będzie.

We must assume that it will not be like that.

I dlatego chcemy zawsze tworzyć wersje takie bardzo wczesne MVP

And that's why we always want to create very early MVP versions.

w ramach naszego narzędzia.

as part of our tool.

Mamy zrobiony do tego doskonały mechanizm.

We have created an excellent mechanism for this.

Mechanizm działa w ten sposób,

The mechanism works in such a way that,

że potrafimy wrzucić funkcję,

that we can implement a function,

która będzie dostępna dla jednego konkretnego klienta.

which will be available for one specific client.

Czyli zrobiliśmy tą funkcję już wcześniej.

So we made this function earlier.

Tak jak wspomniałem, byli często klienci,

As I mentioned, there were often clients,

którzy chcieli jakąś drobną rzecz.

who wanted some small thing.

Nie bardzo pasowało nam to dodawać do produktu,

We didn't feel it fit to add that to the product.

ale też mogliśmy to dla nich zrobić po to, żeby im pomóc

but we could also do this for them to help them

i to jest bardzo ważne.

and this is very important.

I to jest bardzo ważne.

And this is very important.

I tak robiliśmy i często robiliśmy tak,

And we did it like that, and we often did it that way.

że taki mini feature udostępniliśmy na koncie jednego klienta tylko.

that we made such a mini feature available on one client's account only.

Jak on się przyjął, może ktoś innego chciał,

How he was received, maybe someone else wanted.

ktoś inny, ktoś inny, ktoś inny, udoskonaliliśmy

someone else, someone else, someone else, we have improved

i w zasadzie większość takich funkcji weszła bezpośrednio do oprogramowania

And basically, most of such functions have been incorporated directly into the software.

już później dostępnego dla wszystkich.

already later available to everyone.

No i ten feature pozwala nam powoli rolować te funkcje,

And this feature allows us to gradually roll out these functions,

na przykład nie dla wszystkich, ale dla wybranych.

for example, not for everyone, but for the chosen ones.

Na przykład na naszym Slacku zrekrutować grupę testową,

For example, recruit a test group on our Slack.

która chciałaby skorzystać z rad

who would like to take advantage of advice

albo z jakiegoś innego rozwiązania,

or from some other solution,

i dla niej specjalnie udostępnić tę funkcję,

and to make this feature available especially for her,

oznaczyć flagę, że mogą korzystać z tego te i te osoby,

mark the flag that these and those people can use it,

no i wejść z nimi w interakcję, jeśli chodzi o feedback.

"Well, to engage with them in terms of feedback."

I zobacz, o ile takie podejście jest lepsze od tego,

And see how much better this approach is than that one,

że coś robimy sobie, wymyślamy, że akurat tak ktoś będzie z tego korzystał

that we do something for ourselves, we invent that someone will use it this way

i wypuszczamy dla wszystkich, mówimy macie tutaj,

And we release it for everyone, we say here you go.

łaska nasza spłynęła na was i udostępniliśmy wam świetny feature.

Our grace has flowed onto you, and we have made a great feature available to you.

No oczywiście, że to jest bez sensu,

Well, of course, it's pointless.

bo dużo lepiej jest udostępnić jakąś małą rzecz,

because it is much better to share a small thing,

w waitliście udostępniliśmy na razie tylko bardzo prostą możliwość zapisania się na listę

In the waiting list, we have currently provided only a very simple option to sign up for the list.

i listę klientów do każdego produktu,

and the list of clients for each product,

po prostu maile zapisane możesz wyeksportować w CSV,

You can simply export the saved emails in CSV.

nie ma żadnych możliwości mailowania do nich, żadnych awansów na liście,

There are no options to email them, no promotions on the list,

żadnych specjalnych powiadomień mailowych dla tych klientów angażujących i tak dalej,

no special email notifications for these engaging customers, and so on,

to wszystko możemy dodać, ale my to dodamy,

we can add everything, but we will add it,

jak zobaczymy, że ludzie zaczną z tego korzystać

we will see when people start to use it

i ci ludzie zaczną nam mówić,

and those people will start telling us,

ej, może fajnie by było dodać to albo tamto

Hey, maybe it would be nice to add this or that.

i bardzo dużo takich sugestii płynie z tego, że ludzie zaczynają korzystać,

and a lot of such suggestions come from the fact that people are starting to use,

korzystać z tej wersji 1.0.

use this version 1.0.

Dlaczego dobre jest zamykanie tego w dostępie dla jakiejś tam małej grupy klientów na początku,

Why is it good to restrict access to this for a small group of clients at the beginning?

a nie możemy tego udostępnić dla wszystkich?

Can't we make this available for everyone?

No po pierwsze dlatego, że nie chcemy zaśmiecać naszego interfejsu,

Well, firstly because we don't want to clutter our interface,

jeśli nie wiemy, czy ta funkcja wejdzie,

if we don't know whether this function will be implemented,

no nie do końca chcemy, żeby po prostu wrzucać to dla wszystkich

Well, not entirely, we want to just throw this out for everyone.

i nagle, żeby powodowało to, że jest jeszcze jedna rzecz do przewinięcia,

and suddenly, it causes that there is one more thing to scroll through,

jeszcze jedna komplikacja do wypełnienia,

one more complication to fill out,

więc wolimy to zrobić dla paru osób,

so we prefer to do it for a few people,

ale to ma ogromne większe korzyści w tym,

but it has immense greater benefits in this,

że te osoby są zaangażowane w pomoc w rozwoju tej funkcji,

that these individuals are involved in supporting the development of this feature,

czyli jeśli ktoś czeka na waitlistę

So if someone is waiting for the waitlist.

i mamy oczywiście formularz, w którym ludzie i z supportu też dostajemy

And we obviously have a form that people from support also receive.

taką listę osób, kto na co czeka,

a list of people who is waiting for what,

więc jak zobaczymy, że odpowiednio dużo ludzi czeka na waitlistę,

so if we see that a sufficient number of people are waiting on the waitlist,

to już mamy do kogo napisać.

Now we have someone to write to.

Do tych 10 osób piszemy,

We are writing to these 10 people,

okej, mamy waitlistę, możesz ją uruchomić tak i tak,

Okay, we have a waitlist, you can launch it this way or that way.

powiedz nam, co o tym myślisz

tell us what you think about it

i pytamy te osoby co tydzień, co dwa, co trzy,

and we ask those people every week, every two weeks, every three weeks,

jak Ci idzie, co tam dodać,

how's it going, what to add there,

co tam zmienić, co uważasz, żeby się przydało w naszej waitliście

What should be changed, what do you think would be useful in our waitlist?

i to jest schemat, który po około roku pewnie pracy tak na czuja

And this is the outline that after about a year of working by intuition.

udało nam się już uzyskać i systematycznie go realizować.

We have already managed to obtain it and are systematically implementing it.

Wypuszczamy bardzo małe rzeczy, mamy ich jakąś wizję

We release very small things, we have some vision for them.

i samo to, że ta waitlista jest przemyślana tak,

and just the fact that this waiting list is thoughtfully designed in such a way,

że o, mogło być to, mogło być to, tamto i tak dalej,

that, oh, it could have been this, it could have been that, and so on,

to nie jest wcale złe, samo w sobie,

it's not bad at all, in itself,

bo to, że mamy to dobrze przemyślane,

because we have thought it through well,

to wiemy, co prawdopodobnie będziemy robić w przyszłości,

we know what we will probably be doing in the future,

ale chcemy to potwierdzić.

but we want to confirm it.

Chcemy wypuścić wersję beta,

We want to release a beta version,

zobaczyć, jak się ludziom z tego korzysta,

to see how people benefit from this,

ona jest funkcjonalna, ale czegoś tam jej brakuje,

she is functional, but she is missing something.

wszyscy mówią, czego im brakuje, my to robimy,

everyone talks about what they are missing, we do it,

a oni są wow, super szczęśliwi z tego powodu,

and they are wow, super happy about it,

że wysłuchaliśmy ich feedbacku i zrobiliśmy to tak, jak oni chcą,

that we listened to their feedback and did it the way they want,

nawet jeśli to wcześniej myśleliśmy, że zrobimy to podobnie.

even if we thought earlier that we would do it similarly.

Więc mega ważna rzecz jest taka,

So, the mega important thing is that,

że my te wszystkie małe funkcje wewnątrz tego narzędzia

that we have all these small functions inside this tool

rozwijaliśmy i rozwijamy i dostosowujemy

we developed, are developing, and are adapting

i ono w pewien sposób zawsze się rozrasta.

And it somehow always expands.

I teraz wersja 2.0, którą robimy,

And now version 2.0 that we are working on,

jest sposobem na to, żeby powiedzieć stop.

is a way to say stop.

W zasadzie co 2 lata trzeba też odświeżyć UI,

Basically, the UI also needs to be refreshed every 2 years.

odświeżyć, dla nas jest mega ważne,

refreshing is super important for us,

UI, UX, to są rzeczy, które są mi bardzo drogie,

UI and UX are things that are very dear to me.

ale ja wiem, że ludzie kupują oczami,

but I know that people buy with their eyes,

ludzie w koszyku klikają na pamięć,

people in the basket click on memory,

muszą mieć jak najbardziej dostępny koszyk,

They must have the most accessible basket possible.

jak najlepiej wykonany, jak najlepszy UX-owo

as well done as possible, as good as possible in terms of UX

i znam moją konkurencję, wiem, że oni robią to w dużej mierze źle

And I know my competition, I know they are doing it largely wrong.

albo starają się kopiować od nas, to robią to lepiej wtedy,

"Either they try to copy us, and then they do it better."

ale można powiedzieć, że oni koncentrują się

but it can be said that they focus

zupełnie na tym, co trzeba, robią masę jakichś funkcji,

completely on what is necessary, they make a lot of some functions,

wrzucają w zasadzie wszystko, co im się wydaje,

they essentially throw in everything they think of,

tak patrząc na to, ale zapominają o tym bardzo ważnym aspekcie,

looking at it this way, but they forget about this very important aspect,

UX, UI i my w zasadzie od tego zaczynamy całą pracę koncepcyjną

UX, UI, and we basically start all the conceptual work from that.

nad nową wersją Easy.

about the new version of Easy.

Jeśli chodzi o praktyczne to, co robimy w ramach Easy 2.0,

As for the practical aspects of what we do within Easy 2.0,

jak podeszliśmy do rozwiązania tego problemu,

how we approached solving this problem,

to jest to dość złożony proces, jak wytworzyć taką nową wersję.

This is quite a complex process, how to produce such a new version.

Po pierwsze, oczywiście trzeba najpierw zanotować sobie spostrzeżenia,

First of all, of course, you need to first note down your observations,

zarówno nasze, ale głównie klientów, jakby co im się najbardziej podoba,

both ours and mainly the clients', as to what they like the most,

co im się najbardziej nie podoba, o co wnioskują, żeby coś przesunąć,

what they dislike the most, what they suggest to move something,

w czym możemy im pomóc, czego nie możemy znaleźć.

What can we help them with, what can we not find?

Ja dosłownie na chwilę, bo nie robię tego na bieżąco,

I literally just for a moment, because I don't do this on an ongoing basis,

żeby monitorować i nagrywać ludzi, jak korzystają z oprogramowania,

to monitor and record how people use the software,

ale na chwilę w takim procesie włączam nagrywanie na Hotjarze

But for a moment in such a process, I turn on recording on Hotjar.

i po prostu patrzę, oczywiście zanonimizowane są to nagrania,

and I just watch, of course, these recordings are anonymized,

jak ludzie chodzą po panelu, co klikają, jak próbują korzystać z EasyCarta

how people navigate the panel, what they click on, how they try to use EasyCarta

i po tym czasie po prostu robię rewizję całego tego naszego pomysłu,

And after this time, I simply review the whole idea of ours,

ponieważ to oprogramowanie już jest zupełnie inne niż takie,

because this software is already completely different than that,

które projektowałem dwa lata temu.

which I designed two years ago.

Więc nagrałem kilkadziesiąt sesji użytkowników, wybranych części koszyka

So I recorded several sessions of users, selected parts of the cart.

lub mam do dyspozycji na przykład kilka osób, które mi szczegółowo przejdzie przez koszyk,

or I have, for example, a few people available who will go through the cart with me in detail,

nagra to, co robi i wypisze swoje spostrzeżenia.

Record what he does and write down his observations.

Do tego, żeby w ogóle zobaczyć, aha, okej, bo my jesteśmy bardzo biased,

In order to see at all, oh, okay, because we are very biased,

wiemy, jak korzystać z naszego produktu, ale ludzie nie wiedzą.

We know how to use our product, but people do not know.

W związku z tym to mi dało bardzo dużo i pokazało mi,

As a result, it gave me a lot and showed me,

Jezu, to jest w ogóle, ludzie w ogóle to robią źle.

Jesus, people are doing this all wrong.

Ja zrobiłem ten UX, który nie działa, bo tak naprawdę na przykład ktoś myśli,

I created this UX that doesn't work because, for example, someone thinks,

że trzeba wypełnić wszystkie pola w zakładce jakiegoś produktu na przykład,

that you need to fill in all the fields in the tab of a certain product, for example,

po to, żeby opublikować w ogóle ten produkt, że trzeba po prostu najpierw wszystko wypełnić,

In order to publish this product at all, you simply need to fill everything out first.

a później można kliknąć publikuj.

and then you can click publish.

A u nas to działa tak, że wystarczy wypełnić cenę, publikujesz, już to działa,

And here it works like this: you just need to fill in the price, publish it, and it works.

możesz coś tam sobie nadpisać i większość tych pól jest nieobowiązkowa.

You can write something there, and most of these fields are optional.

Ale tego nie było w UI i dopiero właśnie takie nagrania, czy praca bezpośrednio z klientami,

But that wasn't in the UI, and only such recordings or working directly with clients...

czy nawet znajomymi, którym poprosimy, okej, to weź coś wystaw, tutaj stwórz swój koszyk,

or even acquaintances whom we ask, okay, so put something up, here create your basket,

ja zobaczę, jak to robisz, to naprawdę to pomaga w zrozumieniu,

I'll see how you do it, it really helps in understanding.

jak faktycznie ludzie korzystają z naszej aplikacji i przez dwa lata, nawet jeśli na początku było to tak, jak zamierzaliśmy,

how people actually use our application and for two years, even if initially it was as we intended,

to obrosło to w taki tłuszczyk tych funkcji, że po prostu wygląda to teraz inaczej.

It has grown into such a fat layer of these functions that it simply looks different now.

Więc te nagrania są super skuteczne i super wartościowe.

So these recordings are super effective and super valuable.

Po drugie, oczywiście to, co powiedziałem, czyli feedback.

Secondly, of course, what I said, which is feedback.

Feedback od klientów, czego chcą najbardziej i tak dalej, to w formie tekstowej pospisywane,

Feedback from customers about what they want the most, and so on, has been written down in text form.

co im przeszkadza, co im nie przeszkadza, co im się podoba.

what bothers them, what doesn't bother them, what they like.

O to pyta nasz support, o to pytam w ankietach, o to po prostu to są zebrane myśli,

That's what our support is asking us about, that's what I'm asking in surveys, that's just a collection of thoughts.

tego, co ja wiem, że ludzie mówią, bo rozmawiają ze mną, ja rozmawiałem z nimi przez cały rok

from what I know that people say, because they talk to me, I have talked to them for a whole year.

i wiem, co należałoby, na co należałoby.

And I know what should be done.

To jest to, na co należają najbardziej.

This is what they deserve the most.

Ponadto, do tego mamy stworzony research cały, nie tyle konkurencyjnych rozwiązań, jak to robią,

Moreover, we have created a complete research, not so much on competitive solutions, but how they do it.

bardziej patrzymy na inne narzędzia, które mają podobne problemy do rozwiązania, co my.

We are looking more at other tools that have similar problems to solve as we do.

Czyli nie chcemy skupiać się na tym, jak bezpośrednia konkurencja to robi,

So we don't want to focus on how the direct competition does it,

bo chcemy być inni niż oni, chcemy być inni niż inni i chcemy kopiować tego, co oni mają.

because we want to be different from them, we want to be different from others, and we want to copy what they have.

To jest bardzo zła strategia.

This is a very bad strategy.

To jest strategia, która prowadzi do tego, że przy porównywaniu się mamy w sumie to samo,

This is a strategy that leads to the fact that when comparing ourselves, we ultimately have the same thing.

ale oni mieli to pierwsi i prawdopodobnie mają to zrobione lepiej,

but they had it first and probably did it better,

bo są dużo, dużo do przodu, niż wtedy, kiedy my to tam staramy się kopiować.

because they are much, much ahead compared to when we try to copy it there.

Więc ja raczej koncentruję się nie na tym, co ma konkurencja,

So I rather focus not on what the competition has,

w kontekście takiego redesignu i przemyślenia tego, jak możemy zrobić te nasze narzędzia,

In the context of such a redesign and rethinking how we can make our tools,

tylko w kontekście tego, jak rozwiązują te problemy na przykład Microsoft, na przykład Atlassian,

only in the context of how they solve these problems, for example, Microsoft, for example, Atlassian,

ponieważ są to firmy, które mają bardzo podobne problemy, co my, mianowicie mają zestaw narzędzi,

because they are companies that have very similar problems to ours, namely they have a set of tools,

na przykład Microsoft ma Office'a, Google ma na przykład cały Google Suite

For example, Microsoft has Office, Google has the whole Google Suite.

i my też mamy suite narzędzi, my też mamy zestaw narzędzi dla twórców.

We also have a suite of tools, we also have a toolkit for creators.

Ja się staram popatrzeć sobie na te strony i Mateusz i Gabi, którzy robią świetną pracę

I try to take a look at these pages and Mateusz and Gabi, who are doing a great job.

przy właśnie też researchu tego UI'a i później przy design systemie,

during the research of this UI and later with the design system,

screenują sobie wszystkie rzeczy, które są na tych stronach, które podobne problemy mają, co my,

They screen all the things that are on those websites that have similar problems to ours.

jak wygląda ich menu, jak wygląda ich pricing,

what does their menu look like, what does their pricing look like,

jak wygląda ich strona główna, jak są rozwiązane UI'owo po prostu te problemy, które my mamy.

What does their homepage look like, how are the UI issues that we have solved?

I to mówię tutaj o stronach marketingowych, czyli o tych stronach jakby z ofertą,

And I am talking here about marketing pages, that is, about those pages with an offer.

ale oczywiście później zastanawiamy się też, jak mogłoby to wyglądać w kontekście tych już stron produktowych,

but of course later we also wonder how it could look in the context of those already existing product pages,

czyli wewnątrz naszego produktu, formularze, jak oznaczyć pola opcjonalne,

so inside our product, forms, how to mark optional fields,

bo wiemy, że już są potrzebne, bo ludzie inaczej myślą, że trzeba wszystkie wypełnić i tak dalej, i tak dalej.

Because we know that they are already needed, because people think differently, that all must be filled out and so on and so forth.

Więc robimy sobie taki research.

So we are doing some research.

I nie tyle konkurencji, co stron, które mają podobne problemy.

And not so much competition, but rather sites that have similar issues.

I to jest kolejny komponent w tej wersji 2.0, do tego redesignu.

And this is another component in this version 2.0, for this redesign.

Następnie wypisujemy wszystkie rzeczy i my to robimy w FigJamie, ponieważ jest genialne do tego

Next, we list all the things, and we do it in FigJam because it’s great for that.

i też Figma jest całym naszym środowiskiem do projektowania, prototypowania oraz brainstormowania nowej wersji.

And Figma is our entire environment for designing, prototyping, and brainstorming the new version.

Więc rozpisujemy sobie na post-itach w FigJamie na takich małych karteczkach cały schemat,

So we're writing down the whole scheme on post-its in FigJam on those small cards.

jeśli chodzi o strony marketingowe, no to rozpisujemy sobie schemat całych stron marketingowych,

when it comes to marketing pages, we outline the entire structure of the marketing pages,

jaki content ma być dynamiczny, jaki ma być niedynamiczny, jakie mają być zakładki w menu.

What content should be dynamic, what should be static, what should the menu tabs be?

Rozrysowujemy całe menu i wszystkie rzeczy, które chcemy ograć, czyli że na stronach marketingowych chcemy mieć na przykład bloga,

We outline the entire menu and all the things we want to feature, meaning that on the marketing pages we want to have, for example, a blog.

chcemy mieć strony z porównaniem do konkurencji, chcemy mieć stronę cennika, chcemy mieć strony z tutorialami dynamiczne, całą akademię, i tak dalej, i tak dalej.

We want to have pages comparing to competitors, we want to have a pricing page, we want to have dynamic tutorial pages, a whole academy, and so on, and so forth.

To wszystko rozpisujemy sobie, czyli tworzymy sitemapę do tych stron marketingowych.

We outline all of this for ourselves, meaning we create a sitemap for these marketing pages.

No i tworzymy też menu. To jest bardzo ważne, żeby tak zakotwiczyć się jakby w tym, co, o czym my chcemy mówić i co my chcemy dokładnie zrobić.

And we are also creating a menu. It is very important to anchor ourselves in what we want to talk about and what we want to do exactly.

Kolejnym krokiem będzie praca nad copy już dla poszczególnych stron, czyli wybieramy jedną stronę, najpierw stronę główną, easy.tools,

The next step will be working on the copy for individual pages, which means we select one page, starting with the main page, easy.tools.

tam będziemy chcieli napisać sobie treści i tam robimy jakieś założenia treści, następnie wypełniamy sobie to w Google Docu

There we will want to write our content and make some content assumptions, then we will fill it in with Google Docs.

i dopiero później przerzucamy do Figma i zaczynamy cokolwiek projektować, a następnie do Webflow.

And only later do we transfer everything to Figma and start designing anything, and then to Webflow.

Czyli poszczególne strony po kolei będziemy uzupełniać o treści, jakie chcemy, żeby się tam znalazły.

So we will gradually fill in each page with the content we want to be included there.

I te treści oczywiście są też nieprzypadkowe. Mówiłem Ci już wcześniej, jak robić landing page, jak go projektuję, więc generalnie wróć do tego odcinka vloga.

And these contents are of course not random. I have already told you earlier how to create a landing page, how I design it, so basically, go back to that episode of the vlog.

A tutaj mówię o tym, że po prostu musimy to wszystko zebrać do kupy. Zarówno jeśli chodzi o marketing, to robimy, jak i chodzi o sam produkt.

And here I'm talking about the fact that we simply need to get all of this together. Both in terms of marketing, what we are doing, and the product itself.

Czyli z samego produktu, tego jak wygląda i działa EasyCard, w Figma robimy po prostu sprzęt.

So from the product itself, how EasyCard looks and works, in Figma we simply create the hardware.

To geliyor spis wszystkich rzeczy, wszystkich inputów, wszystkich funkcji, wszystkich rzeczy, które po prostu są w interfejsie

Here comes the list of all things, all inputs, all functions, all things that simply exist in the interface.

i zastanawiamy się, czy one tam są, bo na przykład nie wiedzieliśmy, gdzie je dodać, nie mieliśmy na to czasu i dodaliśmy sobie w jakieś miejsce.

And we wonder if they are there, because for example we didn't know where to add them, we didn't have time for that and we added them somewhere.

Czy na przykład są tam, bo rzeczywiście to ma sens. Te nasze wszystkie menu, w których uzupełnia się dane, mocno się rozrosły od wersji pierwszej.

For example, are they there because it really makes sense? Our all menus, in which data is filled in, have grown significantly since the first version.

Więc zastanawiamy się, jak lepiej zorganizować tą strukturę danych, które rzeczy wyciągnąć na zewnątrz.

So we are wondering how to better organize this data structure, which elements to extract externally.

Więc zastanawiamy się, jak lepiej zorganizować tę strukturę danych, które rzeczy wyciągnąć na zewnątrz.

So we are wondering how to better organize this data structure, which items to extract externally.

I jak lepiej sobie zorganizować tę strukturę danych, które rzeczy wyciągnąć na zewnątrz.

And how to better organize this data structure, which elements to pull out.

Te wszystkie funkcje, które dodaliśmy przez cały ten czas zorganizować, żeby było to po prostu bardziej intuicyjne, ale żeby to zrobić, no to musimy po prostu rozpisać wszystko to, co mamy, więc na poszczególnych post-itach rozpisujemy sobie dokładnie wszystko to, co mamy, no i zastanawiamy się też, czy to przesunąć, czy zostawić w tym samym miejscu, ale też na przykład, czy któreś funkcji nie chcemy zabrać, bo mniej to lepiej,

All these features that we've added over time need to be organized to make everything more intuitive, but to do that, we simply have to outline everything we have. So, we write down everything we have on individual post-its, and then we consider whether to move things around or keep them in the same place, and also, for example, whether we want to remove any features because less is more.

więc może czasem się okazuje, że wychodzi nam, że jednak ludzie nie używają tego, albo nie używają tego w taki sposób, jak chcemy i powinniśmy z tą funkcją w ogóle się rozstać, więc takie rosterki na etapie projektowania EC2.0 mamy bardzo, bardzo często.

So it may sometimes turn out that we find that people don't use it, or don't use it in the way we want them to, and we should completely part with that function, so we have such considerations very, very often during the design stage of EC2.0.

No i kolejna rzecz, to jest już praca projektowa nad, osobno trzeba pracować nad design systemem dla stron marketingowych, czyli dla naszej całej tej, wszystkich stron na naszych domenach,

And another thing, this is already project work on, separately we need to work on the design system for marketing pages, that is, for all of our websites on our domains,

dla ofert i osobno pracujemy nad design systemem produktowym, czyli nad formularzami, które są w EasyCard, nad przyciskami publiku i tak dalej.

For offers, we are separately working on the product design system, which includes the forms in EasyCard, the publish buttons, and so on.

Oczywiście są to rzeczy spójne stylistycznie, ale tworzymy dla nich osobne design systemy i w ramach design systemu dla aplikacji projektujemy wszystko, co się da.

Of course, these are stylistically consistent things, but we create separate design systems for them, and within the design system for the application, we design everything we can.

W zasadzie od podstaw, my bazujemy na tej Luindzie, ale raczej wolimy dostylować komponenty i zaprojektować je dokładnie.

Basically from scratch, we base it on that Luinda, but we prefer to refine the components and design them precisely.

Tak jakbyśmy chcieli, niż korzystać z jakiegoś kolejnego gotowego frameworka, może jest szybciej, ale nigdy do końca nie spełnia to naszych potrzeb.

It's as if we would prefer, rather than using some ready-made framework, maybe it's faster, but it never fully meets our needs.

Później w procesie developmentu korzystamy z frameworka, ale też będzie trzeba te komponenty odpowiednio dostosować, więc to, co robimy po kolei,

Later in the development process, we use a framework, but we will also need to adjust those components accordingly, so what we do step by step...

to projektujemy sobie wszystkie ekrany naszych aplikacji, ale robimy to nie tak, że projektujemy najpierw same komponenty, design system projektujemy w oparciu o gotowe ekrany,

We design all the screens of our applications, but we do it not by first designing the components themselves; we design the design system based on the ready screens.

czyli robimy sobie na przykład jeden ekran, który jest z całym shellem aplikacji i z nawigacją i jeśli to zaprojektujemy, no to z tego wynika już szereg komponentów,

So we create, for example, one screen that contains the entire application shell and navigation, and if we design that, it will result in a number of components.

bo w nawigacji są linki, w shellu są przyciski, są jakieś inputy też do wyszukiwania i tak dalej, więc zaczynamy te rzeczy wyodrębniać jako kolejne komponenty

Because there are links in the navigation, there are buttons in the shell, there are also some inputs for searching, and so on, so we are starting to extract these things as additional components.

i ładujemy je do naszej biblioteki w Figmie.

And we are uploading them to our library in Figma.

Lecimy sobie tak po kolei z kolejnymi ekranami, czyli w zasadzie patrzymy sobie na kolejny flow użytkownika.

We are going through the screens one by one, so basically we are looking at the next user flow.

Mamy na przykład flow rejestracji i logowania, więc robimy cały flow rejestracji i logowania na osobnym page'u w Figmie.

We have, for example, the registration and login flow, so we are creating the entire registration and login flow on a separate page in Figma.

Projektujemy, zamieniamy na komponenty, reużywamy komponentów, które mamy już wcześniej.

We design, convert into components, and reuse components that we already have.

Następnie mamy flow onboardingu oraz importu produktów ze Stripe'a, więc projektujemy to na nowo, cały onboarding, cały import flow i tak dalej.

Next, we have the onboarding flow and product import from Stripe, so we are redesigning the entire onboarding, the entire import flow, and so on.

Kolejno mamy główne strony koszyka, później mamy wszystkie panele, strony ustawień, strony produktowe, strony customera, wyszukiwarkę.

Next, we have the main cart pages, then we have all the panels, settings pages, product pages, customer pages, and the search engine.

Stronę checkoutu, to jak wygląda właściwy koszyk, który ludzie tworzą i tak dalej.

The checkout page, that's how the correct cart looks, which people create and so on.

I te wszystkie rzeczy są na osobnych page'ach i te wszystkie rzeczy dziedziczą komponenty, które zrobiliśmy wcześniej.

And all these things are on separate pages and all these things inherit the components we made earlier.

Są w spójnej stylistyce, ale na każdej takiej stronie po prostu mamy po prawej stronie te komponenty, które ta strona zawiera.

They are in a consistent style, but on each such page, we simply have those components on the right side that the page contains.

Na początku robimy to z różnymi takimi dummy data czy z tekstami, które są u nas obecnie, ale później kolejnym etapem jest przejście przez te wszystkie elementy.

At the beginning, we do this with various dummy data or with texts that we currently have, but later the next step is to go through all these elements.

I po prostu przetłumaczenie ich, dodanie tekstów, stworzenie copy, napisanie tego tak, aby w tym interfejsie było to jak najbardziej spójne i żeby to po prostu działało.

And just translating them, adding texts, creating copy, writing it in such a way that it is as coherent as possible in this interface and that it simply works.

No i w ten sposób przechodzimy sobie przez wszystkie elementy aplikacji po to, aby stworzyć gotowe layouty, gotowe do zaimplementowania w dewelopmencie.

And this way we go through all the elements of the application in order to create ready layouts, ready to be implemented in development.

Sam framework, czyli wszystkie komponenty, które stworzymy w tym czasie, po prostu pozwala nam zbudować bibliotekę komponentów w Figma.

The same framework, meaning all the components we create during this time, simply allows us to build a component library in Figma.

I na tej bibliotece opieramy się, budując bibliotekę UI-ową na frontendzie.

We rely on this library as we build the UI library on the frontend.

Na frontendzie zbudowaliśmy specjalny framework, który pozwala nam stworzyć sobie wersję komponentu, która jest tą wersją oficjalną, zakodowaną i ta wersja komponentu może zostać łatwo skopiowana do dowolnej naszej aplikacji.

On the frontend, we built a special framework that allows us to create an official version of a component, which is encoded, and this version of the component can be easily copied to any of our applications.

Natomiast jeśli ona się zmieni, na przykład jeśli zmienimy na przykład obramowanie przycisków, to zmieniamy je w tym głównym frameworku, podobnie jak to się robi w bibliotece komponentów w Figma.

However, if it changes, for example, if we change the button borders, we change them in the main framework, just like it is done in the component library in Figma.

I ta zmiana automatycznie jest dystrybuowana na wszystkie nasze aplikacje.

And this change is automatically distributed to all our applications.

Mamy do tego zrobiony i zapięty własny system, który przemyśleliśmy, zrobiliśmy go od podstaw i dzięki temu, robiąc UI w jednym miejscu, będziemy mogli reużywać te wszystkie instancje tych elementów w dowolnym miejscu w naszej aplikacji.

We have a custom system created and secured for this purpose, which we have thought through and built from scratch, and as a result, by creating the UI in one place, we will be able to reuse all instances of these elements anywhere in our application.

No i to jest spójne, i to działa, i to po prostu tak powinno być zrobione.

Well, it's consistent, it works, and it just should have been done that way.

Nie mieliśmy tak tego zrobionego wcześniej, musieliśmy kopiować jakieś fragmenty kodu, było to złożone, było to trudne i często rozjeżdżały nam się te projekty, na przykład Tooli i EasyCarta,

We didn't have it done like this before, we had to copy some code fragments, it was complex, it was difficult, and often these projects, for example Tooli and EasyCarta, would get misaligned.

ponieważ nie wszystko tam mogło być zrobione bardzo spójnie. Teraz będzie to zrobione bardzo spójnie.

because not everything there could have been done very consistently. Now it will be done very consistently.

Kiedy to już mamy? Mamy taki proces, że jedna osoba zajmuje się właśnie wdrażaniem tych komponentów, natomiast my też rozpisujemy sobie w linearze to, co powinno być zmienione w logice,

When do we have this ready? We have a process where one person is responsible for implementing these components, while we also outline in a linear fashion what should be changed in the logic.

w kontekście zmian, które zaprojektowaliśmy. No bo to jest super istotne, jeśli poprzenosimy jakieś rzeczy między różnymi menu, ale zwłaszcza jeśli zdecydujemy, że

in the context of the changes we have designed. Because it is very important if we move some things between different menus, but especially if we decide that

No bo to jest super istotne, jeśli poprzenosimy jakieś rzeczy między różnymi menu, ale zwłaszcza jeśli zdecydujemy, że

Well, this is super important, especially if we move some things between different menus, but especially if we decide that...

na przykład tą funkcję, ok super, ale zawsze chcieliśmy ją rozbudować i powinniśmy ją rozbudować i chcemy już zaprojektować ją docelowo, to wtedy wszystkie te rzeczy, mamy osobny projekt wpisany w linearze

For example, this function, okay great, but we always wanted to expand it and we should expand it, and we want to design it for the long term, so we have a separate project recorded in Linear.

i wpisujemy to, rozpisujemy na bardzo, bardzo drobne zadania i ja proszę DevTeam, żeby te wszystkie drobne zadania starał się wyestymować mi w tym, ile czasu mogłyby zająć.

And we write it down, breaking it down into very, very small tasks, and I ask the DevTeam to try to estimate for me how much time all these small tasks might take.

Dzięki temu będę mógł dobrze priorytetyzować to, co ma zostać wdrożone w pierwszej kolejności, co jest quick winem, co jest trudniejsze i czego może na razie możemy otworzyć,

Thanks to this, I will be able to properly prioritize what needs to be implemented first, what is a quick win, what is more difficult, and what we might be able to open for now.

na przykład zostawić tak jak jest, a co warto już przerobić na tą docelową wersję, którą mamy w design systemie i w projekcie.

For example, leave it as it is, and what is worth adapting to the final version that we have in the design system and in the project.

W ten sposób pracujemy nad aplikacją, ale w bardzo podobny sposób pracujemy nad stronami marketingowymi.

This is how we work on the application, but in a very similar way, we work on marketing pages.

To znaczy, że strony marketingowe będą również zaprojektowane w Figma, a następnie przeniesione do Webflow.

This means that the marketing pages will also be designed in Figma and then transferred to Webflow.

Tutaj akurat będzie nam dużo prościej, bo będziemy korzystać z gotowej biblioteki z Reluma dla Webflow i tam jest sporo gotowych komponentów, które po prostu będziemy dostylowywać

Here it will be much easier for us because we will be using the ready-made library from Relume for Webflow, and there are plenty of ready-made components that we will simply style.

i w zasadzie tych wszystkich projektów po stronach na pewno nie będziemy trzymać w Figma.

And basically, we definitely won't keep all of these projects on the pages in Figma.

Raczej w tym kontekście właśnie takiego brandu i tych stron marketingowych idziemy w kierunku takim, żeby w Figma sobie zrobić różne eksploracje.

Rather in this context, we are leaning towards that kind of brand and those marketing pages, so we are planning to do various explorations in Figma.

Eksploracje styli, eksploracje tego, co nam pasuje i zrobić sobie kilka layoutów i jak będziemy mieli tam kilka layoutów, to resztę będziemy już robić w Webflow,

Explorations of styles, explorations of what suits us and making a few layouts, and once we have those layouts, we will do the rest in Webflow.

ponieważ będzie dla nas oczywiste, jak te layouty powinny się rozkładać na właściwych stronach marketingowych i nawet kolejne komponenty, które będziemy kopiować z Reluma,

because it will be obvious to us how these layouts should be arranged on the appropriate marketing pages and even the next components that we will be copying from Reluma,

po prostu już będą dziedziczyć te style, które tam wcześniej stworzyliśmy, więc to jest taka praca bardziej jeszcze koncepcyjna

They will simply inherit the styles that we created there earlier, so this is more of a conceptual work.

i na te potrzeby stworzyliśmy kilkadziesiąt na przykład wersji nagłówka, kilkadziesiąt wersji tych komponentów, na przykład z jakimś tam scrolem czy z jakimś wybierakiem,

And for this purpose, we created several dozen versions of the header, several dozen versions of these components, for example with some kind of scroll or with some selector.

po to, żebyśmy mogli najpierw zastanowić, ok, co nam pasuje, a później już jak to wybierzemy, to żeby tak naprawdę było bardzo łatwo każdy kolejny komponent do tego dopasować,

so that we can first think about what suits us, and later, once we choose, it should really be very easy to match each subsequent component to it.

a na tych gotowych komponentach znowu poskładać różne podstrony, które zamierzamy.

and on these ready components assemble various subpages that we intend to.

W skrócie, tak wygląda proces tworzenia redesignu tej naszej aplikacji, redesignu Easy 2.0. Podchodzimy do tego mega poważnie i chcemy zrobić coś, co naprawdę będzie na topowym światowym poziomie.

In short, this is how the process of creating the redesign of our application, Easy 2.0, looks. We approach this very seriously and want to create something that will truly be at a top global level.

Nasi designerzy Matt i Gabi są rewelacyjni i pomagają nam świetnie to zrobić i rozkminić również różne rzeczy, które ułatwią użytkownikom, czy to nawigację, czy uzyskiwanie jakichś efektów.

Our designers Matt and Gabi are awesome and they help us do it great and figure out various things that will make it easier for users, whether it's navigation or achieving certain effects.

Natomiast nasz team wdrożeniowy jest też rewelacyjny, Róża, Bartosz i Piotr, i Michał, którzy po prostu zarówno logikę, jak i frontend potrafią z tego później pospinać bardzo fajnie w całość.

However, our implementation team is also amazing: Róża, Bartosz, Piotr, and Michał, who can beautifully connect both the logic and the frontend into a cohesive whole.

Także ja się nie mogę doczekać, co nam z tego wyjdzie, będę Was informował na bieżąco. Na takim etapie teraz jesteśmy, myślę, że to jest kluczowe, więc taki stan rzeczy Wam przekazuję i pokazuję Wam, jak to działa.

I also can't wait to see what comes out of this, I'll keep you informed along the way. This is the stage we are at now, I think it's crucial, so I'm conveying this state of things to you and showing you how it works.

Jeśli chcecie zobaczyć, a tego słuchacie tylko, a chcecie zobaczyć te wszystkie rzeczy, to możecie to zobaczyć.

If you want to see, and you're just listening to this, and you want to see all these things, then you can see them.

Jeśli chcecie zobaczyć, a tego słuchacie tylko, a chcecie zobaczyć te wszystkie rzeczy, o których mówiłem, to zapraszam Was na edweb, bo tam wideo pokazuje wszystkie na przebitkach screeny i w ogóle to, jak wygląda ten nowy interfejs.

If you want to see, and you're only listening, but you want to see all those things I've talked about, I invite you to edweb, because there the video shows everything in screen overlays and how this new interface looks in general.

Także zachęcam Was do tego, żeby to sprawdzić. A na teraz dziękuję Wam za uwagę w tej lekcji. Do usłyszenia.

I also encourage you to check it out. And for now, thank you for your attention in this lesson. Goodbye.