🇺🇸 Jump to English version
🇩🇪 Zur deutschen Version

🇺🇸

Update #2 - Time Investment in a Major UI Redesign of the Darts Tracking Application

Looking back at my last post, it’s clear that in the previous “sprint” I talked about, I completed a lot of small tasks. However, thinking about the past few weeks, I’ve noticed two major things: First, I lost a bit of development time, and second, I focused primarily on a much bigger task.

Let me start with a quick anecdote about the lost development time: I recently got two small kittens at home. Yes, they take up time and nerves, but they are really cute. But the time spent playing with cats can’t be invested in software development, unfortunately slowing down my project’s constant progress. So, there’s the cat issue, and I suspect it explains why my rhythm has been a bit off.

Now, on to the big topic of what I’ve actually achieved in development recently: My main goal for this year is to get the app to a point where I can release version 1.0 that I’m happy with, containing all necessary functionality to make it truly usable. The major task I’ve been tackling is a big UI redesign. To be fair, it’s not strictly the most important thing to focus on for a release. How the app looks isn’t as important as whether it works. Especially as a solo developer with limited time, the focus should be on the minimal viable product. But I still chose to take on this redesign because it feels a bit depressing to work on an app for a year and stare at standard Material Design the whole time. It lacked any personal touch, and I believe the new design significantly improves the user flow, making the app easier and more enjoyable to use.

So, what have I done?
The redesign approach I took was to individually overhaul each existing page. For example, I revamped the in-game view, where you can see who’s supposed to throw, who has how many points, etc. I did the same for the game list and the player list, taking each one and reworking it. You get the idea. Of course, I aimed to maintain a consistent overall design. I started by researching design inspirations on platforms like Dribble and such. I didn’t want to stray too far from the base Material Design but took it as a starting point. I began with one page—I believe it was the game overview—and replaced the old, boring table display of data with individual Material Cards for each game, presenting the information in a more engaging way. I made visual improvements using icons and added more data points, then continued step by step, applying this as a foundation to redesign the other pages.

How long did it take, and what helped me along the way?
Overall, the redesign took about two and a half weeks. I couldn’t always invest 15-20 hours a week, so I worked through it slowly, finishing one screen when I had the time. I also used some tools to save time. I used the free version of ChatGPT to upload images of designs I liked and generate CSS styles for them. This worked fairly well—it wasn’t exactly what I wanted, but it gave me a basic framework to build upon. This cut down maybe half the work for styling. Another thing I did was feed completed components back into ChatGPT, asking it to apply the same design to another component. Again, this roughly halved the work but still left plenty for me to handle. Naturally, AI isn’t a perfect designer, but as I worked through component by component, things became easier since I could reuse the base elements for new parts.

Let’s take a closer look at some specific component changes:
First, I removed the default side navigation bar and AppBar at the top. Instead, I built a small floating navbar at the bottom, just because I felt like it. I think it looks cool and is easy to use. It’s somewhat inspired by Material Design Components’ bottom navbars, but it ended up being a custom implementation. This was my first step, which allowed me to completely remove the old navigation. Of course, this wasn’t just a redesign—it required building a new service to control when the navbar should be visible, like hiding it during an ongoing game.

Next, I tackled the game list and created the mentioned Game Card, where the game information is compactly displayed with some icons. As you can see, I stuck with Dark Mode. There isn’t a Light Mode yet, so you can’t switch between the two, but I just find Dark Mode much nicer.

When you click on a specific game, you’re taken to the game overview, where you can see more detailed information and a list of players. For each player, you can view basic in-game statistics. Again, I kept the Game Card design and applied it to the player and turn views.

Then, I went further into the in-game screen and redesigned the view you see during a game. Here, you can see who’s up next, how many points players have scored, and how many points are still needed. It also highlights the winner. I kept the Dark Mode here as well and simplified everything. In this component, I ensured the floating navbar disappears to leave more space for the keyboard used to input game data.

The New Game screen also received significant improvements. It’s now much easier to select options. For some reason, I stuck with the green accent color throughout, bringing it here as well. Previously, all options were in dropdowns that needed to be opened, and there were options like Sets and Legs, which I didn’t even support. I removed those, and now the options are laid out side by side, making it much faster to configure a game. What’s still missing is reworking the player selection. Currently, it’s still a dropdown, but you should be able to see favorite friends or at least search for players you want to play with.

