We started doing UI Design Challenges every Friday here at Tradecraft. Basically, we pull a topic out of a jar and then we have one (1) hour to quickly create some user interface screens!
The main goal for this exercise to not only to practice thinking on our feet and coming up with quick interaction ideas, but we also get to flex our visual design muscle!
Today, my challenge was to design a freelance time tracking app. So I started with some quick ideation sketches just to get the creative juices flowing!
I was inspired by iOS stopwatch UI where the action buttons are incredibly simple–just 2 buttons, one to start and one to stop the stopwatch. I believe that a freelance time tracker should be equally simple! While the inspiration mainly came from iOS interface, we are learning mobile UI pattern this week and I thought it would be fun to try creating something with Material Design!
Listed below is the imagined interaction of this app:
1 – Client page that displays all the tracked completed task with the completed time listed
(I found the awesome yeti logo from google search and was created by
2 – Time tracking dialog shows up when the (+) FAB button is tapped
3 – This display the user interaction when a task is being tracked. At the header portion, a user is able to record the name of the task, then they can tap on ‘start’ to start the timer and ‘stop’ when a task is completed. The app will then add the specific task onto the Client home page.
Retrospective
This one hour design sprint was incredibly fun! Because we don’t have a lot of time to dwell over our design decision, we just had to make a decision and figure out the next step along the way. Sometimes designers aim for perfection and then we end up not producing anything. By putting ourself on a time constraints, we can focus on just creating MVPs!
Stay tuned for next Friday’s UI Design Challenge!