Polish

👩🏽‍💻 moja rola

Badaczka UX

Projektantka UX i UI

👩‍👩‍👦‍👦 zespół

ja i programista (Krzychu)

⏰ czas

2 miesiące

🏷 tags

convert text, web application

convert text,

web application

convert text,

web application

a więc... jaki mamy problem?

Podczas picia kawy na balkonie i zastanawiania się,
co do diabła będę robić jako freelancerka, dostałam wiadomość...

"Hej! Obiecałem opowiedzieć Ci o moim pomyśle.
Mam nadzieję, że masz trochę wolnego czasu?"

"Hej! Obiecałem opowiedzieć Ci o moim pomyśle. Mam nadzieję, że masz trochę wolnego czasu?"

Krzysztof był zirytowany za każdym razem, gdy musiał formatować tekst, aby stworzyć stronę www. Rzeczy, takie jak zamiana spacji na myślniki lub zamiana małych liter na duże, itd...

Z istniejącymi narzędziami nie mógł 💔


  • cofnąć akcji 😱

  • używać wielu funkcji jednocześnie,
    i musiał kopiować tekst do oddzielnych narzędzi z potrzebnymi funkcjami.

  • zastąpić lub usunąć specjalne znaki z tekstu.

Z istniejącymi narzędziami nie mógł 💔


  • cofnąć akcji 😱

  • używać wielu funkcji jednocześnie,
    i musiał kopiować tekst do oddzielnych narzędzi z potrzebnymi funkcjami.

  • zastąpić lub usunąć specjalne znaki z tekstu.

Z istniejącymi narzędziami nie mógł 💔


  • cofnąć akcji 😱

  • używać wielu funkcji jednocześnie,
    i musiał kopiować tekst do oddzielnych narzędzi z potrzebnymi funkcjami.

  • zastąpić lub usunąć specjalne znaki z tekstu.

Z istniejącymi narzędziami nie mógł 💔


  • cofnąć akcji 😱

  • używać wielu funkcji jednocześnie,
    i musiał kopiować tekst do oddzielnych narzędzi z potrzebnymi funkcjami.

  • zastąpić lub usunąć specjalne znaki z tekstu.

Wymyślił więc proste narzędzie, aby ułatwić pracę sobie i innym ze świata IT. Miałam okazję zaprojektować to rozwiązanie tak, aby było zarówno przyjazne dla użytkownika, jak i atrakcyjne wizualnie.

przejdźmy przez Discovery!

Jako maniak analityczny chciałam zastosować najlepsze praktyki UX, aby upewnić się, że niczego nie przeoczymy. Zdefiniowałam działania projektowe, korzystając z procesu Design Thinking i przeprowadziłam pewne badania.

Po pierwsze, przeprowadziłam wywiad z Krzychem 💬

i upewniłam się, że zawarł wszystko, co istotne w briefie projektu.

Oprócz świetnej nazwy naszego rozwiązania i potwierdzenia elementów MVP, zaplanowaliśmy funkcje na kolejne iteracje:

  • zapisywanie historii użytkownika za pomocą plików cookie,

  • pobieranie przekonwertowanego tekstu jako dokumentu,

  • kursywa, pogrubienie, podkreślenie tekstu,

  • generator lorem ipsum,

  • ...i wiele więcej!

Następnie przyjrzałam się kilku podobnym narzędziom 👩🏽‍💻

…i w jednym lub dwóch spodobało nam się użycie ikon i kolory.

Niektóre z nich miały nieco staromodne UI... ale inspirujące wzorce UX!

Jako projektantka postanowiłam pożyczyć ✅


  • ciemny kolor & gradient w kolorach kosmosu,

  • przycisk "wyczyść" w obszarze tekstowym,

  • ikony z tytułami funkcji.

Jako projektantka postanowiłam pożyczyć ✅


  • ciemny kolor & gradient w kolorach kosmosu,

  • przycisk "wyczyść" w obszarze tekstowym,

  • ikony z tytułami funkcji.

i nie inspirować się ❌


  • brakiem możliwości cofnięcia akcji,

  • brakiem walidacji, gdy pole tekstowe jest puste,

  • małymi odstępami między elementami, które są grupami

    (bad gestalt 😢)

i nie inspirować się ❌


  • brakiem możliwości cofnięcia akcji,

  • brakiem walidacji, gdy pole tekstowe jest puste,

  • małymi odstępami między elementami, które są grupami

    (bad gestalt 😢)

research insights matter

Przełożyłam moje wnioski z procesu Discovery na zakres projektu i persony
(jako UX nie mogłam pominąć person, nawet dla tak łatwego narzędzia 🙈).

Omówiliśmy to z Krzychem i określiliśmy ostateczny zakres MVP.

nie od razu Rzym zbudowano ☝🏽

Jak widzisz na powyższym obrazku,
pozbyłam się dwóch bolączek Krzycha już w pierwszej wersji projektu!