A major task was reworking the player statistics. Unfortunately, this is a big job since I want to completely overhaul this stats page. Right now, it works much better on desktop than mobile, mainly due to the charts, and it shows a lot of poorly organized information. I need to change it so that only basic player stats are shown, with everything else moved to a detailed stats page. But at least this section now has Dark Mode, the familiar Card design with green accents, and fits in with the rest of the design. The charts, which I built using ApexCharts, have also been updated so they display well in Dark Mode and don’t clash as they did in Light Mode.

I almost forgot about the login and registration screens! During development, I didn’t come across them often since I didn’t have to log in repeatedly. Here, too, I applied Dark Mode and the green accents, placing everything on a centered card that appears in the middle of the screen on desktop.

So, I’ve talked quite a bit now. Here’s a quick conclusion: Was it absolutely necessary? No. Did it bring me joy? Not always. Moving styles around in the frontend isn’t my favorite task. But it’s really cool that it’s done now. I think it really enhances the app. Every time I used the old design during darts at the office, I was annoyed because it just didn’t look good. Now, I’m quite happy that it has my own look. Is this the final look for the first release? Probably. Is it perfect? Absolutely not. There’s still a lot to improve, but it’s good enough for now, and I won’t be spending more time on the design. I’ll focus on new features instead.

Next up is the big friends feature, which is essential for the app to work for everyone. Right now, any player can see every other player in the app, which isn’t an issue in our small test group. But if I go public, there must be strong restrictions on who can see which games and data. That’s the next big thing on the agenda.

🇩🇪

Update #2 - Zeitinvestitionen in ein großes UI Redesign der Darts Tracking Anwendung

Wenn ich noch mal kurz auf meinen letzten Post zurückblicke, dann sieht man vor allen Dingen, dass ich im letzten “Sprint” von dem ich berichtet hatte, viele kleine Sachen erledigt habe. Wenn ich aber an die letzten Wochen denke, die jetzt hinter mir liegen, stelle ich zwei große Dinge fest. Zum einen ist mir ein bisschen die Entwicklungszeit verloren gegangen, und zum anderen habe ich an vor allem einen deutlich größeren Thema gearbeitet.

Zuerst eine kleine Anekdote zur Entwicklungszeit: Ich habe jetzt ganz frisch zwei kleine Katzen zu Hause. Ja, die kosten irgendwie Zeit und Nerven, sind aber auch wirklich ganz süß. Aber die Zeit, in der man sich mit Katzen beschäftigt, kann man nicht in Softwareentwicklung investieren. Das fördert leider nicht die ständige schnelle weiterentwicklung meines Projektes. So viel zum Katzenthema, ich vermute es erklärt warum einiges aus dem Rythmus gekommen ist.

Jetzt zu dem großen Thema, was ich in der Entwicklung eigentlich in letzter Zeit erreicht habe: Mein großes Ziel für dieses Jahr ist es eigentlich, die Anwendung soweit fertigzustellen, dass ich eine Version 1.0 releasen kann, mit der ich zufrieden bin und die alle notwendigen Funktionalitäten enthält, damit sie auch wirklich nutzbar ist. Was ich jetzt angegangen bin, ist ein großes UI Redesign. Eigentlich muss man sagen, dass das nicht zwingend das Wichtigste ist, um zu releasen. Wie die App aussieht, ist nicht so wichtig, sondern ob sie funktioniert. Gerade als Solo Entwickler sollte man sich mit begrenzter Zeit auf die minimale Variante des Produktes fokussieren. Aber ich habe mich trotzdem entschieden, dieses Thema anzugehen und mich mit dem Redesign zu beschäftigen, weil es irgendwie traurig ist, seit einem Jahr an einer Anwendung zu arbeiten und die ganze Zeit auf ein Standard Material Design zu starren. Es hatte keinerlei eigene Note, und ich glaube, dass das neue Design auch den User Flow deutlich verbessert und die Anwendung einfacher und mit mehr Freude zu benutzen ist.

