Menü Bezárás

Hello, I'm

Anna Árpás.

About me

Hello, good to see you here. Let me introduce myself shortly in this section.
I really love creating things I can be proud of. It can be anything: a sketch, a logo, a website, an application, or a gift for a friend. I’m really creative and enthusiastic, always searching for the solution to a problem or question.
That’s why I wanted to be an architect. It was a really hard and rough time. During the university I realized, I don’t want to plan public buildings, industrial halls, not even family houses. I drew many sketches, stickers, a logo for my band. Really loved it and I was good at it. So I started to think about this kind of work. Maybe I could be a graphic designer. But I had to finish school. I got a nice degree in Architecture.
After that, I went to some graphic design courses to learn what I really love. Made so many logos, layouts, web sites, learned a lot, drew a lot.
I like to develop myself, learn more to be better, so I just leveled up and completed a UX designer course. Now I’m looking for every opportunity to show myself to the world!

PS: everything could be a case study! 😉

Studies

2020 – UX designer
Xlabs – UX bootcamp & project course
2018 – Webdesigner
Webdesigner Suli, online course

Softwares

Figma
Illustrator
Photoshop
WordPress

interests

TRX, kayak, dragonboat
Taking photos
Traveling
Being spontaneous

Check out my works

NAVÜ-s projektek

Bevezető

A cégnél készült projektek közül két research heavy projektet emeltem ki – Közadat igénylés és Elemzés igénylés, ezeket fogom most bemutatni.

közadat igénylés

Projekt háttere

A Nemzeti Adatvagyon Ügynökség a jövőben, a Közadatportál felületén közadat igénylést tesz lehetővé. Ehhez szükséges egy közadat katalógus és egy szervezeti katalógus. A közadat katalógus segítségével a felhasználó könnyen megtalálhatja a számára releváns közadatot, amelyet meg is igényelhet. (A szervezeti katalógus pedig lehetőséget ad arra, hogy böngésszen és átlássa, mely adatokat, mely szervezetnél talál.)

Feladat

A feladat során a nemzeti Közadatportálokon található szervezet listákat, adatkészlet listákat és adatigénylés folyamatát vizsgáltuk.

Folyamat

Deskresearch

A feladatot ketté osztottuk adatlista alapú keresésre és szervezet alapú keresésre. Az én részem volt az adatlista alapú keresés megkutatása.

A feladat számomra kissé megfoghatatlan volt, adatkatalógusok keresése más közadatportálokon. Hosszú napokig nem jutottam sokkal előrébb. Többször átbeszéltük a teljes csapattal is, hogy milyen megoldásokra gondolunk, mi az amit keresni kellene.

Továbbra sem történt érdemi áttörés, egészen addig, amíg a másik researcher kollégával (aki a szervezeti katalógusok kutatásával foglalkozott) el nem kezdtük felrajzolni a táblára, hogy mire gondolunk. Ekkor jött a megvilágosodás. Ki kellett lépnem a közadatportálok világából és kicsit messzebbről nézni a dolgokat. (kép)

Így jött az ötlet, hogy egy webshopokhoz hasonló analógiát alkalmazva megoldható a katalógusok megjelenítésének kérdése. Sikerült is kidolgoznunk egy javaslatot: felhasználónak lehetőséget adunk arra, hogy akár az adat paramétereinek ismeretében, de akár egy szervezet lista alapján is megkezdhesse az adatigénylést. A nagy adatmennyiségre tekintettel a két lehetőséget külön fül alatt kezeltük, azonban a szabadszavas kereső mindkettőn helyet kapott.

Ideation

A teljes csapattal együtt kidolgoztuk a közadat igénylés flow-ját. Valódi felhasználók hiányában ezt best practice-ekre alapozva valósítottuk meg.

Közadat igénylés flow

Még mielőtt továbbhaladhattunk volna ezzel a feladattal, érkezett egy igény elemzés igénylésére is (ez lesz a másik projekt amit bemutatok), ami nagyobb prioritást kapott. Így a közadatigénylés ezen a ponton megállt. Nem készültek képernyőtervek.

Takeaway

  • néha messzebbről kell nézni a dolgokat – thinking out of the box
  • lerajzolva sokkal jobban megértem a folyamatot
  • a közös gondolkodás mindig előre visz
  • bármikor előfordulhat, hogy érkezik egy új igény és abba kell hagyni az épp aktuális feladatot

bonus

In my free time I also do graphic design (mainly logos and figurative elements). After figuring out the name StreaMusic for the app pretty quickly, I created a logo for it.

Tippek UX kezdőknek avagy unikornisok nem léteznek

Unlike the other projects, it is in Hungarian. Translation coming soon.

A következőket főként kezdő, pályakezdő UX designerek figyelmébe ajánlom. Saját tapasztalataimat foglaltam össze a UX-es álláskereséssel kapcsolatban. Remélem hasznosnak találjátok őket és a segítségetekre lesz.

