app icon

Warmie

Period & Ovulation Tracker

holding device

Overview

Warmie lets females understand their body status anytime and enhance efficiency of health management via helping them easily record their Basal body temperature, period, diet and providing personal health information, suitable workout program and merchandise according to their different phases of menstrual cycle.

1. Monitor hormone levels
The balance of hormone would influence the curve of Basal body temperature directly and it could tell us whether the ovary works normally.

2. Track ovulation regularity
The Basal body temperature could be used to diagnose the ovulation regularity and let you know your health status.

3. Enhance efficiency of health management
According to the pattern of your physical data, you could choose the more suitable workout program for yourself, find the physical abnormalities earlier, and prevent gynecological diseases.

• • • • • •

In 2016, there has been an Android version of Warmie, I was responsible for visual design of iOS App and gave suggestions on Android version. Due to the medical laws in Taiwan, the features implied diagnosis of pregnancy and medical advice can not be involved in our App, so some of them were cancelled implementation.

In 2017, the iOS 2.0 version was redesigned for iOS 11 and new features, like livestyle and diet record and in-app shop, recommending merchandise according to different phases of menstrual cycle. Android version was also redesign by me. Navigation drawer was changed to bottom navigation to increase efficiency and glanceability.

According to a medical study, people will lost their wieght if they write down what they eat everyday. We provide discount coupon for our in-app shop if they continue recoding for a month. It will not only encorage our users to keep recording their diet but help us to promote our shop as well.

Time

Version 1.0: Jul 2016
Version 2.0: Jul - Aug 2017

My Role

Interaction Design
Visual Design
Protoyping

Company

Warmie Health Co., Ltd

Credit

Badget illustration
Account: Kuo, Chengzhe
Report: Lin, Chun-Chuan

Warmie logo design
Ivy Ting-Yin Yeh

Version 1.0 Design

01

Icon Sets


Outline icons, which are both modern and friendly, work perfectly with minimal design and are a great way of bringing apps up to date easily.

Tab Bar Icons

Illustration

02

iOS APP UI


Modern and elegant design for iOS 10.

Spash
and Onboarding

iOS screen
iOS screen

Registration
Sign in and
Forget Password

iOS screen
iOS screen
iOS screen

ChatBot

iOS screen
iOS screen

Record

iOS screen
iOS screen
iOS screen

Report List
and Report Details

iOS screen
iOS screen
iOS screen

Report (Alternative)

iOS screen
iOS screen

Account

iOS screen
iOS screen

Version 2.0 Design

01

Icon Sets


The icons are used on both iOS and Android. Icons with 1px border are changed to 2px for iOS 11 and bold lines are also colser to Anderiod Material Design. But we still keep outline icons for unfocus tabs and filled icons for focused one to make status more obvious.

Borken outline indicates the sense of flow, and soft and rounded corners represent the image of female. The icons are modern and lovely.

Tab Bar Icons

Action and List Icons

02

iOS APP UI


Larger rounded corners, soft shadows, and color gradients are used as our design lanuage in the new version of this app.

The style can be found on the bottons, segmented controls and message bubbles.

Splash and
Onboarding

iOS screen
iOS screen

Registration
Sign in and
Forget Password

iOS screen
iOS screen
iOS screen

ChatBot

iOS screen
iOS screen

Record List and
Record details

iOS screen
iOS screen
iOS screen

Report List
and Report Details

iOS screen
iOS screen
iOS screen

Shop

iOS screen
iOS screen

Account
and Settings

iOS screen
iOS screen

Notifications
and Widget

iOS screen
iOS screen
iOS screen

03

App Store


Promotion graphics with brief description of features in the App Store are also designed for increasing app install rates.

04

Android APP UI


Some controls and layouts are modified according to the material design guildelines

Home, Card
and Registration

Android screen
Android screen
Android screen

Onboarding

Android screen
Android screen
Android screen

ChatBot

Android screen
Android screen

Record List
and Calendar

Android screen
Android screen
Android screen

Record Details

Android screen
Android screen

Report List
and Report Details

Android screen
Android screen
Android screen

Shop (Concept)

Android screen
Android screen

Shopping Process
(Concept)

Android screen
Android screen
Android screen

Purchase History

Android screen
Android screen
Android screen

Account and Settings

Android screen
Android screen
Android screen

Notifications
and Widget

Android screen
Android screen
Android screen

05

All Layouts


Over 60 UI layouts are designed for onbording screens, registration and sign in, main categories like Chat, Record, Report and Account and their sub-screens and dialogs.