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:
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.
Almost everyone agrees the importance of having a consistent and unified experience across platforms, yet many services have terrible cross-platform experience consistency. The effort to create one is not as easy as saying “Let’s create a consistent experience.” Everyone was excited in the beginning, but when it comes to the painful part (defining details like typography, metrics, or colors), then you realize its challenges, and some people find the challenges are troublesome. We tend to be short-sighted in looking at the advantages of doing certain things. Consistent and unified design will not only give a better experience to the users, it will also give a stronger brand perception and a lot of advantages to the internal team. This consistent and unified design usually comes in something called the design language.
An example of the design language benefit, when designing a new screen for your mobile app, you don’t need to recreate Continue reading
Quick survey, which one is more legible, left or right? (click on the image to see it in full size)
Roboto vs Open Sans
I’m working on Viki Design Language, which includes typography. Viki has been using Roboto for years, but I’m not happy with it. I prefer Open Sans. Open Sans is more legible. I think Roboto is too bold, the kerning and tracking don’t seem right, and the characters are not easily recognizable compared to Open Sans. Although Google is pushing Roboto through Material Design, I think we should be designing for what’s best, instead of just following some design guide blindly. We need to challenge the assumption that something is the best, and not just keep using it because it’s been used for long.
Looking at the comparison above, it wouldn’t be a surprise if you chose right for the more legible interface. It would be interesting to have some usability testing to see how fast users can read the video description. In the mean time, I’ll keep experimenting with different font-family and weight.