Untitled Document
 
Vector.png

Shreya Anish  & Anuj 
 

UI/UX project
Self guided

The product

Period Calendar Ovulation Tracker app is a menstrual health app. It helps one track their cycle and provide information on one’s fertile window and potential ovulation date.

In addition to the basic menstrual cycle tracking function, the app can be used to record temperature, intercourse, birth control, weight, cervical mucus, mood, and any other symptoms.

Vector.png
Group 1626.png

A group project with

Skip to final deleverables

Interactive prototype

Feel free to interact with the prototype on the right.


An interactive prototype makes it easier to do primary user testing band gives insights early on in the designing process.

 

Design process

Vector.png
Vector.png

Analysing the problem

Vector.png
Vector.png

User Review Analysis

User Survey

Vector.png

Live interviews

Vector.png
kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Pain points

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
Vector.png

Competitor analysis

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Heuristic Evaluation  

Vector.png

Pain points

Vector.png
kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
Vector.png

Empathy maps

Vector.png
kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
Vector.png

Customer Journey Map

Vector.png

Personas

Cool Girls

Name: Audre mist
Age: 14

Student  Middle School.

The coming of age 

About:  Audre is a teenager who recently started menstruating and is quite foreign to this realm.

Goals: Wants reminders for her cycles.
Want to explore herself and be more aware of her body.

Characteristics: finds it hard to discover pages on local news networks. calendar does not sync with other devices and is hard to access. requires the cloud to sync storage between all devices. Needs to find saved posts quickly to brush up on  important information before meetings

Frustrations: Loses track of time and doesn't remember her cycles, so isn’t prepared.
Doesn't know much about this process and doesn't have many sources to ask for advice.

Current Information architecture

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Card Sorting

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
Vector.png

New Information Architecture

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p
Vector.png
 

Lofi wireframes

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Mockups

iPhone 11 Pro Max Mockup-8.png
iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-7.png
iPhone 11 Pro Max Mockup-6.png
iPhone 11 Pro Max Mockup-1.png
iPhone 11 Pro Max Mockup-4.png
iPhone 11 Pro Max Mockup-10.png
iPhone 11 Pro Max Mockup-5.png
iPhone 11 Pro Max Mockup-3.png
iPhone 11 Pro Max Mockup-11.png

Colour Palette

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Font

kisspng-megaphone-loudspeaker-clip-art-loudspeaker-5ac7891a03d7e3.2315247315230262020158.p

Final

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-9.png

Home page

The homepage is designed to provide maximum information and functionality while not being too confusing.

Search  and profile buttons on top 

The quick info bar on the top gives a daily update, can press the plus icon to get more information

The central information circle shows important information graphically 

Add button allows users to quickly add daily information.

 
Quick access buttons on the bottom

Bottom menu to navigate between the four main pages.

 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-8.png

Questions page

The questions page is a place where users can ask doubts and questions to other members of the community.


The top solution is shown depending on user upvotes

You can view other answers by clicking the more button

Users also have the option to upvote questions and answers that they think is helpfull


 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-5.png

Polls page

The polls page is a place where users can post a question whit multiple options and get community feedback on it.


This acts as a place where people can get an answer from the wider population.


Polls can be commented on and upvoted as well as answered by every community member

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-3.png

Tips page

The tips page is a place where people can share tips and tricks that they have found.



Tips can be upvoted and commented on, 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup.png

Notifications page

The notifications page shows all the notifications that require action by the user.


you can dismiss notifications by swiping right


notficatons that has an actionable element has a next button along with it.

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-4.png

Quick Input

The quick input page is accessed by clicking on the plus icon on the home screen.

It acts as a place where the user can input daily informational readings


It also provides access to other frequently used functions like adding a note reminder or a symptom

 




A short randomized  hint is usually found on the bottom of pages to educate users on any hidden functionalities 


 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-6.png

Calender

The calendar page gives an overview of all the important dates and reminders in a month.


The month can be changed by the top slider 

More information on important dates are shown by clicking on the date



Quick access to other features is also present here




A short randomized  hint is usually found on the bottom of pages to educate users on any hidden functionalities 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-2.png

Settings page

The settings page is accessed from the home page or the profile menu


It provides all the available options and controls in one location


most tabs are dropdown systems


 

iPhone 11 Pro Max Mockup-9.png
iPhone 11 Pro Max Mockup-7.png

Onboarding process

The onboarding process is quick and simple, it shows the finalities of buttons and a short description of them.



A short randomized  hint is usually found on the bottom of pages to educate users on any hidden functionalities 



You can retake the onboarding procedure from the setting


 

iPhone 11 Pro Max Mockup-10.png
scsdcv.png

Graphs page

The grips page gives the user information on multiple different health categories in a visual manner that is easy to understand.


It can show BMI, water weight, and other graphs.


It can be expanded  by clicking the more button


 

Team mates

WhatsApp Image 2021-09-04 at 21.37.02.jpeg
Shreya Anish

UI/UX designer

Meh.....

Check out my portfolio on behance

WhatsApp Image 2021-09-03 at 23.43.55.jpeg
Anuj Gup

UI/UX designer

Meh.....

Check out my portfolio on behance

Thank you for sticking with us

Check out more of our projects  below

Or

Head back to the top

Rectangle 2.png