top of page

Period.

Rectangle 470 (3).png
period._brandmark_black_RGB 1.png
Rectangle 470 (3).png
Rectangle 470 (3).png
Vector.png

00 About the project

Endometriosis. What is that?

Endometriosis is when tissue similar to the lining inside the uterus grows outside the uterus. This causes pain, especially during periods, and can lead to

fertility problems.

 

The tissue thickens, breaks down, and bleeds like normal menstrual tissue but has no way to leave the body, causing inflammation and scar tissue.

10% of women of reproductive age suffer from endometriosis

pexels-polina-zimmerman-3958561 2.png

There is no cure, only treatments are available to manage symptoms

Rectangle 470 (3).png
Rectangle 470 (3).png
Rectangle 470 (3).png
Logo_Charite 1.png

Ok, why are you telling me this?

The app you are going to read about, revolves around this condition. The initiative around this medical condition was taken upon Charité - Europe’s largest university hospital.

 

They have done extensive research on the topic and want to provide help to women suffering from this condition.

Rectangle 471.png
Rectangle 471.png
Rectangle 471.png

What is this app intended to do?

undraw_setup_analytics_re_foim 1.png

Allow women to track their period pain and see long-term trends

undraw_collecting_re_lp6p 1.png

Provide latest information, articles and researchon endometriosis

undraw_personal_data_re_ihde 1.png

Allow researchers from Charité to access users data (with prior consent) to learn deeper about this condition

undraw_pilates_ltw9 1.png

Access self-care exercises created to alleviate pain

Rectangle 470 (3).png
Rectangle 470 (3).png
Rectangle 470 (3).png

Period.

Product name

Charité

Client

UX Designer

My role

7 months

Timeline

Rectangle 471.png
Rectangle 471.png
Rectangle 471.png
Vector.png

01 Design process

Period. required extra attention as it is a medical application for women. Special emphasis had to be put on accessibility and compliance, but also keep user retention high so that they will provide daily data on their period pain - later used by the researchers at Charité.

Group 2651.png

01

Gather

requirements

Healthcare regulations

Target demographic

Data protection & privacy

02

Create

rough draft

Plan features

Map main user flows

Information architecture

03

Iterative

design

Stakeholder management

Technical constraints

Prototypes

04

Final design &

handover

User stories

Beta testing

High fidelity mockups

Development

Vector.png

02 Information architecture

Sort, adjust, improve

As mentioned prior, the application should include a daily questionnaire, self-care activities, insights and an information center. These categories seem straightforward when they are written down like this, however they are very broad with many layers beneath them.

Rectangle 470 (3).png
Rectangle 470 (3).png
Rectangle 470 (3).png
Frame 2805.png
Frame 2803_edited.jpg
Rectangle 471.png
Rectangle 471.png
Rectangle 471.png
Vector.png

03 The design

After many alterations, tweaks, making sure the application is accessible and compliant with medical standards, it finally took hold in its final shape.

Onboarding

Rectangle-2.png
Rectangle.png
Rectangle-1.png
Rectangle-4.png
Rectangle-3.png

Daily questionnaire

Rectangle-4.png
Rectangle-3.png
Rectangle-2.png
Rectangle-1.png
Rectangle.png

Insights

Rectangle-3.png
Rectangle-2.png
Rectangle-1.png
Rectangle.png
Rectangle-4.png
Vector.png

04 Design system

Logo

period._brandmark_black_RGB 1.png
Period..png

Font

SF Pro.png
Group 2656.png
Group 3182.png

Colors

OnBackground/

HighContrast

OnBackground/

LowContrast

Surface

Background

Group 2659_edited.png
Group 2646.png
Rectangle 471.png
Rectangle 471.png
Rectangle 471.png

Thank you for your attention!

Find me at:

  • LinkedIn
  • Behance

© 2025 By Angel Pejkovski

bottom of page