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.
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.
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.
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
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.