Countdown App

Disclosure: Some of the links below are affiliate links. This means, at no additional cost to you, I will earn a commission if you click through and make a purchase.

The Challenge

June is a travel addict and she can't wait to go to Hawaii this year. She wants to create a countdown to her vacation in 100 days to keep her motivated. June believes her vacation reminder will inspire her throughout her workday.

Create a mobile app that is simple, meaningful, and compelling for June while keeping in mind June's experience and story.

First Steps

I created some sketches of the mobile countdown app and then uploaded them to Marvel Pop. Thinking about what information is necessary to show on the screen, I decided on:

• the countdown

• the event info including the date, name, and location

• a background photo - so the experience feels more customized

I wanted the countdown displayed vertically to maximize the use of screen real estate and for the countdown to take front and center as the most important aspect of information on the screen.

Creating the Prototype

I found uploading the screens into Marvel to be fairly straightforward and similar to Invision. Hotspots are created on one screen that links to another screen with different screen transitions and triggers available such as click/tap, swipe, and hover.

One problem I did have was getting a longer screen to load with the bottom of the screen aligned with the bottom of the phone.

The keep scroll position function works when navigating from one long screen to another long screen but not from a short screen to a long screen.

When tapping on Event Name, the keyboard should pop up at the bottom and the rest of the content gets bumped up above the keyboard, so the text field will be just above the keyboard. This way the user does not have to scroll up or down to see what they're typing.

Ideally, when the user presses Enter to complete one text field, the cursor automatically moves to the next text field which is repositioned into place just above the keyboard.

As a workaround, I tried creating the keyboard and text field as a fixed footer, but this resulted in the countdown being cut off and partially displayed below the footer. I also tried a smaller screen with the top cut off to fit the phone size, but this obviously gets rid of the scrolling ability from the longer screen. 

Anyone have a good solution to this problem? If you do, please let me know! Leave a comment below.

Watch the video or