Case study-Designing an Age Calculator

SLIVA DAS
7 min readMar 3, 2022

In this case study, I shall explain how I designed a mobile application from the scratch. I will share my process and my approach to the problem statement.

Challenge

To design an Age calculator that helps users to calculate age and find out age differences.

In a brief context, I tried incorporating profitable plans to generate revenue with the App and to build a good mobile application.

My Goal

  • To provide an effortless user journey and an appealing visual experience following the basic UX laws to have a better user experience

As the user will spend his or her time on it for completing the work, so did the owner have invested to make it use worthy by

  • To make a product that will not only be beneficial for the user but also for the owner of the product owing to it.

My Business Goal

To increase the revenue and the market selling promotions of the application

The way I incorporated:-

  • Referrals on sharing the app-used sharing offers to make it an advantage when possible(will explain it further)further helping in marketing of the product.

🗒️Process

Researched the product

  • I read a few blogs and articles regarding age calculators.
  • Interviewed a few of my friends to understand the target users.
  • Spoke to a few users who have used the age calculator to understand the issues they faced and what would they want in general.
  • Explored a few similar competitive products and read a few reviews to understand the pain points.

Reference Inferred -

Target audience

  • Workplace(any job sectors)- Age calculation is a must work at a workplace. Using google sheet and Excel is a bit delaying and tricky, hence an online application saves time and does the work easily.
  • Elderly users(considering it to be above 40yrs)-Elder people prefer an online application rather than the traditional method of counting since it takes a lot of time and memory to calculate it from the DOB.
  • Young users(below 40yrs)-Mostly include young generation to calculate the age check their upcoming birthdays.

User Expectation from the product

To identify the User's point of view I tested the usability of other applications by my

  • My Friend Srija(who belongs to the workplace also below 25yrs of age), who happens to be an Hr and needed the age calculator for work purposes.
  • My father(above 40yrs of age)wanted to check the age difference between him and his son.

After all usability testing found the issues and the expectation from 2 types of target audiences

They are:-

  • A decent way of calculating the age and checking the age difference rather than a complicated way.
  • Users don't want to spend too much time on the work
  • Users expect to have details about the age and save it
  • Users want a very simple clean UI.

Problem with other similar competitive products

  • Inconsistency in the UI screen complicated the way of entering the Date of birth details.
  • The UI is exaggerating and does not share the same format.
  • Unclear information hierarchy in form of buttons and information segregation.
  • Not well-structured User flow hence gets confusing and makes the user frustrated
  • Sudden Advertisement mid-way breaks the consistency of the content and does disrupt the action.
  • Keeping the business module in mind, too much advertising highlights the profit of the application only ignoring the priority of the users.

Why did I choose Referrals?

  • It helps to identify consistent customers.
  • Increases brand awareness.
  • In a study it showed up, it increases sales revenue at a low cost.

After all these references, I jotted down my main points that helped me structure my product user flow and improve the mistakes incorporating UX laws to better the user experience.

📜Implementation

Getting started with the Information Architecture-

I made out the User flow to bridge the gap between the user expectations and the user action.

The User flow.

It's clear from the flow there are 2 major functions and one minor function involved-

  1. To calculate the age- for the user who just wants to calculate the age and check the age details and know about their upcoming birthday and also save it.
  2. To calculate age difference- users who want to know the age difference and save it.
  3. Saved dates-for user who wants to check the saved dates.

Colour scheme

After going through different gradients, solid colours I selected these colour checking their contrast with each other such that

  1. it does not cause pain to the eyes. As the target audience is from all age group
  2. Also different from other similar competitive products.
The colour Palette.

Typeface

I tried with many fonts like Reem Kufi, Poppins, Roboto etc. they did suit well but again the elderly people are suited to mostly old straight technologies hence, for a clear simple one I choose Roboto.

Roboto typeface.

Now with this information let’s get into the screen designs.

📱Screen Designs

Logo Design

As this is a project from scratch had to design the logo also.

Exploring other products logo i understood that it should directly convey the message through it.Mostly it was text logo,did make sense very well.

Hence designed the logo made a text logo.

Splash Screens

Splash screens disappear within seconds.

But also it is the first visual appearance to your product which decides the correct feel and look of the product, hence did a few ‘trial and error’ before finalising the one.

Splash screen preview

Home Screen

Organized and presented the actions in a way it is easier for the user to choose and make a decision based on their goals and needs.

  • There are 3 primary, secondary and tertiary actions categorized co-ordinating with the goal. As I said I studied other app and their UX to understand the structure. I concluded options are made depending on the different user goals.
  • Included the Affordance using the share option and the referral feature.
  • Made it Clean and simple.

Final Design

Referrals are a good way to attract users and get them engaged in the product, which also increases the revenue in turn.

Referral page.

Category 1 -Age Calculator

It's a simple process of entering your date of birth and calculating your age.

Date entry fields are culture-dependent, at some places, it is D/M/Y in other places it is M/D/Y.Hence it is a very short yet important decision to make which calendar picker one should choose.

Date inputs.step-1

The calendar picker for data inputs should be unambiguous. It has to make the tasks of entering data or choosing the data as smooth and simple it can be.

Tried a no. of options and iterations as follows:

The final design for the calendar picker.

Displaying results-

According to the features, and keeping an aim of making it clean, simple yet visually pleasing for the eyes I designed the result page

Result page-screen preview.

Allowing the user to edit the birth date if again necessary.

edit birth date-screen preview.

Card Design-

Listed the results of age together in form of a card. Aim was to summarize the birth date details and other features in a clean simple way .

Listed some visual iterations for the card.

Final card Design.

Save Option-

Designed the save option so that they can save their birth date details and have a look again when they visit the product.

Saving screen preview.

Category 2- Check the Age Difference

Users can compare the Age difference between two-person by entering their birth details and getting the results as who is elder/younger by how many days or months.

Calculate age difference screen preview.

Category 3-Saved Dates

If someone wants to again check their age details then instead of calculating it again, they can check it from the saved dates feature.

Saved date feature screen preview.

All these design decisions have been made keeping in mind the target audience of 3 different group ages.

And.. That's it!

Thank you for reading. I hope it was worth your time and energy to get through my case study! Any feedback is welcomed happily :) Do reach me out at slivadas099@gmail.com or on Linkedin.

Also if you appreciate my effort and knowledge,do give me a clap, if not reach it will upgrade my motivation :D.

--

--

SLIVA DAS

UX designer out here to solve problems with my logical ability and designing skills.Learning and experiancing the better.