pelvina

Provide women with knowledge about their pelvic floor: How is it structured and which exercises help perceiving and strengthening it to prevent related diseases. Through a smartphone app, pelvina delivers the first certified digital prevention course for the pelvic floor in germany.

Client Temedica GmbH

Team size 3-10

Time on project 3 Years

App store rating 4.6

Downloads 30.000+

A screenshot from the pelvina app displayed in an iPhone. It shows the list of course modules which at the moment presents the first module. Overlaying the smartphone there is the app icon of plevina which shows an exercising female figure, Paulina.

My Roles

I worked on pelvina for about 3 years. As usual in a startup setting I took on several roles. In a product team consisting of product manager, product owner, marketing manager, data scientist as well as fullstack and frontend developers, my main focus was on design and its implementation.

UX/UI Designer
Initially, I supported the creation of the course concept in close cooperation with a product developer. My initial focus was on the information architecture for the course content, the development of user flows, a first style guide and interface design for the app.

Design Lead
I took over the project lead of the redesign and design development, the coordination with the product manager and coordination of a visual designer by means of briefings and continuous feedback. Finally, I led a team of two in the design of completely new features and interface improvements.

UI Developer
To be able to implement the design efficiently I developed a CSS architecture based on modular components and utility classes. This way I was able to implement the design quickly and consistently in a living style guide and later transfer it directly into the live product.

Information Architecture & User Flows

A diagram that shows pelvina's content model and the relations within.

Combined Site and Content Map

This document was used to document the content structure of the app and to communicate with involved actors.

The challenge was to transfer the contents and methods of a common prevention course with personal participation into a digital form. The course structure and required interaction possibilities in the course are regulated by legal provisions.

A hand sketched flow diagram that shows how users should advance through the course.

Process Flow Diagram & Wireframe Screen Flow

Process of how users access the module content. Based on this a first screen flow for a prototype to test the inner logic.

The core of the course are the modules. Their implementation must be simple, straightforward and comprehensible. To be reimbursed, users must have consumed all content. The app supports them in doing so.

Wireframes and Prototype

Once the core functions, course structure and initial content were defined, this prototype was used to further test the concept. All essential parts of the future product are included.

A screenshot that shows a lot of grouped artboards in Sketch.

Low-fidelity wireframes for an interactive prototype

In Sketch I created wireframe screen mockups for each step in the user journey. Using InVision, I merged all of them into a simple prototype. It formed the basis for communication with product management and software developers and created a common understanding of the product vision.

Visual & Interface Design 1.0

Introduction and addressing the users

I created a restrained and functional design language that worked well within the medical context and with the heterogeneous target group. The ideacalm and clear did justice to the medical context and quality requirements as well as the sensitivity of the topic (pelvic floor and bladder weakness).

Three device mockups that present some of the first screens users saw in version 1 when starting pelvina for the first time.

Actual Screenshots from the live-app as we launched it, introducing the core benefits and the instructor of the app.

Course modules and their structure

Each module and the assigned content was marked with its own color. The consistently clear design of the navigation elements should make it easier to access the various content levels.

Three device mockups that present some of the screen flow users go through when they dive into pelvina's content.

Drill-down into the course structure. Each course module consists module units which include the actual blocks of content.

Exercises, knowledge and quizzes

The course consists of three main parts. Knowledge content and exercises instructions are conveyed through video, mandatory quizzes at the end of each course unit help evaluating learning success.

Three device mockups that present how pelvina's course content is displayed.

Consumable content is displayed as a stack of cards. Once the content is completed on a card, the card disappears. The further the progress, the fewer cards – in addition to a classic progress bar, information about the current position in the content is thus constantly provided.

Styleguide & Pattern Library

Interface design directly implemented as living style guide

After first design explorations in Sketch, I documented the interface design directly in the app code and developed it further using “Design in the Browser”. This procedure enabled us to quickly develop the actual product - without investing too much time in static design documents.

A collage of browser screenshots that show a collection of elements and patterns in a living styleguide.

Screenshots from the style guide. It contained examples for the use of the pelvina logo and its variations, the available colors and type options as well as a variety of interface elements like cards, alerts, buttons, progress bars etc.

Redesign — Visual & Interface Design 2.0

Brighter, warmer, friendlier

After the course proved its marketability, we have further developed the design language of pelvina.

My original, functional design should evolve along with the brand to better align with pelvina’s target audiences. The pelvina brand was to have a friendlier appearance, appeal personally and emotionally to the mainly female target group.

Three device mockups that present how we changed the look and feel of pelvina during the redesign.

We introduced friendly hand drawn illustrations to create emotional connection and support the textual message on the screens.

New interface, same interaction design

While retaining the functional structures and elements, we have defined a large part of the look and feel that still essentially defines the visual brand identity of pelvina today: a friendly and warm color palette, coupled with soft gradients and organic shapes. Enriched with beautiful illustrations that appeal to the target group emotionally.

Three device mockups that present how the redesigned course looked like.

For the course modules we have introduced various illustrations that represent the respective topic.

Design Lead

I took over the project management and coordination with the product manager. Julia Körner, visual designer and illustrator, supported us in this project. I was her primary contact person and supported her as a with briefings, direction and continuous feedback.

Three device mockups that present how the redesigned course looked like.

The incredibly talented Julia “Dyru” Körner has created a character called Paulina who accompanies pelvina’s users as a good friend through course and everyday life.