**Was habe ich also gemacht? ** Grundlegend habe ich mir das Redesign so vorgenommen, dass ich die jeweiligen Seiten die bereits existierten einzeln überarbeiten wollte. Das heißt, ich habe z.B. einen Ingame-View, in dem man während des Spiels sieht, wer werfen muss, wer wie viele Punkte hat, und so weiter. Den habe ich einzeln überarbeitet. Ich habe eine Liste, in der man alle Spiele sehen kann, die habe ich mir vorgenommen und überarbeitet. Ich habe eine Spielerliste, die habe ich mir auch einzeln vorgenommen und überarbeitet. Ich denke, das System ist klar. Natürlich sollte trotzdem alles ungefähr ein einheitliches Design haben. Das heißt, ich habe angefangen, zunächst auf Design Pages wie Dribble usw. ein bisschen zu recherchieren, um Designs zu finden, die mir gefallen. Ich wollte in meinem Projekt nicht zu tief eingreifen und das grundlegende Material Design beibehalten, und bin von dort aus weitergegangen. Ich habe also mit einer Seite angefangen - ich meine, es war die Spielübersicht mit der Liste der Spiele - und habe dort die alte Tabelle, in der vorher die Daten stumpf angezeigt wurden, umgewandelt, sodass jetzt für jedes Spiel eine einzelne Material Card existiert, auf der die Informationen etwas ansprechender dargestellt werden. Ich habe visuelle Verbesserungen durch Icons und zusätzliche Datenanzeige vorgenommen. Dann bin ich Stück für Stück weitergegangen und habe dieses Design als Grundlage genommen, um auch die anderen Seiten zu überarbeiten.

Wie lange hat das gedauert, und was hat mir dabei geholfen?
Insgesamt hat das Redesign ungefähr zweieinhalb Wochen gedauert. Man muss natürlich auch bedenken, dass ich nicht immer 15-20 Stunden die Woche investieren konnte. Also bin ich Stück für Stück vorgegangen und habe, wenn ich mal Zeit hatte, einen einzelnen Screen fertiggestellt. Ich habe auch versucht, mir durch Tools einiges an Zeit zu ersparen. Ich habe teilweise die kostenlose Variante von ChatGPT genutzt, um Bilder von Designs, die mir gefallen haben, hochzuladen und mir CSS styles dazu generieren zu lassen. Das hat einigermaßen gut funktioniert. Es ist zwar nie genau das herausgekommen, was ich wollte, aber zumindest ein Grundgerüst für die Seiten oder bestimmte Elemente, so dass ich damit weiterverarbeiten konnte. Dadurch hat es mir vielleicht die Hälfte der Arbeit für die Styles abgenommen. Ein anderer Punkt war, dass ich fertige Komponenten noch einmal durch ChatGPT laufen ließ und dazu gesagt habe: „Hier ist eine zweite Komponente. Übertrage bitte das gleiche Design auf diese.“ Auch hier hat es grob geschätzt die Hälfte der Arbeit abgenommen, aber es blieb noch genug, das ich selbst machen musste. Natürlich ist eine KI kein perfekter Designer, und es gab noch einiges zu tun, aber ich habe mich von Komponente zu Komponente durchgearbeitet. Je mehr Komponenten man hatte, desto einfacher wurde es, weil man die bereits fertigen Grundelemente auf andere anwenden konnte.

Lass uns mal einen Blick darauf werfen, was ich konkret in einzelnen Komponenten geändert habe:

An erster Stelle habe ich die seitliche Navigationsleiste entfernt, die standardmäßig vorhanden war. Auch die AppBar am oberen Rand habe ich entfernt und stattdessen eine kleine, schwebende Navbar an der Unterkante gebaut, weil ich da einfach Lust drauf hatte. Ich finde, sie sieht cool aus und ist leicht zu bedienen. Sie ist ein bisschen an die Bottom Navbars aus den Material Design Componenten angelehnt, am Ende aber doch eine ganz eigene Implementierung geworden. Das war für mich der erste Schritt, wodurch die alte Navigation komplett entfernt werden konnte. Das war natürlich nicht nur ein Redesign, sondern dafür musste auch ein neuer Service gebaut werden, der steuert, wann die Navbar sichtbar sein soll, zum Beispiel, wenn man sie in einem laufenden Spiel nicht sehen möchte.

Ich habe mir als nächstes die Spieleliste vorgenommen und die besagte Game Card gebaut, auf der die Spielinformationen kompakt mit ein paar Icons schön dargestellt sind. Wie ihr sehen könnt, habe ich das Ganze im Dark Mode gehalten. Einen Light Mode gibt es noch nicht, man kann das also nicht umschalten, aber ich finde den Dark Mode deutlich schöner.

Wenn man dann auf ein bestimmtes Spiel klickt, kommt man zur Spielübersicht, wo man detailliertere Informationen bekommt und auch die Liste der Spieler sehen kann. Für jeden Spieler kann man sich die grundlegenden Statistiken im Spiel anschauen. Auch hier habe ich das Design der Game Card beibehalten und auf die Spieler- und Turn-Ansicht übertragen.

