The problem

The idea for this project emerged from personal frustrations over the status quo of other period tracking apps.

Analyzing the visual appearance of such apps a clear trend towards clichéd elements for »female-topics« – like flowers, feathers, or the color pink – are predominant. Our observations further left the impression that some of these apps are constructed in an impractical way, where main functions are hidden behind navigation elements. An overflow of functions – in one example a chat forum – often distracts from the main function of the period tracker. And certainly data privacy is getting more and more important, while it is often barely traceable for the users how and where their data is stored.

Un-biased, positive & realistic design

With Periodeux we focused on finding a visual language that moves away from stereotypical »female« elements, with orange as an unbiased main color. To us, it was important to give the app an appearance that takes the topic seriously with a realistic and overall positive tone. We designed icons that portrait a diverse and inclusive user group to make Periodeux a comfortable place for all menstruating people. With a representation of symptoms that is close to reality.

For the app icon, we used elements that refer to the actual interface or hint at the topic. It is a combination of one of the mood icons, the calendar highlights, and a cycle icon. The mood icon we used for the app icon is the »playful« icon, which carries an overall positive vibe to pass onto the users.

Simple to use & user-centered functions

Periodeux is concentrated around functions that are user-centered and suitable for their purpose. When opening the app the user lands on the overview tab where the most central information is portrait through a counter: when will the period start and how long will it last respectively. The calendar that is placed underneath the counter contextualizes the information by showing the current date, the estimated ovulation date as well as upcoming and previous cycles.

Within the calendar, users can document moods, symptoms, and bleeding through tapping on a date and choosing from a sheet view that opens up when editing the entries underneath.

Next to the main functions, users can find useful insights that are generated from using the app. The app shows the average cycle and period length, frequent symptoms, and moods.

pw: periozwei

Data privacy

All the data that will be generated while using the app is stored locally on the user's device. We avoided using cloud solutions to provide high data safety in order to let the users be comfortable with documenting detailed personal information inside our app.

Current state

We started working on Periodeux during our first course with Martin and implemented some new features during the advanced course this semester. 

You can see the old doku and design for Periodeux here

We thought about the logic for a required database and then built it in. Entered moods and symptoms are now stored for the respective day and can be retrieved again. If you have already entered data for a day, these entries are displayed as miniature previews. The data entered during the onboarding process is now also stored directly in the redesigned settings. 

One of the most important functions of a period app now works in Periodeux: The period for the coming months is predicted based on a start date as well as the period and cycle length. This information is displayed in the calendar. When any of the data is changed, the prognosis recalculates itself.

 The counter that shows the days remaining until the period is now dynamic and shows the actual number remaining. We fundamentally redesigned the Insights. The data displayed there is now also dynamic, and the most common symptoms/moods reflect those actually entered. We have optimized the entire app for dark mode and also redesigned all icons accordingly.

At the moment we are still working on the app and have now localized it into German. We plan to publish the app in the AppStore, but for this we are still lacking the ability to edit the periods within the calendar, i.e. to be able to adjust the length as well as the date if necessary. As soon as this feature is implemented, we would test a first version and then hopefully release it in the AppStore.

Other features that would be useful later: additional localizations, a dynamic widget as well as predicting the period from an automatically calculated average.

SwiftUI for designers

The first course gave us a good insight into code-based design and offered a direct comparison to the workflow with prototyping tools. The advantage of Xcode is that many of the standard iOS elements can be incorporated very quickly. Even though we still relied on Figma for the initial designs, as the project progressed we realized how quickly you can test different elements in Xcode. The code was also comparatively easy to understand and use at the beginning. 

However, the initially steep learning curve then stagnated significantly at the beginning of the second semester. The specific knowledge we needed was hard to find, which was mainly due to our lack of technical terminology. We often didn't know what to Google for. Again, it was noticeable here that SwiftUI is simply still relatively new and, as a result, there is little for beginners to find. Martin Lexow's sample projects in the course were a great help, as you could apply several things from each project to your own. We would like to give a strong recommendation for SwiftUI and Xcode for designers, as it definitely helped us in many different ways to take a new and broader look at interface design.