UX/UI Design & Website Redesign
St.Pauli Turnverein / Nonprofit Sport Club
Project Overview
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.
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 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.
Course Plan
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.
Course Booking
As a trainer, I would like to dispense with the creation, and unlocking of the weekly sign-up lists.
User Persona & User Flow
Inga
- 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
Jeffrey
- 33 years
- Engineer & Kids Soccer Coach
- Married
- 2 Daughters
- Hamburg (Germany)
Goal:
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
Kim
- 25 years
- Student & Kids Soccer Coach
- Single
- 1 Dog
- Hamburg (Germany)
Goal:
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
.png)
- 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
Design
- 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
Hamburger Menu
The lower bar of the hamburger menu is extended to create one which is more recognizable/most used.
Low-fidelity
Mid-fidelity
High-fidelity
Course Plan Filter
Important filter options are added. Drop-Down boxes are resized and rearranged, so course list can be placed higher.
Low-fidelity
Mid-fidelity
High-fidelity
Input Feedback
The user must understand if the entered e-mail/phone number is in a required format and entered correctly, and this before pressing the button “Book”. Entering the e-mail again is a common praxis to verify the correctness of the entered data. The green chops confirm the correctness of the specified format.
Low-fidelity
Mid-fidelity
High-fidelity
Course Creation
- Back Arrow was added
- Input Fields were standardized grouped in a meaningful way
- Trainer profile was added, so the trainer has the possibility to edit own profile in the same step and don't need to change to the profile view first
Low-fidelity
Mid-fidelity
High-fidelity
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.
Before
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".
Before
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.
Before
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