Week 7 | Wireframe Prototype: Tick-Tock

Tick-Tock is a cross-platform app that helps people manage their time of the day.



Name: Angela Lee | Age: 22 | Occupation: College Student

Background: Angela is a senior majoring in business. She is graduating soon and looking for a full time job. She loves writing and she’s also managing her own blog and writes articles every three days.

Pains: She’s poor at time management and because of that she can’t get enough sleep every day. She feels short of time but doesn’t know how to be more efficient.

Goals: She’s able to plan ahead, track her time easily, and actually meet her plans.


Angela gets up at 7 am. Her class starts at 9:30 am, so after washing up, she sits at her computer and plan her day. She opens Tick-Tock chrome extension, which is a web page allows her to create a to-do list for today. She puts homework that’s due tonight and other things she needs to work on. Before going to class, she decides to read WSJ while having breakfast. She records her time spent on reading and then goes to class.

She gets home at 4:45 pm. Then she lays on the sofa, browsing on Instagram and chatting with her friends. At 5:00 pm, Tick-Tock app on her phone reminds her to do the homework that’s due at 11:59 pm. She opens the app, starts the time recording and does her homework.

Content Inventory

Tick-Tock shall

  • runs on chrome and smart phone & tablet
  • sync automatically across multiple device / platform for the same account when Internet is available
  • allow user to create/delete tasks, track their time, and mark as complete
  • allow user to set estimated time needed and deadline
  • send notification to remind user finish their tasks before deadline
  • allow up to 7 tasks each day
  • support multi-tasking, task number should be limited to two
  • visualize user’s time spent on a day.

Information Architecture


Interactive Wireframe


My peers provided some really great feedback:

  1. The long-tap/click interaction for deleting was easily mixed up with start/pause a task. An edit button was suggested to allow users enter edit mode to delete or make changes to the tasks.
  2. Timer animation was a little distracting, but I think that’s ok because users won’t keep the page open when they work on the task and the animation mainly serves as a display of time spent.
  3. Estimated time was a good idea, but the way of entering time could be simpler. Pre-set times allowing for choice were suggested.
  4. There was no need for deadline for a daily planner because deadline is needed for planning in a period of time.
  5. The cube is well designed and it’s more creative than list format.

These feedback will be considered in next high-fidelity prototype.