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.
Small details, like consistent copy, are overlooked so many times. If you take your time, put the same screen from different platforms together in front of you, you might find some interesting inconsistencies that you didn’t notice before.
Take the screens below for example. They’re Viki’s iOS app, Android, and Website. We’re using different copies for our TV series: TV Shows, TV, and Global TV. Simple tweak would improve the consistency, and it avoids users confusion when they move from one platform to another.
Identifying inconsistencies is an important step towards a unified experience.
I’ve found quite a lot of inconsistencies, not just copy, and it’s a good sign because identifying inconsistencies is an important step towards a unified experience.
Have you done your inconsistency review?
I’ve never seen a store printed a page of its website on a huge paper, and put it near the entrance. I’m not sure why it is useful to do that, it’s just different.
Check the website here: Modajar’s Men Landing Page
There are times when displaying things that are not available to the users is useful. For example on an online store. Users’s interests in alternative stuffs might increase when they see a lot of stuffs were sold out. The fear of missing out things. But for unavailable feature, especially when the user is frustrated, that would make the experience really really bad, because it disappoints the user’s expectation and confidence.
This is my personal experience. I subscribed to an annual plan for Adobe Photoshop Creative Cloud (Photoshop CC). They started to charge my credit card in June 2013, but until now (Nov 2013), the Photoshop CC is not working on my Mac. It keeps asking for serial number. I had a chat with the Customer Service, he promised to fix this in 2-3 days, but still nothing. Then I called the Customer Service directly, again he promised to fix this in a week. Still nothing. So today I went to my Creative Cloud account, and I found a Help link.
I clicked on the Chat, and it said “We’re sorry, but our records indicate you aren’t eligible for this support option.” I mentioned about confidence earlier. I strongly Continue reading