Bemutatkozás

Árpás Anna vagyok, junior UX designer. Építészmérnökként végeztem, de váltani akartam. 2020 májusában elvégeztem az xLabs Bootcamp és Projekt képzését. Utána rögtön elkezdtem állást keresni. Természetesen a kialakult pandémia nem segített a helyzeten és az sem, hogy nem volt túl vastag a portfólióm. Így elkezdtem dolgozni az első saját projektemen.

Erről lesz szó

  • önéletrajzírás
  • portfólió építés
  • tapasztalatok álláskeresésről
  • próbafeladatokról
  • interjúzásról
Happy path

Ezen az ábrán egy sikeres elhelyezkedés lépéseit mutatom be. Ezeken vezet végig ez a kis írás: elsőként egy ütős önéletrajzot kell összerakni, ezután (vagy akár ezzel egyidejűleg) el kell kezdeni portfóliót építeni, majd sok-sok állásra jelentkezni, próbafeladatokat készíteni és interjúzni (lehet fordítva is) és a végén, ha minden jól megy bevesznek egy szuper csapatba!

A portfólió építés szakasznál fontos, hogy nem áll le teljesen ha már sikerült bejutni egy munkahelyre. Továbbra is folyamatosan bővíteni kell, hiszen később ugyancsak egy portfóliót kell bemutatni ha váltásra kerül sor.

Önéletrajzírás

Még mielőtt bármilyen állásra jelentkeznél, kell egy jó önéletrajz. Ahhoz, hogy tudd tartalmilag mi kerüljön bele, érdemes megnézni néhány álláshirdetést. Láthatod mire kíváncsiak, milyen elvárásaik vannak. Ezután jöhet az önéletrajz összerakása.

Nekem nem volt túl sok tapasztalatom a cv-írásban, így utánanéztem milyen tartalmi és formai követelményei vannak egy UX-esnek. A legtöbb hasznos infót az enhancv.com — ról szereztem, illetve a mentorom is nagyon sokat segített. Ha nem vagy rutinos a témában kérj külső segítséget!

Group 24

Az önéletrajz 3 legfontosabb blokkja

A Tapasztalat / Experience mellett még két résznek kiemelt szerepe van az önéletrajzban: Tulajdonságok / Soft Skills és Programismeret / Hard skills. Ezek azok amiket elsőként megnéznek.

Tapasztalat / Experience

Kezdőként valószínűleg nem rendelkezel 5 év releváns szakmai tapasztalattal, főleg ha most fejeztél be egy képzést. Ide beírhatsz olyan munkákat, amiknek lehetett UX-es vonatkozása (időintervallum nélkül!) vagy folyamatban lévő projekteket. Egy-két mondatban leírod miről szólnak, mit tartalmaznak, mi volt a te szereped.

Tulajdonságok / Soft Skills

Ezek rád jellemző emberi tulajdonságok. Érdemes azokat előrébb írni, amik a legjobban jellemeznek.

pl.: empátia, kommunikációs készség, problémamegoldó, csapatjátékos, stb.

Programismeret / Hard Skills

Felsorolod azokat a programokat, eszközöket amiben jártas vagy, ezek tudásszintjét meg is jelenítheted. Priorizálhatod ezeket figyelembe véve az adott állás profilját.

pl.: Figma, InVision, Sketch, Adobe Illustrator stb.

A UX szakmában a fő nyelv az angol (itthon leginkább a “Hunglish”), főként a különféle szakkifejezések miatt amiknek nehéz lenne pontos magyar megfelelőt találni. Ezért hasznos ha önéletrajzod angolul és magyarul is elkészíted. Vannak olyan hazai álláshirdetések amiket angolul tesznek közzé, de találkoztam olyannal is, hogy magyar nyelvű hirdetésre angol cv-t kértek.

Portfólióépítés avagy Minden lehet case study

Kezdőként a legfontosabb, hogy legyen egy ütős portfóliód. Ez lesz az útleveled a UX világába.

Szakmai tapasztalat hiányában saját projekteket kell létrehoznod. Ha nincs ötleted csak gondolj arra, hogy biztosan van olyan weboldal vagy mobil alkalmazás, amin egy kicsit változtatnál, bizonyos részeit másképp csinálnád. Ilyenkor a redesign egy jó megoldás lehet. Vagy például az is, ha van egy jó ötleted egy applikációra vagy honlapra. Ha túl nagy falatnak érzed a feladatot, bontsd kisebb részekre, pl készítsd el 1–1 képernyő tervét, beszélgess felhasználókkal, gondold újra a menüt stb. → Minden lehet case study.

Bármilyen projektet is csinálj, nagyon fontos dokumentálni minden lépést, a teljes folyamatot. Ebből fog elkészülni az ún. case study vagy esettanulmány, ami pedig a portfólió része lesz. Ezek kulcsa az egyéni gondolkodásmód. Minden munkádból ennek kell tükröződnie, ezt fogják nézni azok is, akik eldöntik, hogy akarnak-e veled dolgozni vagy sem. Kezdőként jó ha van legalább 2–3 eleme a portfóliódnak.

