Project Overview

St.Pauli Turnverein is a local sport club, which doesn't have profit as an objective but the neighborly togetherness, best at joint sports activities. People can attend various courses, from the age of 0 told age.

I have recently started using the website myself, because my daughter started to attend the sports classes. The trainers and the courses are great but the handling of the website both for the participants and for the trainers is very complicated. Interviews with participants and trainers revealed the following main pain points.
My Role: UX/UI Designer

Duration: 3 Months

Tools & Skills: User Interviews, Task Analysis, User Personas, User Stories, User Flow, Usability Testing, AdobeXD

What is the Problem?

Latest Updates

As a participant, I would like to find quickly updates regarding my courses. Currently you see a lot of info on the right side as continuous text. The red stripe is supposed to suggest "important updates" but unfortunately everything is mixed up here, you don't know which info belongs to which course.​

As a trainer, I would like to place updates regarding the courses on the main page, so all can't be informed at once. Additionally, automatic e-mail notification of participants, as soon as this update is generated.
Clients Reviews for Florian Schreiter

Course Plan

As a participant, I would like to find all relevant information about courses online. The current course page shows the title and time of the courses with the possibility to connect with the trainer for more information.​

As a trainer, I would like to have my trainer profile and to be able to edit my own courses. In this way I can offer all relevant information about a course online.
Florian Schreiter Webpage

Course Booking

As a participant, I would like to have an easy way to book a course. The peculiarity here is that you can sign up for a list every week. This list exists today as a google doc, which is activated at a certain time. Much too complicated for all parties.​

As a trainer, I would like to dispense with the creation, and unlocking of the weekly sign-up lists.
Clients Reviews for Florian Schreiter

User Persona & User Flow

Task Analysis helps me to get more specific to think through key pathways, the User Flow, of my User Personas as they navigates through the app while trying to reach their goals. In this way I've gained detailed picture about pages to offer and activities to be conducted.
Profile Picture of User Persona


  • 35 years
  • Head of Sales
  • Married
  • 1 Daughter
  • Hamburg (Germany)


I would like to see all courses as a daily/weekly/monthly plan. By clicking on a course, I get to the course page with all necessary information like description, trainer, booking etc.

Entry Point1: Dashboard

Success Criteria1: Booked Kindertanz-Class on 6th of August at 3:30 pm


I would like to get notified once the specific class (e.g., “Kindertanz” on 6th of August at 3:30 pm), I’ve booked for my daughter, is canceled

Entry Point2: “Kindertanz” Course Page

Success Criteria2: My E-mail Address is saved for purpose of notification about of cancelation of booked course “Kindertanz” on 6th of August at 3:30 pm

Task Analysis:

  • Open the web app
  • Select courses from the menu
  • Watching at courses for the current week (but can filter for /switch to Show All Courses as a list or Show all courses this month etc.)
  • Select course “Kindertanz” on 6th of August at 3:30 pm
  • “Kindertanz” course page with all available classes you can register for is opened
  • Enter E-Mail Address in the corresponding field on the course page to get notified in case of cancelation of the course
  • Click on “Book”  next to 6th of August at 3:30 pm
  • Submit on the pop-up window with necessary information like cancelation policy regarding booked class


  • 33 years
  • Engineer & Kids Soccer Coach
  • Married
  • 2 Daughters
  • Hamburg (Germany)
Profile Picture of User Persona


I love teaching kids but I need a way to inform my course participants all in one about short-term course changes, so he didn’t spend too much time for communicating to everyone individually

Entry Point: Dashboard

Success Criteria: Sent/Created message

Task Analysis:

  • Open the web app
  • Login into the own account
  • Select corresponding course
  • Type in information regarding changes in the field provided for this purpose
  • Sent/Created


  • 25 years
  • Student & Kids Soccer Coach
  • Single
  • 1 Dog
  • Hamburg (Germany)
Profile Picture of User Persona


I need the possibility to create and to edit a course page for courses teaching by me

Entry Point: Dashboard

Success Criteria: Published

Task Analysis:

  • Open the web app
  • Login into the own account
  • Add new course
  • Feel out description field of the new course according to the predefined hint question
  • Published course

Mood Board & Style Guide

During creation of the visual concept the following had to be considered:​

  • St. Pauli Turnverein is about having fun together and in a neighborly way, while doing sports, motivating and supporting each other. It's about being with each other and for each other in this community. For all ages
  • The existing logo and the colorful wall graffiti (this one is painted on the head office wall of the St.Pauli-Turnverein) were desired to be used again, so colors, typography and imagery should be consistent with this
  • Pictures should be less posed but from real life
Imagery, Logo & Graffiti
St.Pauli Turnverein graffitiAll Together PictureChildrenFitness for everyoneYoga at Home
  • I use monochromatic color scheme with the primary color #2F656A
  • The other colors are different saturation and brightness levels of the dominant color
  • Since we use the colorful wall graffiti (this one is painted on the head office wall of the St. Pauli-Turnverein) in the header it’s better to keep everything else simple and calm
  • There is an exception for the updates in red, so that you can focus on them on the dashboard
  • All background colors and typography colors were checked regarding accessibility with the color contrast checker
  • When choosing the typeface, I tried to find one that is rounded but clear and without squiggles
  • The other colors are different saturation and brightness levels of the dominant color
  • Simple/familiar but not cheesy
  • So, my choice fell on Filson Pro and Soft. These differ minimally in preloaded offsets and not in the font itself


  • Now I have enough information and ideas to put it into a physical format for the first time. I've started with drawing paper sketches of the functionalities to create low-fidelity wireframes. This allowed me to get a general idea of which information will be presented and how these information is going to be structured
  • Getting more deeper regarding the level of detail I've next created digital mid-fidelity wireframes. This is necessary so that all stakeholders can better visualize the product in terms of basic placement of UI elements
  • Finally I've conducted moderated remote tests with 2 course participants and 1 trainer asking them to accomplish several tasks and to answer a few questions regarding new features and the overall App. Based on this, the hight-fidelity wireframes were created

Responsive Design

After mobile-first design, I designed for tablet and desktop breakpoints.

Solved Problems

Latest Updates

The latest and most important information is placed at the top of the dashboard. These are presented in the form of cards including page references, so that it's immediately clear how many updates are currently available and which one the user currently looking at.


How To Money


Dashboard After

Course Plan & Details

The filter enables the user to search for required courses. Once the desired course is found more details can be viewed by clicking on the course or the user can book/make a reservation of the course by clicking on the button "Book".


Course Plan Before


Course Plan After

Course Booking

No more Google Doc Lists for booking a course. The user now can click on the "Book" button. Additionally, you can sign up to receive updates on this course when you book.


Course Booking Before


Course Booking After

Next Steps

  • Creating Tablet and Desktop Prototypes
  • Usability and Preference testing with participants and also with the trainers with the mobile, tablet and desktop version
Work with me