hero image for prompt timer

Prompt Timer

Prompt Timer is a web app that facilitates practicing creative writing by giving users a short challenge to complete. The timer can be set for any desired length, and when initiated will randomly select a writing prompt. The user can complete their work until the timer runs out.

Context & Challenges

Prompt Timer was my final project for a course I took on Interactive App Design. The goal was to develop an iOS-based web-app that needed a meaningful user input, incorporates cache manifest and local storage functionality, and overall be a polished final product. I had about eleven weeks from start to finish.

Process & Insights

I needed to learn how to set up a simple web app using HTML metatags and CSS media queries. I started by building a responsive web app that would change the content based on the phone’s orientation.

a landscape screenshot of an app displaying a drawing of a cat.

I added in a custom app title and a set of app icons so that it would display properly on the iOS home screen.

a share menu in safari showing the app icon

I designed a low-fidelity version of my app using Figma. Originally, I wanted users to have a lot more control over the app – namely the ability to specify the minutes and seconds they wanted to spend, and a menu for filtering the prompt.

a set of low fidelity wireframes for a timer app

Once I had an idea of the app’s core functionality, I built a prototype of a simple 30-second countdown clock that would start with a button press.

a simple webpage with a countdown timer

I added in the rest of the timer functionalities – user inputs for timer length, pausing, and cancelling.

an updated version of the timer webpage with pause and stop controls

I added in a function that chooses a random prompt and displays it.

a screen showing what the prompt pop-up looks like

I tested a version of this with a few users who gave me feedback on the overall experience. I simplified the process by removing the input for seconds since it was too specific for users, and streamlined the process by cutting out uneccessary screens.

Solution

Finally, I polished up the UI. Inspired by various printed mediums, I decided to go with a flatter visual appearance but added in a paper texture overlay and various serif fonts to stick with the analog brand identity. I felt that doing this was a good compromise between a strong visual theme and a modern-looking interface.

a high-fidelity version of the timer app