Az elkészült case study-kat érdemes minél több felületen publikálni, hogy minél több emberhez eljusson. Pl: linkedin, medium, behance, dribbble, esetleg ha van saját honlapon.

Group 23

Tapasztalatok álláskeresésről

Mikor elkezdtem állás után nézni először a linkedin-en néztem körbe miután frissítettem a profilomat. Rengeteg helyen keresgéltem, nézelődtem. A teljesség igénye nélkül pár oldal: linkedin, glassdoor (külföldi többnyire), profession, UX Budapest facebook csoport.

dreamjo.bs-t külön ajánlom, önéletrajzot lehet benne összeállítani, dokumentumokat feltölteni, állásfigyelőt beállítani, speciális keresővel dolgozik.

Illetve a Skillbandit egy számomra új kereső volt, személyiségteszt alapján megmutatja milyen állás lenne neked a legmegfelelőbb. Mint érdekesség is szóba jöhet.

Egy idő után elkezdtem olyan állásokra is beadni a jelentkezésem, amire nem feleltem meg 100%-ban. Priorizáltam az elvárásokat és ha már az 50%-át tudtam hozni, beküldtem.

Group 26

Sok hirdetésben találkoztam olyan elvárásokkal, amik nem vágnak a szakmába, sőt azok már egy másik szakmához tartoznak. Pl programozói ismeretek. Sok helyen előfordul, hogy egy emberrel próbálnak több munkakört, esetleg pozíciót lefedni. Ezek a helyek unikornisokat (univerzális személyeket) keresnek. De unikornisok nem léteznek, csak ezt még senki sem mondta nekik.

Rendszeresen előfordult az is, hogy 1–3 vagy 3–5 év releváns(!) szakmai tapasztalattal rendelkező jelöltet keresnek. A “junior” szót nem is érdemes keresni a hirdetésekben. Csak nagyon kevesen írják ki és a junior szint is igényel szakmai tapasztalatot. Így tapasztalat nélkül én megalkottam a “baby junior” szintet (Level 0–1) — mint frissen végzett vagy pályaváltó, pályakezdő. Sajnos az a tapasztalatom, hogy nem támogatják a baby juniorok elhelyezkedését. Kezdő állások ritkán vannak meghirdetve, ezeket többnyire házon belül vagy ismerettség által igyekeznek megoldani. A legtöbben tapasztalt jelentkezőket keresnek, ami egyfelől érthető, másfelől kevésbé. A tapasztalt is volt egyszer kezdő, mint ahogy mindenki volt egyszer csecsemő. Tapasztalat híján nehéz fejlődni.

Jelentkezés folyamata

A UX berkeibe való bekerülést többkörös kiválasztási folyamat előzi meg (mint kiderült számomra az első interjú után). Az előzetes értesítés (telefon, e-mail) után általában jön az 1. interjú vagy beszélgetés. Az is előfordulhat, hogy adnak egy próbafeladatot és annak értékelése után döntenek arról, hogy szeretnének-e veled megismerkedni vagy sem. Próbafeladatok és interjúk váltják egymást. Általában 3 kör alatt eldől kit választanak, de megeshet az is, hogy ennél több körre van szükség a megfelelő jelölt kiválasztásához. Ez nagyfokú türelmet igényel.

Tapasztalatok próbafeladatokról

A lehető legkülönfélébb feladatokkal találkoztam. Voltak amelyek gyanúsan könnyűek voltak és voltak olyanok, amik megizzasztottak és segítséget kellett kérnem. Néhány példa (a teljesség igénye nélkül): képernyőtervekhez low-fidelity drótváz készítése, egy videó véleményezése UX szempontból, fiktív mobil app bizonyos folyamatainak megtervezése és bemutatása.

Első olvasatra talán ijesztőnek tűnhetnek, de a kezdeti pánik leküzdése után nagyon izgalmas dolgok tudnak születni. A feladatokra elegendő időt szoktak adni és bármilyen kérdésre készségesen válaszolnak. Kifejezetten kedveltem azokat a feladatokat, amelyek leírásában szerepel, hogy x óránál ne tölts vele többet. Tehát nem az a lényeg, hogy “kész” legyen, egy alap koncepciót és a gondolkodást akarják látni.

Minden megoldás esetében a gondolkodás módra kíváncsiak elsősorban és arra, hogyan adod elő. Igen, előfordul, hogy akár szóban, akár írásban be kell mutatni a feladatot. Néha még az az interjún is rákérdeznek a feladat megoldására.

Group 28

Tapasztalatok interjúzásról