Redesign of the course's discussion board

The starting point

The course forum for pelvina users came back into focus after user tests and looking at analytics. It turned out that the forums were used more frequently than anticipated but on the other hand they were not inviting to explore. The appearance was too homogeneous and a bit dull compared to other parts of the app. The connection to the course content was not always obvious.

After the redesign

I removed the often repeated buttons for opening the forum pages, as the cards themselves were perceived as the interactive element to engage with content — the actual buttons were rarely tapped during user tests.

I also applied the updated app’s colour palette (which we evolved a bit further to become a bit warmer once again) and gray backgrounds have been replaced by tints of our pelvina rose.

The reused illustrations from the course modules act as a visual reference to the associated content areas. They also catered for a more varied overall picture that users rated as more interesting and inviting.

A comparison of the before and after states where the updated forum design is more vibrant and friendly compared to the old version.

Before the redesign, grey was a dominant color which made for a rather dull appearance. With the module illustrations in place and updated colors the forums became a again a place where users like to read and share again.

pelvina's Presence on the Web

Every digital product needs a marketing website that enables users and business partners to find out about the product.

In cooperation with product management and marketing I developed a responsive, mobile-first website that fulfils this purpose. Based on the design language of the app, I created layouts and typography appropriate to the medium. The interactive reimbursement calculator allows interested parties to find out how much their health insurance company reimburses the course fees.

Two screenshots of the pelvina website. One in an iPhone shows the hero section of the home page. The other one shows the reimbursement calculator

These screenshots show the third major version of the website where I used the design language that I developed together with Julia Körner.

Promotion of user feedback and App Store ratings

Getting regular user feedback and good ratings

The aim was to obtain user feedback in a discreet way with reference to important KPIs. Furthermore, users should be encouraged to give ratings in the App Stores.

The concept combines both goals. Various questions about the user experience are asked at key points in the User Journey e.g after completing the first course module. If users signal dissatisfaction, they are asked for feedback. If they are satisfied, they are asked for a rating in the respective App Store.

This gives users the opportunity to express their frustration as feedback directly to us — before they do this in the form of a negative rating or review in the App Store.

On the other hand, users with a positive attitude towards the app are more inclined to leave a positive rating. So we offer them a concrete hint and direct link to the App Store to encourages this behavior.

After the feature was implemented, the number of reviews in the App Store increased by about 30% within a couple of weeks.

The image shows high-fidelity mockups of screens where users get a prompt to answer a question related to their experince.

Depending on the user’s answer they’re led to different screens which either promote a rating in the appstore or leave some feedback directly in the app. Undecided users aren’t bothered anymore but are informed about the in-app chat where they can always leave feedback.

Alternative answer options

We explored a few variations for the answer options. Initially each question had it’s own set of answers and scales ranging from “yes, no, don’t know” over 4-point Likert scale to a typical NPS-like 11-point scale.

At the time being it wasn’t feasible to build all variations. So, for the sake of simplicity and ease of implementation, we decided to go with the first option “yes, no, don’t know”. This was the best fit for all of our questions that we could actually implement at the time.

The image shows high-fidelity mockups of the several answer options we explored. From left to right:

Initially I explored a more varied range of interface elements to provide answer options for each question. Deciding for the most pragmatic approach allowed us to get this feature into development quicker and get clearer responses from our users.

Two products in one

First concept for course & subscription

In addition to the core product “Digital Prevention Course”, we wanted to create an offering that attracts new audiences and increases retention for existing users beyond the original course.

I conducted a competitor anaylsis and market research of similar products to find how they approach subscriptions. I put my insights into the context of pelvina and shaped an early concept that shows how a user flow could look like when pelvina would offer a subscription alongside its course content. I point out possible challenges and potentials regarding to user experience. The concept served as a basis for discussion and further decisions.

A large flow chart diagram that shows how users would be guided through pelvina if it had the course and a subscription.

In contrast to the pre-structured course model, freely consumbale content (similar to a typical fitness app) is offered through a subscription. Both products can be used parallel in one and the same app.

On the content screen users can switch a toggle to explore the different offerings. The course as well as the subscriptions offers some free content to enable users to try out pelvina. At a certain point either subscribing or purchasing the course is mandatory to unlock further content.

What they are saying

A product team that has Matti on board can consider itself lucky! We have worked together for three years and I have always experienced Matti as a totally committed and excellent team player - in good times and bad. I know few people who do their job with such impressive curiosity and dedication as Matti. As the go-to person for design, he has always seen our product ideas from the user’s perspective and offered constructive solutions. Whenever possible, Matti has brought insights from his experience and applied newly acquired knowledge directly in the product context. Matti is a real dream colleague and thanks to his tech knowledge, a huge asset for all product teams that reach for the stars.

A portrait of Kathrin Boll Kathrin Boll Product Manager, Temedica

I had the pleasure of working with Matti at Temedica. I was impressed by his ability to deal with even the toughest UX/UI challenges – effortlessly. It seemed to come perfectly naturally to him. He consistently demonstrated a good methodological knowledge and out-of-the-box thinking to find new solutions. Matti is dedicated, self-motivated and methodical. He can deal with stressful situations and tough deadlines. Furthermore, he was able to familiarize himself quickly and independently with new challenges. It was a pleasure to work with him. Matti would be an asset to any company.

A portrait of Michael Karlsburger Michael Karlsburger Product Owner, Temedica