Als nächstes bin ich noch einen Schritt weiter ins Spiel gegangen und habe die Ansicht überarbeitet, die man während des Spiels sieht. Hier kann man sehen, welcher Spieler gerade dran ist, wer wie viele Punkte gemacht hat und wie viele Punkte noch benötigt werden. Am Ende wird auch markiert, wer gewonnen hat. Auch hier habe ich den Dark Mode beibehalten und alles etwas vereinfacht. In dieser Komponente habe ich dafür gesorgt, dass die schwebende Navbar ausgeblendet wird, damit man Platz für die Tastatur hat, die im Spiel verwendet wird, um die Daten einzugeben.

Der New-Game-Screen wurde ebenfalls stark verbessert. Es ist jetzt deutlich einfacher, Optionen auszuwählen. Ich habe mich irgendwie ohne gute Begründung auf diese grüne Akzentfarben eingeschossen und diese durchgezogen und auch hier mit eingebracht. Vorher waren alle Optionen in Dropdowns, die man erst öffnen musste. Außerdem gab es Optionen wie Sets und Legs, die ich gar nicht unterstütze. Diese habe ich entfernt, und jetzt sind die Optionen nebeneinander dargestellt, was es deutlich schneller macht, das Spiel zu konfigurieren. Was jetzt noch fehlt, ist die Überarbeitung der Spieler-Auswahl. Momentan ist das noch ein Dropdown. Da sollte man die favorisierten Freunde oben sehen können oder zumindest nach Spielern suchen können, mit denen man gerade spielen möchte.

Ein großes Thema war die Überarbeitung der Spielerstatistiken. Leider ist das eine große Aufgabe, weil ich diese Statistikseite noch einmal komplett überarbeiten möchte. Sie funktioniert momentan auf dem Desktop deutlich besser als auf Mobile, vor allem wegen der Charts, und zeigt viele noch nicht gut sortierte Informationen. Das muss so geändert werden, dass nur die Grundstatistiken eines Spielers gezeigt werden und alles andere auf eine Seite mit detailierteren Statistiken verschoben wird. Aber zumindest hat auch dieser Bereich jetzt den Dark Mode, das bekannte Card-Design mit grünen Akzenten und passt sich dem restlichen Design an. Auch die Charts, die ich mit ApexCharts gemacht habe, sind jetzt so überarbeitet, dass sie im Dark Mode gut lesbar sind und nicht mehr untergehen, weil sie auf den Light Mode angepasst waren.

Fast hätte ich am Ende vergessen, dass ich auch noch den Registrierungs- und Login-Screen umzugestalten habe. Während der Entwicklung bin ich da nicht oft dran vorbei gekommen, weil ich mich natürlich nicht ständig neu einloggen musste. Auch hier habe ich den Dark Mode und die grünen Akzente eingebaut und das Ganze auf eine zentrierte Karte gesetzt, die auf dem Desktop in der Mitte des Bildschirms angezeigt wird.

So, ich habe jetzt schon eine ganze Menge erzählt. Mein schnelles Fazit:
War es zwingend notwendig? Nein.
Hat es Spaß gemacht? Nicht immer. Hin und Her geschiebe von Styles im Frontend ist nicht meine absolute Lieblingsaufgabe. Aber es ist jetzt richtig cool, dass es fertig ist. Ich finde, es wertet die Anwendung wirklich auf. Während der Entwicklung habe ich mich jedes Mal geärgert, wenn ich im Büro beim Darts spielen noch mit dem alten Design gearbeitet habe, weil es einfach nicht gut aussah. Jetzt bin ich doch ziemlich glücklich, dass es mein eigener Look ist.
Ist es der finale Look für das erste Release? Wahrscheinlich schon.
Ist es perfekt? Absolut nicht. Da könnte ich noch einiges verbessern, aber es reicht erst mal so weit, dass ich mich nicht weiter mit dem Design beschäftigen werde und mich auf neue Features konzentrieren kann.

Als nächstes steht das große Freundschafts-Feature an, das essenziell ist, damit die ganze Anwendung für jeden funktioniert. Momentan kann jeder Spieler in der Anwendung jeden anderen Spieler sehen, was in unserer kleinen Testgruppe kein Problem ist. Aber wenn ich das Ganze öffentlich mache, muss man stark einschränken können, wer welche Spiele und Daten sehen kann. Das ist also das nächste große Thema, das ich angehen werde.