Személy szerint rettentő lámpalázas típus vagyok, így jó pár interjúra gyomorgörccsel és izzadó tenyérrel érkeztem. Még az online-okra is. Tapasztalat híján mindig attól féltem, hogy olyasmit kérdeznek amire nem tudok válaszolni. Ez a lámpaláz nagyjából a 20. interjúra múlt el. Úgy mentem oda, hogy ez egy beszélgetés lesz aztán majd eldöntik. Csak lazán. Be is jött mert felvettek.

Ez előtt nem volt sok tapasztalatom interjúzásban, így azt is meg kellett szereznem. Sok dolgot megtanultam:

  • bizonyos fokú őszinteség — nem kell mindent is elmondani az interjúztatóknak
  • magabiztosság és határozottság — izgulós típusoknál ez idővel megjön
  • ha lehetőséget adnak rá (szoktak) kérdezni kell! — főleg az utolsó interjún Nekem ez a cikk sokat segített
  • ha megkérdezik a bérigényt érdemes megkockáztatni a nagyobb számot (ha tudod, bruttóban) abból még lehet alkudni
  • ha elutasítanak meg kell próbálni visszajelzést kérni
Group 25

Remélem hasznosnak találtátok a fentieket és egy kis segítséget tudtam adni. Sok sikert az álláskereséshez!

Néhány hasznos link

STREAMUSIC

Onboarding for a non-real streaming service application

about

I got it as a test job when I applied for a job.
The task was to design the onboarding interface for a fictitious streaming application. Onboarding is the process of introducing a new user to the use of a product.

the task

Design three screens:

  • Screen #1 introduce the application briefly and clearly
  • Screen #2 highlight and present a useful feature
  • Screen #3 user can select which genres/bands/series/categories they are interested in
mockup-for-a-podcast-with-a-man-wearing-headphones-and-holding-an-iphone-xs-max-24811 (1)

process

I divided the task into three parts – deskresearch, competitor research, design – and I searched answers to the questions detailed below.

I chose music from the two groups (film and music), so I looked for and tried some of the related services and applications.

In the design, I took into account the concept and UI elements of the existing applications, and I was also inspired by other places.

Deskresearch

  • What is streaming?
  • What kind of groups they have?
  • Which one will I choose
  • Give a name (can be at any point in the process)

What is streaming?
Streaming is a data transfer solution that allows someone to start playing media content (such as a movie or music) without fully downloading it.

What kind of groups they have?
Two main groups:
music
film

Which one will I choose?
Music, podcasts

Name options:
myStream, StreaMusic

Design

What are the existing functions?
What is missing? // How could it be otherwise?

Existing functions

  • listening to music, searching
  • selection of favorite artists
  • create playlists
  • browse lists
  • search between tracks, artists
  • filtering – age, genre, style, mood
  • podcasts
  • creates personalized lists based on the music you listen to
  • you can listen to songs offline – downloaded
  • tracks can be downloaded
  • free version with ads
  • subscription
  • sharing content you listen to

Competitor research

What similar apps are there?

Service providers

  • Spotify
  • YouTube music
  • TIDAL
  • Apple music
  • Deezer

Applications

  • Spotify
  • YouTube music
  • TIDAL music
  • Apple music

design

During the design, I followed the example of the applications appearing in the research, I tried to present the process a little differently.

While solving the task, I had to remind myself several times that I didn’t have to design the whole application, just the onboarding process. However, it is essential for me to see the operation and functions of the app in its entirety.

Screen #1 Introduction

I named my app StreaMusic so it was easier to present.

The onboarding display has caused a lot of headaches. I think it’s important that when using a new app, other visual elements besides the description appear on the screen and don’t necessarily be a photo, but an illustration, for example. That’s why I decided to illustrate the display.

This gives the user a visual experience and depending on the graphics you can even smile at that particular process.

Screen #2 Useful function

I chose to create playlists as a useful feature.

Customizability is very important, the user can create, modify, have a little control over what they want to listen to. Listening to your own lists can be an even greater experience.

Screen #3 Selection

When displaying categories, I ran into some problems: what categories are important at the very first moment? They come up with genres, different moods and of course the artists. After a long deliberation, I decided to show the artists (because if I chose a genre, for example, I would look for artists there as well).
I have also selected some performers and by pressing the “SUBMIT” button you can listen to the performers’ songs, albums, and concert recordings.

Since I chose music and podcasts as the theme of the app, I found it important to show that for podcasts, the user can select topics that interest them in the same way.

Group 31

bonus

In my free time I also do graphic design (mainly logos and figurative elements). After figuring out the name StreaMusic for the app pretty quickly, I created a logo for it.

Back to the gym with UX

Disclaimer

This is my own project. The Fitness5 & Gym didn’t ask me to design the app.

Project: Fitness5 & Gym app design from the basics

Role: UX/UI designer

Period: 2020. 05-2020.12 

Actual work: about 300 hours

