Daily UI Design #25: TV App

Challenge #25 is a TV app. View source files as well as my other work for Daily UI Design on Github.

Final look:

Imagine: Dan is a busy young professional. He spends 12 hours working outside home every weekday. He has been wanting to have a regular work out schedule. The nearest gym is about 7 miles away, and he doesn’t want to drive far to a gym after he gets back home. He started looking for ways he could exercise at home, and eventually decided to purchase a dancing game disk for his Xbox. He’s not an avid dancer, but he would love to try it out. After all, this will make him move around and sweat.

Dan turns on the game console, and selects the dance game. After a few introduction screens, he landed on mode selection. Via Kinetic, his outline is captured and displayed on the screen. He lifts his hand and that gets captured as well. It automatically lands on the Easy mode. “Let’s take it slow for this first time.” He holds the hand still for 3 seconds, and the Easy mode is activated. He’s going to have his first dance.

100 days of UI 025: A TV App


I thought about some common app types that would work for TV apps, and what info they might need. Eventually, I went with a dance game on the mode selection page. I played with a Zumba game before, and really loved it. That might be one reason why I went with this topic – a bit biased :P


brainstorm - 1


I explored layouts for selecting modes. I quickly laid out some common patterns. A carousel works well for a limited number of modes, but not for song selection (as I explored below). When there are a good number of songs, it’s exhausting to scan through them all. It would be easier if I adopt a pattern that allows users to glance at many of them. That means I would need to go with a list or grid layout, or something similar. I think it will be less interesting than a carousel, so after this exploration, I went with mode selection on difficult levels — easy, medium, difficult — that should give me some good leverage on carousels.

daliy ui design 025 brainstorm 2


Tried some different styles on the visual:

daily ui design 25 visual 1

I used some free dance images from Pixels to create silhouettes. This was done in Adobe Illustrator — so much easier to use than Sketch, by the way:

daily ui design 025 visual 2

daily ui design 025 visual 3

End result:

100 days of UI 025: A TV App

Leave a Reply

Your email address will not be published. Required fields are marked *