I feel like I need to make the wireframe first before going into storyboarding because I’m not yet clear on all the functions that the app can perform. I made a very rough version of the wireframe on sticky notes first so that I can easily move each frame around.

I discovered that to fulfill the function of reminding users to take breaks, I also need to add a page where they can set up a timer of how long they wish to focus during work. So I researched a focusing app named Tide and studied its interface design.

example

This App gave me lots of inspiration. One is that I could add a page where users can track their work and break routine of the day, the week, and the month.

While I’m making the wireframe, I also consulted with my group member who plays games a lot in her spare time. She is the gaming expert! I received many suggestions from her on the key features that a game interface should have. Now the wireframe becomes very clear and well organized. I think I will also add descriptions for each frame so that the readers could have a clear sense of what each page is for.

wireframe