Used tools

  • Paper & pen – for sketches, low-fi protos
  • Miro board – for organize the project and screen design
  • Figma – for prototyping
  • Invision – for personal testing
  • iPhone built in screen recorder – for personal testing
  • Movavi – for remote testing
iphone-xs-mockup-of-a-woman-wearing-active-wear-25977

introduction

The gym where I go to TRX – Fitness5 & Gym Savoya – has its own group application interface for workout applications (https://savoya.dix.hu/m/, later dix).

My experience of applying for the classes led me to this project. Dix has been optimized for the desktop use and is not responsive at all. On a smartphone, especially on a small screen (I use it on an old iPhone SE), it is difficult to read, and navigating the schedule is problematic. The gym website and dix are two separate interfaces. This is not in harmony with the gym’s website.

One important recurring experience for me and many other users was that they signed up for the wrong time workout.

During the UX course, it occurred to me that something could be started with these. The two surfaces should be kneaded together to meet the same surface on any device. It is also possible to access functions that are currently only available on one of them, e.g. to register for a group lesson.

I had several ideas (a complete redesign, an application) of what was the result, how and why, I will present in this case study. I designed the interface for iOS. The screens appear on iPhone 11 Pro.

After the course, this became my first project. Based on my own research and my own and others ’experiences.

Unlucky factor: I started the project during the first quarantine of COVID-19, which caused several problems e.g. desk research and in the organization and conduct of user tests.

problem

The interface is non-responsive, very difficult to use from a smartphone, especially for smaller displays; the calendar does not show the current week causing the often failed applications.

When used on a desktop, class registration works perfectly. Because the text is clearly visible and legible, there is less chance of accidental mis-clicking. Page contrast is less of a problem.

When used from a phone, navigation on the dix is difficult, the letters are small at the workouts, the text is hanging off from the buttons, it doesn’t send an error message in case of a possible incorrect user or password, so they don’t know if we type something wrong or frozen. If I had to rate it, I would give 2 out of 5 stars.

Desktop view
Mobile view (old iPhone SE)

The coach regularly raised our attention to apply so that she could put together a more accurate set of exercises. On several occasions, the number of applicants didn’t match the number of those present. Many times I ran into the situation where I applied but still not the one I wanted because I didn’t pay attention to the date and applied for the workout of the following week. The default date is one week later.

I checked in regularly from my phone, I also tried to do it even at home or at work, because it was a challenge to zoom in and pick the right day and class while shaking on a bus or tram. I wasn’t alone with these annoyances, others have told me about similar experiences.

purpose

The goal is to create an interface where the info on the website and the registration for classes are in one place. Navigating the calendar is simple and straightforward, and signing up for classes or if needed, cancelling is quick and easy. Primarily it should be usable on mobile. This is important because the vast majority of gym users manage their affairs on mobile, including applying for a workout.

Required functions

  • Create an own profile, attended workouts, show season ticket info
  • Filter – workouts, coaches, rooms
  • Simplified timetable / calendar

the structure of the project

The structure of the project is based on design thinking and a slightly modified double diamond (more like a snail or lollipop)

  • Desk research
  • Usertest
  • Design / iterate
  • Repeat

The order changes from time to time.

I carried out the project in parallel with two personas.

The two groups:

  • Regular users
  • New users

This was important because those who use the interface regularly have different needs and insights and those who are new.

desk research no. 1.

In the first phase of desk research, the idea was to create a mobile version that could be opened from a browser, so I searched the net. I checked out several gym / gym chain websites. How to register, how to register for classes:

As well as other sports-independent sites with a large number of users, I looked around for registration forms:

  • HBO GO
  • Oszkár

I tried them on both desktop and mobile. I created small user flows for them. In several gyms I had a problem applying for the class.

 

desk research_saját mini flow-k
Own user flows

Unlucky factor: All gyms were closed during the quarantine, registration for the class didn’t work. I shaped the mindset a bit, moved on with the project, replaced the tests after the quarantine.

My impressions:

  • Check-in after registration or login
  • In some places the registration / login is not clear
  • You cannot or will only create an unusable profile
  • Not responsive
  • Due to quarantine, certain services are not available in several places – logically
  • In the case of the Sportkártya / AYCM you can create a profile – count the occasions – this can be useful for season ticket information, for example

USABILITY TEST FOR THE EXISTING PLATFORM a.k.a. test for the dix

As I mentioned, I divided the participants into two separate groups for the test from the beginning.

The two groups:

  • Regular users
  • New users

Recruiting users

Regular users: I wrote a post in the closed facebook group on TRX that such a project / product is being made and I would like to ask them for help in testing it. Here we can observe the peculiarity of social media that out of 100 likers (one click doesn’t hurt) there are 10 active commenters, minimal substantial reaction. So at the next workout, I personally asked my mates to take part in this test.

New users: it was a bit easier, I asked a couple of good friends and acquaintances to help with the testing, they were willingly available. 

The task of the test

Find the given workout, sign up, and then cancel the class. The task of the two groups differed in that regular users logged in with their own account and new ones had to register (in case of problems they could log in with mine – all two groups). That’s why it was important for me to follow the registration interfaces as well.

Lucky factor: Testing has been timed so that quarantine has already been dissolved. This allowed me to personally take the tests with my own phone’s built-in screen capture feature.

 

I conducted the test with 8 people, 4-4 regular and new users. The following result was obtained:

Appearance

  • Responsiveness
  • Readability
  • Current date of the calendar
  • Display the timetable view on one screen

Function

  • Filtering, listing – room, workout, coach
  • Own profile
  • Manage notifications
Regular user's flow
New user's flow

The biggest problem

The biggest problem was navigating the calendar. You have to swipe between the rooms. You can easily tap at a workout by accident and also have to pay attention to the date.

design

From the test results, it became clear what the flow would be, what the functions were, and what screens would be needed.

Planned flow: log in, find the right and / or the specified class/workout, sign up and then cancel.

Planned main features:

  • Timetable-calendar
  • Filtering option (room, workout, coach)
  • Show own profile

Planned screens:

  • Login / Reg
  • Timetable
  • Workouts “card”
  • Confirm subscription
  • Own profile
  • New home screen
Planned flow
Planned screens

How might we most easily show a timetable?

This project is the main How might we? question, which stems from randomly marked classes or dates in the tests – due to visibility and readability issues.

In parallel with the design, another round of research began. I was trying to find the best solution to manage the calendar-schedule. The schedule is basically a horizontal element, the appearance of which on a monitor is not a problem. But if the user begins to use the interface on the phone – which in a narrow but vertical direction is almost endless  – it becomes unusable. It falls apart, the user has to zoom in and out, inevitably comes across something the user didn’t want. I was specifically looking for appointment booking sites and apps not only on sports: where can booking an appointment be important in everyday life? That’s how it came to my mind: the cinema. I checked the cinema city reservation system. How to choose a movie and then book a ticket for it. It gave some ideas.

Timetable evolution

When I felt that I was getting ready for the first test, I asked my former teammates to look at what they thought, if they found a flaw in it.

Quite a few things have changed:

The most significant change was that “the hamburger ran out,” meaning that the number of items on the hamburger menu was reduced to such an extent that it lost its meaning. Rather, the elements of a tab bar of its own emerged. Here comes the point that instead of a mobile version that can be opened from a browser, an application will be created with stand-alone navigation. Although the elements of the tab bar had not yet emerged clearly, more and more the other screens were beginning to gain meaning. In addition to the menu system, the structures of certain screens and the labels of some buttons have also changed.

Burger menu to tab bar
Screen structure

Lucky factor: Due to my architect and graphic designer background, I basically draw sketches, screens, low-fidelity prototypes by hand. Thanks to the update of the miro board, it is great to make screens and wireframes even at a high-fidelity level. I stepped to a mid-fidelity level and carried it through. I really liked this tool, I had a good experience with miro before.

The first test was performed after the iteration.

USABILITY TEST FOR THE PROTO NO. 1. a.k.a. The panic

The task of the test

Select the “Savoya VIP” gym, sign up or log in, then check in the TRX workout on Sept 15 and cancel it.

The first test among regular users didn’t turn out the way I planned. Because of my first prototype test, I couldn’t manage the test well so I didn’t have to help with the task – it was a great lesson. Users could only go through the task with help. 3/3 tried to sign up for a class/workout at “Következő edzés(ek)” (Next workout(s)) and “Válassz edzést!” (Select workout!). The “Órarend” (Timetable) button in the tab bar didn’t even come up as a solution. The placement of “Árak” (Prices) and “Hírek” (News) was frustrating. This didn’t come up in consultation with the team, probably because they paid more attention to how it would work and be used.

“What am I doing wrong?” (this was a cry for help from one of the testers)

Következő edzések (Next workouts)
Válassz edzést! (Select workout!)

After Tester 3, I iterated one, “Válassz dátumot!” (Select date!) button came first in “Órarend” (Timetable). See if this small change can lead to more successful tests. I did two more tests with this version, here they went through the task successfully. This matched up with a WOW experience, and even such a seemingly small change brought a significant improvement.

In this version, there was one way to apply for training: “Órarend” (Timetable) option at the tab bar -> tap “Válassz dátumot!” (Select date!), select the workout and check in.

Note to self: start user testing as soon as possible

After processing the tests, this result was obtained:

  • There are several ways to apply for a workout
  • A button from the main page could take you to the schedule if you have not recorded a workout yet
  • “Árak” (Prices), “Hírek” (News) appear elsewhere

Looking at the tests and the state of the proto, some changes have occurred in me as well – there was too much text, no icons or images, the whole thing was too dense.

Lucky factor: One of the testers (my coach) had some suggestions from specific apps I didn’t know (F&M, SportMate).

About the two applications in a nutshell: the Hungarian SportMate Club Kft. Has developed an app that allows you to easily join clubs (eg tennis, football) and participate in various sports events. Then the F&M Fitness and More app was created for the gym in the MoM Sport building. Its target audience is the higher-than-average-income, active residents of the Buda districts.

In the F&M fitness and more app, as it is designed for the gym, it is also important to apply for a group class. It probably meets this aspect (unfortunately I couldn’t test it even after an accepted registration). Its structure was similar to my prototype in several respects, it gave ideas mainly for the placement of UI elements e.g. placement of gym information, display of “News” (Hírek) and “Prices” (Árak). Regardless, I saw a uniform and clean look for me. It is clear which items are clickable or non-clickable. Specific information is displayed in the right place – e.g. price. I’ve also run into this as a hobby athlete, and as an architect and UX designer, I think usability is downright fundamental. I believe that my design is more in line with the principles of clarity, clear communication of information in the right place.

Note to self: it is also worth talking to people who are not necessarily users of the app, but are at home in the profession, in this case fitness. E.g. coaches.

Gym information and "Hírek" (News)
"Árak" (Prices)
"Edzések" (Workouts)

USABILITY TEST FOR THE PROTO NO. 2-3. a.k.a. The 'Final' version

The task of the test

Select the “Savoya VIP” gym, sign up or log in, then check in the TRX workout on Sept 15 and cancel it. After that find the gym’s e-mail address.

After the iteration, 3 paths were finally developed to apply for the workout. The users used these in equal proportions.

Paths

  • Path 1: Tap “Megnézem az órarendet” (View Timetable) button on the homepage -> select workout from the calendar in the “Órarend” (Timetable)
  • Path 2: Tap “Megnézem az órarendet” (View Timetable) button on the homepage -> tap “Edzések” (Workouts) button on the “Órarend” (Timetable)
  • Path 3: Tap “Edzések” (Workouts) button on the homepage

Path to “Órarend” (Timetable): “Megnézem az órarendet” (View timetable) button on the main page, bottom tab bar icon

Path to “Edzések” (Workouts): “Edzések” (Workouts) button on the main page and at “Órarend” (Timetable) option

Paths

⅔ of the testers used the “Megnézem az órarendet” (View Timetable) button on the main page. The remaining ⅓ is used the “Edzések” (Workouts) button, also on the main page. The “Órarend” (Timetable) button in the bottom tab bar didn’t appear as an option for anyone.

The result thus calls into question its legitimacy, although it has not been specifically tested. No changes have been made in this regard. Wherever the user is in the app, the tab bar will be available most securely. The other two buttons are only available from one screen at a time.

This test was already much more successful than before, with participants being able to solve tasks quickly and easily.

Between the tests, an iteration took place again, and an application or cancellation was added to the flow. Avoiding any accidental tapping aside. After the iteration, three more testers went through the tasks and the “application” successfully.

Some feedbacks

“I think it’s perfectly fair, it’s clear what I’ll find where”

“It was about like when I drive home from Budapest. Everything is going and you don’t really know how it just happened ”

This video shows the last version of the proto. The flow: regular user log in, she/he has no workout yet. Choose the “Megnézem az órarendet” (View the timetable), then tap on the “Edzések” (Workouts), then choose TRX, check in, and cancel at the end. (Click or tap on the video to start)

LONG-TERM PLANS

In 2020, the prevention of pandemics and the mitigation of their effects became part of sustainability. Within this, to protect and strengthen one’s own and others’ health in terms of the topic of the present case study.

As a result of Covid-19, we have become even more aware that we need to deal with maintaining our health. Once the lockdown is over and most people are vaccinated, we will again need to gather ourselves, both physically and mentally, as soon as possible. So the gyms will fill up again.

Workers are on the verge of lasting signs of economic recovery, as many have not switched because of financial security reasons. Fitness and endurance are also essential for the change. So this “fitness app” is also socially useful.

The home office becomes more common in terms of work, it will be or is already the “new normal”. Following this principle, more and more people are moving both at home and outdoors. They will most likely return to the gym on the one hand because of the company, mainly after so much confinement, on the other hand because of the events and thirdly because the physical endowments and equipment of their homes do not permanently include good, high quality fitness services.

This MVP, whether made from a specific motives, is actually a convertible “skeleton” that can be easily customized for any similar, primarily, but not exclusively, sport-like activity with the right UI design. Based on my experience, the quality of digital solutions of Hungarian fitness providers is quite diverse, so my design can be useful for them as well.

The logical directions for further development of this streamlined design may be determined by changing user habits and technological developments due to the pandemic, such as:

  • Contactless payment – Integration of a payment system for the purchase of tickets and season tickets from the app, for the extension of season tickets. With a non-contact solution, it speeds up the process compared to a physical purchase, eliminating queuing.
  • Protecting the health of others – Performing regular exercise at home during an epidemic. Real time stream and uploaded workouts would also be among the options.
  • Work-life balance – flexibility customized – Workouts uploaded by coaches could be viewed at any time, unlike e.g. with sessions in the rooms at fixed times, typically starting at full hour.
  • Encouragement to move – Users can also place the workout on a playful basis – gamification – for better, faster results, or just for fun. Collecting points with training and passes, redeeming them for training occasions, sportswear discounts.
  • Moving outdoors – In parallel with the proliferation of smartwatches and fitness bracelets, the extension of some features of the app to these devices, the synchronization with these devices (e.g. Apple watch).
  • Healthy eating – Home delivery of healthy food, eating, fluid, vitamin intake tips, in which sustainability should also be emphasized.

HIGH FIDELITY SCREENS

CONCLUSION - RESULT - TAKEAWAYS

Positive experiences:

  • Getting 1st own app design
  • I was able to apply what I learned in the course
  • I handled the pandemic in the meantime
  • All the while I persevered and time stretched longer than I planned
  • Positive feedback from testers
  • UX snail

Mistakes:

  • At first, I was very attached to my own opinions and ideas, I had to let go of them
  • I was at a low point, thinking that the app is not good. But that was not the case
  • It should have been tested before the group discussion
  • The tests were processed long after they were completed, which caused annoyance several times, e.g. when the recording failed and I did not check this immediately after the test

WOW experiences:

  • I was incredibly proud to associate from a completely different sector / area with a solution that worked well there and tried to transpose it in a customized way – cinema
  • In miro you can create wireframes, icon library, smiley library
  • Even a small change can be a great success

Recommended tool:

Miro board – screen design – you can design a screen in it. Best after paper.

Be aware tools:

  • Invision app mobile – I used it for personal proto tests – If you are designing in figma and you will personally test a prototype in invision, you need to pay attention to what device you are designing because the images exported from the fig may not fit the invision devices. If you work in figma, test with it, if you work in invision, test with it. Not good to mix.
  • Movavi – I used to record remote user tests – if the earpiece is plugged in, the tester will not be heard on the recording. Sometimes it doesn’t record either a picture or sound.

I had a great time because I managed to create something from my hobby that is useful for others and supports health, which can also be commercially viable. The end result was a design of an application I wanted to create. It fit the purpose perfectly and I also received feedback during the last tests. It went very well. Since this was my first independent job after the training, it was helpful to see how much work needed to be done alone, no team to help or to throw the tasks apart. Fortunately, the old team still helped a lot.

SUMMARY

300

working hours

195

screens

21/18

successful user tests

4

iterations

1

case study

Fami.ly

We had to design a family hub -in teamwork- for tighter and simpler communication between all the family members. Possible functions were photo sharing, chat, schedule family events. It’s gonna be a mobile version of a website. To find the right way, we had to narrow the scope, so we chose the photo sharing function for this project.

It was very interesting for me in the project that family members of different ages use different digital platforms to share pictures.

The biggest challenge for the team was to be able to give something new, different from the popular competitors already on the market.

project structure

Research

desk research No.1

interviewing

synthesizing

build and find our main persona (we had 3)

Design

HMW (How Might We?)

journey mapping

user flows

desk research No.2

Prototype

crazy sketching

value/effort matrix

paper proto

low fidelity prototype

Testing

usability test

iteration, if it’s necessary

conclusion

next steps

after found our main persona - andrew active

Previously we described 3 personas: Penny Passive, Andrew Active and Sylvie Scheduler. For the design we have chosen Andrew Active. Although upload and sharing of photos was a priority for Sylvie Scheduler too, Andrew Active uses this feature the most often. He had other journeys too, which are useful for design.

We identified 4 journeys for our persona Andrew Active.

It was a challenge to choose among journeys for MVP. We voted for Journey#2 for prototype design as the best fit to our project including key needs of the personas being uploaded and settings. The first phone screen-like sketches… 😀

Prototype

We made two prototypes. The 1st version was tested. You can watch it here: 1stversion. We failed: quality screens broke the flow and were complicated. The Privacy settings screen was in the right place. Congratulatory screen received very warm reactions since testers missed it in other applications.

Based on test feedback, we made a 2nd version, an Extended MVP prototype, you can watch this video below. We added a group selection screen: family, close friends, coworkers. We removed the quality screens. We intend to put those under General Settings later, while main flow would only include default settings and storage visualization. We also planned personalization, an onboarding tutorial and gamification to stimulate app usage.

High fidelity screens

As the closure of our course we compiled this case study and designed two high-fidelity screens: ‘My Gallery’ and ‘Single Image View’ since these were tested with feedback.

The project was fictive since we are not working on a product to be marketed. However, it was lifelike, very intensive and practical yet a pleasant experience with a lot of lessons learned. Just one of those was the long lasting effect of Covid19 on remote work in UX, in which we acquired the proper skills and gained valuable experience.

This is a shorter version of the project, if you want to read the whole case study, click below.