Details Matter It’s Worth Waiting to Get It Right

I’m working on the improved viki.com experience across devices. It’s not only about the visual design, but also about the flow, interaction, and layout. “Details matter, it’s worth waiting to get it right, ” says Steve Jobs.

The thumbnail is the most used component on the website and app, but I think we haven’t done it well, with details that make the overall interface looks great. Inspired by Google Material Design, I’m using 8dp square baseline grid, and 4dp when it’s needed (e.g the space between ‘new ep’ badge and the left edge). The blue square is the target area for the overflow icon (40dp x 40dp).

Another challenge is to make the Top Volunteers more engaging, one variation:

I’m unifying and simplifying the flow across devices, focusing on the users key goals: discover shows and watch show. See one solution below:

See above design on Dribbble:

• In Search of The Perfect Show Thumbnail
• Contributors Card on Homepage
• Simpler Navigation Bar for Viki App

I still have a lot of things to be done, but everything looks great so far, and using 4dp/8dp baseline grid helps to lay things out perfectly on the screen.

Learn more about Google Material Design’s Metrics and Keylines.