- Context: Collaboration with a web developer who creates and operates the web app Sportsdate.app.
- My role: Redesign of the UX and UI concept and interface, potentially of the entire app.
- My tools: Miro, Figma
- UI component framework: Ionic
- Time: Ongoing, Started in Feb 2024
- Kontext: Zusammenarbeit mit einem Indie-Webentwickler, der die Web-App Sportsdate.app erstellt und betreibt.
- Meine Rolle: Redesign des UX-Konzepts und User-Interface der potentiell gesamten App.
- Meine Werkzeuge: Miro, Figma
- UI-Komponenten-Framework: Ionic
- Zeit: Noch andauernd, Gestartet im Februar 2024
Content / Inhalt
- 1. Understand the subject
What is the status quo of the app? What can we learn from competitors? - 2. Anticipating the scope Define differnt kinds of edge-use-cases and sketch out first Ideas in Wireframes and Task-Flows
- 3. Between abstract and detailed Iterations of App-Architecture, Wireframes and User-Interactions
- Work in progress:
Visual/Corporate Design, Higher-Fidelity, Tests/Feedbacks and Iterations, Step-by-Step Implementation
1. Understand the matter
1.1 Current state of the app
Sportsdate is a web app and PWA, organically growing in Berlin with a dedicated, albeit small, user community. Designed to better organize sports activities beyond social media limitations, it initially caters to beach volleyball fans but is intended for a diverse range of sports without boundaries.
Sportsdate ist eine Web-App und PWA, die in Berlin organisch mit einer engagierten, wenn auch kleinen Nutzergemeinschaft wächst. Die App wurde entwickelt, um sportliche Aktivitäten jenseits der Grenzen sozialer Medien besser zu organisieren. Sie richtet sich zunächst an Beachvolleyball-Fans, ist aber für eine Vielzahl von Sportarten gedacht.
Typical requests in related social media groups.
1.2 App audit
Based on an initial question-and-answer session about the founder’s motivations, pain points and visions, I created a comprehensive review of the app. The findings can be divided into two areas. 1. UX and UI basics and 2. more specific conceptual issues.
Auf der Grundlage einer anfänglichen Frage-und-Antwort-Runde über die Motivationen, Problempunkte und Visionen des Gründers erstellte ich einen umfassenden Bericht über die App. Die Ergebnisse lassen sich in zwei Bereiche unterteilen. 1. UX- und UI-Grundlagen und 2. spezifischere konzeptionelle Fragen.
1.3 Learning from other apps
There are already apps that help people to organize themselves into groups for sport. Comprehensive research helps us to understand why we still need Sportsdate, what positive approaches we can learn from and where we can set ourselves apart.
Es gibt bereits Apps, die dabei helfen, sich in Gruppen für den Sport zu organisieren. Eine umfassende Recherche hilft uns zu verstehen, warum wir Sportsdate noch brauchen, von welchen positiven Ansätzen wir lernen können und wo wir uns abheben können.
1.4 Findings and concept
The research outlines a rough vision of the app. Critical questions help to reflect in order to refine the concept of the app. The assumed most important use cases of the app are brought to life through hypothetical proto-personas.
Die Recherche skizziert eine grobe Vision der App. Kritische Fragen helfen bei der Reflexion, um das Konzept der App zu verfeinern. Die angenommenen wichtigsten Anwendungsfälle der App werden durch hypothetische Proto-Personas zum Leben erweckt.
2. Anticipate the scope
2.1 Clear your head
The first hypothetical solutions and detailed questions arising from the research to date were dealt with in quick sketches and comparison lists.
Die ersten hypothetischen Lösungen und Detailfragen, die sich aus der bisherigen Recherche ergeben haben, wurden in schnellen Skizzen und Vergleichslisten behandelt.
2.2 Complexity of a user flow
An initial hypothetical user flow diagram that describes the entire process of creating an activity in the app. In this step, I was more interested in understanding the possible complexity in order to shorten it later if necessary or to break it down into different flows.
Ein erstes hypothetisches User-Flow-Diagramm, das den gesamten Prozess der Erstellung einer Aktivität in der App beschreibt. In diesem Schritt war ich mehr daran interessiert, die mögliche Komplexität zu verstehen, um sie später bei Bedarf zu verkürzen oder in verschiedene Flows zu unterteilen.
2.3 Edge cases of use
In the discussion so far, various use cases of the app have become visible, but these have not yet been described in detail, which should now be made up for. In addition, a schematic sketch of which UI components could represent the individual cases has been drawn up.
In der bisherigen Auseinandersetzung sind verschiedene Anwendungsfälle der App sichtbar geworden, die aber noch nicht im Detail beschrieben wurden, was jetzt nachgeholt werden sollte. Darüber hinaus wurde eine schematische Skizze erstellt, welche UI-Komponenten die einzelnen Fälle darstellen könnten.
3. Between abstract and detailed
It is important to mention again at this point that a potential restructuring of the entire app, including the underlying information architecture and sitemap, is potentially desired. In order to be able to make further design decisions, it was therefore important to think through the app holistically from a bird’s eye view and in detail.
Wichtig ist an dieser Stelle noch einmal zu erwähnen, dass eine mögliche Umstrukturierung der gesamten App, einschließlich der zugrundeliegenden Informationsarchitektur und der Sitemap, möglicherweise gewünscht ist. Um weitere Designentscheidungen treffen zu können, war es daher wichtig, die App ganzheitlich aus der Vogelperspektive und im Detail zu durchdenken.
3.1 Helicopter view
Once the range of functions has been outlined with the help of the edge cases, different variants of the info architecture can be compared with each other by sorting of named and color coded cards.
Nachdem der Funktionsumfang mit Hilfe der Edge Cases skizziert wurde, können verschiedene Varianten der Infoarchitektur durch Sortierung von benannten und farblich gekennzeichneten Karten miteinander verglichen werden.
3.2 Understanding the small to question the large
The certainty provided by the card sorting made sketching the first screens straight forward. The further you delved, aspects became visible, which in turn were reflected in the big picture.
Die Gewissheit, die das Card-Sorting verschaffte, machte das Skizzieren erster Bildschirme wie von selbst. Je weiter man eintauchte, wurden Aspekte sichtbar, die sich wiederum auf das Große und Ganze wiederspiegeln.
3.3 Big decisions not made easy
“Focusing the app on one sport would probably strengthen it, ...”
The sports categories currently offered in the app do not follow a specific scheme and have grown organically over the course of around five years. On the one hand, these are “merely” reflected in the filter options for activities and venues in the app – on the other hand, the user group, brand and identity of the app are based on the type of sport. Focusing the app on one sport would probably strengthen it, but this is not the developer’s current intention.
Die derzeit in der App angebotenen Sportkategorien folgen keinem bestimmten Schema und sind im Laufe von rund fünf Jahren organisch gewachsen. Einerseits spiegeln sich diese „nur“ in den Filtermöglichkeiten für Aktivitäten und Orte in der App wider – andererseits orientieren sich Nutzergruppe, Marke und Identität der App an der Sportart. Eine Fokussierung auf eine Sportart würde die App wahrscheinlich stärken, ist aber derzeit nicht die Absicht des Entwicklers.
3.4 Mobile first
The current web app has some minor weaknesses in terms of display on different screen sizes, which can be seen in the menu (top/bottom) and the clarity of the page layouts. In order to solve this better in the redesign, an orientation should be created for this at an early stage.
Die derzeitige Web-App hat einige kleinere Schwächen in Bezug auf die Darstellung auf verschiedenen Bildschirmgrößen, die sich im Menü (oben/unten) und in der Übersichtlichkeit der Seitenlayouts zeigen. Um dies bei der Neugestaltung besser lösen zu können, sollte hier frühzeitig eine Orientierung geschaffen werden.
3.5 Visitor to user
“How visitors can see and use the web app compared to registered users...”
The concept of how visitors can see and use the web app compared to registered users is not clearly resolved in its current form, so that, for example, the entire first landing page disappears after registration. This, as well as the login process per se, needs to be revised.
Das Konzept, wie Besucher die Web-App im Vergleich zu registrierten Nutzern sehen und nutzen können, ist in der jetzigen Form nicht klar gelöst, so dass z.B. die gesamte erste Landing Page nach der Registrierung verschwindet. Dies, wie auch der Anmeldeprozess an sich, muss überarbeitet werden.
3.6 How to read the map
The app has a map whose locations users can discover, suggest or use to plan activities. The flag markers of the locations are intended to provide further information beyond the name at first glance, for example if a public event is planned there, or whether activities generally take place at the location more often.
Die App verfügt über eine Karte, deren Orte die Nutzer entdecken, vorschlagen oder zur Planung von Aktivitäten nutzen können. Die Flaggenmarkierungen der Orte sollen über den Namen hinaus auf den ersten Blick weitere Informationen liefern, zum Beispiel ob dort eine öffentliche Aktivität geplant ist, oder ob an dem Ort generell häufiger welche stattfinden.
“Again: Almost everything is connected - examine individual areas of the app down to the details, to understand the big picture.”
3.7 The core - the activities
The heart of the app is how events can be planned. The creation and participation management should offer users different options – the process should be as comprehensive as needed while remaining as simple as possible – depending on the individual use case and context. This topic will continue to require a great deal of attention during the further course.
Das Herzstück der App ist die Planung von Veranstaltungen. Das Erstellungs- und Teilnahmemanagement soll den Nutzern je nach Anwendungsfall und Kontext verschiedene Möglichkeiten bieten – der Prozess soll so umfassend wie nötig und dennoch so einfach wie möglich sein. Diesem Thema wird im weiteren Verlauf noch viel Aufmerksamkeit gewidmet werden müssen.
To be continued.