Jak widzisz na powyższym obrazku, pozbyłam się dwóch bolączek Krzycha już w pierwszej wersji projektu!

Tak, dwie bolączki zniknęły, ale pojawił się kolejny problem 🥶

Krzysztof jako zdolny i doświadczony programista front-end, wspierał mnie
swym kreatywnym umysłem, i wspólnie opracowaliśmy użyteczne rozwiązanie dla tego elementu 🤓

Jako doświadczony front-end developer, Krzysztof wspierał mnie swoim kreatywnym umysłem, i razem stworzyliśmy użyteczne rozwiązanie dla tej funkcji 🤓

Jako doświadczony front-end developer, Krzysztof wspierał mnie swoim kreatywnym umysłem, i razem stworzyliśmy użyteczne rozwiązanie dla tej funkcji 🤓

Kiedy osiągnęliśmy zadowalające makiety, przeszłam do określenia
stylu wizualnego i brandingu. Główne cechy: efektywny i szybki,
nowoczesny=zoptymalizowany, elastyczny, z archetypem magika 🧙🏻‍♂️


Oparłam się na wcześniej analizowanych rozwiązaniach i modnych
gradientach w tym czasie.

Mimo moich wysiłków podczas procesu namingu, oryginalny pomysł Krzycha,
MagicText, okazał się najlepszym wyborem.

doszlifowany UI ✨

Przeprowadzając pierwszy test UX zakodowanej wersji odkryłam, że
Krzychu nie będzie musiał wiele poprawiać.

Przeprowadzając pierwszy test UX zakodowanej wersji odkryłam, żeKrzychu nie będzie musiał wiele poprawiać.

Przeprowadzając pierwszy test UX zakodowanej wersji odkryłam, że
Krzychu nie będzie musiał wiele poprawiać.

nigdy nie kończący się proces 🔁

🎉 Świętujmy, ale…

Następny etap projektu to zweryfikowanie, czy:

  • użytkownicy są zadowoleni z narzędzia ➡️ widżet opinii Hotjar,

  • użytkownicy korzystają z niego regularnie ➡️ użytkownicy powracający w Google Analytics,

  • wszystkie funkcje działają poprawnie ➡️ nagrania sesji w Hotjarze.

przemyślenia 🤔

Najbardziej satysfakcjonujący moment?

Kiedy zaprojektowane rozwiązanie ujrzy światło dzienne i
może być pokazane przyjaciołom i rodzinie ułatwia czyjeś życie.

Jeśli pracujesz z tekstem i potrzebujesz takiego narzędzia, śmiało skorzystaj z MagicText
(i stań się jednym z użytkowników, których będę śledziła przez Hotjar 😏).

Lekcje, które wyniosłam z projektu:

  • Mimo obszernego briefu, w którym mamy większość informacji dotyczących projektu,

    rozmowa wstępna z klientem może być przydatna...


  • Użycie gotowego zestawu wireframe'ów znacznie przyspiesza pracę.

  • Tworzenie animacji w programie Figma to mega frajda 😍


  • Przeprowadzenie testu UX zakodowanego produktu jest konieczne!

Lekcje, które wyniosłam z projektu:

  • Mimo obszernego briefu, w którym mamy większość informacji dotyczących projektu,

    rozmowa wstępna z klientem może być przydatna...


  • Użycie gotowego zestawu wireframe'ów znacznie przyspiesza pracę.

  • Tworzenie animacji w programie Figma to mega frajda 😍


  • Przeprowadzenie testu UX zakodowanego produktu jest konieczne!

Lekcje, które wyniosłam z projektu:

  • Mimo obszernego briefu, w którym mamy większość informacji dotyczących projektu,

    rozmowa wstępna z klientem może być przydatna...


  • Użycie gotowego zestawu wireframe'ów znacznie przyspiesza pracę.

  • Tworzenie animacji w programie Figma to mega frajda 😍


  • Przeprowadzenie testu UX zakodowanego produktu jest konieczne!

Lekcje, które wyniosłam z projektu:

  • Mimo obszernego briefu, w którym mamy większość informacji dotyczących projektu,

    rozmowa wstępna z klientem może być przydatna...


  • Użycie gotowego zestawu wireframe'ów znacznie przyspiesza pracę.

  • Tworzenie animacji w programie Figma to mega frajda 😍


  • Przeprowadzenie testu UX zakodowanego produktu jest konieczne!

do you like my
work?

let's collaborate and create amazing things 🌞

Framer template crafted with love by Dawid Pietrasiak & edited for portfolio purpose:) by Julia Wartacz

do you like
my work?

let's collaborate and create amazing
things 🌞

Framer template crafted with love by Dawid Pietrasiak

& edited for portfolio purpose:) by Julia Wartacz

do you like my work?

let's collaborate and create amazing things 🌞

Framer template crafted with love by Dawid Pietrasiak

& edited for portfolio purpose:) by Julia Wartacz