Redesigning 60Hz for iOS7

60Hz is a fun little utility app that allows people to keep track of their TV shows. With the introduction of iOS7, we felt that it was time for an UI upgrade. Here’s a little bit of behind the scenes look at the thinking that’s gone into this iteration of the app...


A good app design is one that understand its context well. It has to blend in well with its surroundings as well as understand the frame of mind of its user is in while being used. This is what makes a useful, relevant app that forms a lasting relationship with the user.

We started by trying to understand the new environment. iOS7 is very different. It is more than Jony’s attempt at flattening out its predecessor. At the core of it, it has some interesting concepts:

  • iOS7 has a fresh perspective on its users: users now understand the digital canvas. There’s no longer a need to pretend behind leather covers or oversimplified gestures and UI. It’s maturing with its user base.

  • iOS7 is moving away from the traditional page to page navigation and embracing a more fluid approach. It tries to use a number of interesting animations, transitions and effects to enhance the users’ sense of place.

We got our hands dirty and came up with number of mockups and concepts for the app.


Working with Layers

As I mentioned earlier, layers are a great way to orient the user in the app. So we looked into a few concepts to work with. The most obvious one we wanted go for was a map-esque design where a user funnels from shows to his library to more streamlined views of his library:

1-u4UB6haJY52bMgUdJiXKgg.png

Great idea in theory; bad in practice. Most of our users spend extremely short periods of time with the app each session. This is just the nature of its utility and we’ve always designed 60Hz to work that way. Quick glance of the app tells you what to watch next and another quick session lets you mark it off!

So we ended up opting for a simpler layer structure, one which allowed our users to work with a very simple set of functionality, and dig deeper if they wanted to spend more time exploring.

 While this isn’t like the native Calendar application, the design fit the usage a lot better.

While this isn’t like the native Calendar application, the design fit the usage a lot better.

We used effects and transitions to effectively tell the story of these layers.

AnimationLibrary.gif
AnimationSearch.gif



Trust in Our Users’ Ability

60Hz previously used a large number of dialogs to pick and confirm actions, especially when an episode is marked off. It’s all changed now: we use gestures throughout the app to let users perform advance functionality. We’re trusting in our users’ ability to work with the basics like swiping on views etc.

SwipesYellow.gif
SwipesBlue.gif

In some places, we’ve opted to hide shortcuts users can discover for themselves as they become more familiar with the app.

Most importantly, we’ve kept things very consistent so that experience acquired can be reapplied over and over to do similar things.

 

Basics Hang Around

No matter how much the UI get revised, basics have to remain.

For the iPad, we introduced both portrait and landscape views. However, all our interactions can be reached with your thumbs while you hold your device. Microsoft has a great heat map of comfortable thumb reach for tablet users in their Windows 8 blog:

Transient

You will find that most things in our iPad app leans to either side so you don’t have to keep shifting weight of your iPad to do something.

IMG_0018.png

Likewise, with the iPhone app, we’ve hidden away little easy shortcuts that allow you to navigate the app with just your thumb! We left them as little easter eggs for our users to discover…

 

Concluding Thoughts

There’s a lot of work that goes into building an app. We spent a lot of time designing and building 60Hz 3.0 for iOS7. This is all our passion in a little app for you to enjoy. We hope you love it!

Read more about 60Hz for iOS7

@dineth
Co-founder & Designer @M2D2Apps

 

60Hz turns 2.3

We have been working very hard for the last few weeks designing and building the next iteration of 60Hz. Here’s a quick overview of the highlights of this release...

DOWNLOAD: 60Hz for iPhone // 60Hz for iPad

We have a Wishlist

(aka watchlist for trakt folks)

Wishlist is something you can use alongside your 60Hz TV and Movie libraries. Next time you get a recommendation from a friend or read a review and want to check out a movie or a TV show, simply search and add it to your wishlist!

When we designed the wishlist, we wanted it to be a unique user experience.

On the iPhone, you get beautiful fanart for each show and movie. As you scroll, the posters exert gravity to give the feeling of each item on your list "competing for your attention" as they go in and out of view.

Please excuse my lousy emulator screen capture with jerky animations. Your experience will be buttery smooth ;)

On the iPad, we have a completely different experience. Your wishlist is transformed to a beautiful magazine layout for you to browse!

iOS Simulator Screen shot 22.08.2013 9.16.00 PM.png

60Hz is a little more social

For trakt users, you always could check-in to trakt, which in turn checked-in on Twitter and Facebook. However, real social interaction happens when your friends hear your opinion on what you just saw. Did you love the movie? Why you were outraged at that Game of Thrones episode? -- these are the things that gets the conversations going. When you mark an item, now you can choose to start a conversation on Facebook or Twitter. We will even attach a beautiful show summary link from trakt.tv to give your thoughts some context. We only ask that you keep our #60HzApp on to give us a little exposure ;).

iOS Simulator Screen shot 23.08.2013 7.08.49 AM.png
iOS Simulator Screen shot 23.08.2013 7.08.53 AM.png
iOS Simulator Screen shot 23.08.2013 7.09.30 AM.png
Screen Shot 2013-08-23 at 7.17.58 AM.png

Faster than ever!

We ripped out our image caching system to substituted a new one. In fact, it is the same caching system used on your Facebook app. You will notice a huge performance boost in the app while scrolling graphics heavy pages like the library and faster load times on the images. As an added bonus, the new system keeps storage use to a minimum, while will allow you to squeeze in a few more apps on your phone!

New toolbar for the iPhone

Yep, we ran out of space for more icons! We tried many different things and finally settled on a design where you can swipe down on the toolbar to reveal more features. In the settings menu, you can change the order of these icons so you can keep your favourite features on top.


Designing #60Hz toolbar for the new version out on Friday! #60HzApp by @darkvaderdin

No longer vanilla Big Bang

We added a whole lot of fanart to take over our regular Big Bang Theory poster. Why have one when you can have… more! Now the big poster on the mainlist automatically rotates between shows in your library. Makes things more fun!

Re-check-in watched episodes

Because a second, third, fourth viewing of Community is… normal. Trakt only.


Hold down on posters in the library view for show settings

There’s a cool slide to delete feature too!!

 

iOS7 support

Mostly fixing things Apple broke… Note how 60Hz fit right in with the new iOS7 designs :).

 

Lots of little big fixes and improvements all around. So enjoy and we hope you are totally getting your money’s worth!! We hope to be the best TV companion app on the store. So join our community pages on Facebook / Google+ or follow us on Twitter to stay up to date and influence future directions. Go to UserVoice to voice out opinions and tell us about what you enjoy and hate. Finally, leave us an updated review on the App Store. More people buying the app will allow us to spend more time improving it!

#60HzApp

iOS Simulator Screen shot 22.08.2013 9.13.08 PM.png

Enjoy ;)

DOWNLOAD: 60Hz for iPhone // 60Hz for iPad

 

Sneak Peeks of Version 2.3

Hi All, we've been posting a series of Instagram videos to showcase some of the upcoming features. We'll write about some of these in more length over time. Here are the clips posted so far:  


Designing #60Hz toolbar for the new version out on Friday! #60HzApp by @darkvaderdin

Wishlists come to #60HzApp by @darkvaderdin

#60HzApp for #iPad gets a big update on Friday! You might even get it a little cheaper just for the weekend... by @darkvaderdin

Designing 60Hz 2.0

I love watching TV shows. I spend about an hour a day on it at least. It’s not just TV, I love movies too. I love the stories in them. It is another world of imagination where there are no limits. I gravitate towards shows which have a long running story, like Game of Thrones. I appreciate the sense of continuity they have. These shows offer a way for me to escape my busy work day when I get home.

In the December break of 2011, Suneth and I were geeking it out trying to solve a very small problem we had with TV: I find it hard to keep up with the story. Often, the episodes aren’t in order. Even if they are, you tend to forget it a little here and there. Busy life gets in the way of tracking these things. So we decided to make a little iPhone app, called tvQ, to keep track of where you’ve watched something to.

So tvQ 1.0 came out. We drew inspiration from apps like Series Guide for Android, which I had been using on my Nexus One. We got some traction after Justin from Trakt.TV approached us for an integration. 50% of our users are from trakt, the last time we estimated the numbers, which is a huge deal.

tvQ v1 is slow. It suffers from slowness brought on by Core Data Framework. We probably didn’t know the right way to go about it, to be honest. It is designed with stock standard iOS controls, which look dated now. We wanted to give it some love and write it in the architecture some of the bigger enterprise grade apps are written in. We wanted it to be fast and focus on the user experience a lot more this time. Other apps for trakt were copying our front page so we thought... let’s make something better! (Haha)

Coming from Momento Jar app, we had sharpened our iOS + Design skills. We started sketching out some of the early designs as you can see here (and some early photoshop mocks):

These screens represent some of the thinking gone behind the new design. Initially we wanted to take the 1.0 experience across where we focused heavily on just a single list of shows with their next episode. A lot of the times, this design didn’t always perform well. We realised the main page was more about episodes and less about each series. So we spent time crafting the front page to be episode centric.

Now, episodes from each show are put into 3 buckets.

  • We always show you what’s on today. They don’t have to be next in line. It is to say... hey these shows are on today, which might spark your interest to catch up or just see where it’s at now.

  • Next is upcoming, which is what I look forward to in the coming week. I get some of these stuff online so I keep an eye on these. Sometimes I like to read in advance and see what’s in store for the following week (I skip ads on TV so I don’t see the previews). I can limit this section by saying don’t show me if the next episode is 6 weeks away or more. When Suits is returning in a few weeks time, it will start appearing on the list again... which is exciting!

  • Same goes to past episodes. The thresholds you set for yourself allows shows you neglect to fall off the ledge and stay out of your way. Make sure to set these up in your settings when you get the app.

We added a proper library for you to collect shows. Made it so that you can ignore missed episodes for shows like CSI where you don’t care about watching every single episode. We made comments part of the synopsis page to see immediate reactions from other community users (trakt only).

One big change this time around is artwork. We put fanart and posters in the center of everything. This doesn’t mean we compromised on design at all. They elegantly fit in and add color to our app. You will realise the app is white for most part, with neon styled icons. The rest of the colors are really added in by the great artwork, giving color to every page. Our experience with Momento Jar really helped out here. There’s a bit more technical knowledge involved in caching, cropping and animating images to get the most out of them. If you get the iPad version, you will see that the obsession with great artwork continues. We hope you love it!

We did a lot of work in the backend too. It is a brand new codebase. We threw out everything we had before and made everything super fast. We used the Command & Engines architecture (future blogpost...?) to organize everything properly.

In the end, we’re very pleased with the result. I think this is a world class app, for both iPhone and iPad. It is made with love by Suneth and I, who uses the app on a daily basis. We hope our effort will convert to a large number of downloads. Tell everyone about it! It’s available 10th of May. Our app experience puts us firmly in front of the TV tracking apps out there. We intend to be creative with our features in the future releases. If you have awesome ideas of your own, head on down to our 60Hz page and start a discussion about it. We love hearing everyone's take on the app and the community support.

Thank you for reading. Here’s the end result (we felt serious about the app that we made a video about it!!!). Tell your friends... iPhone app is FREE on the 10th!!! :)

Coming up with a fresh icon for 60Hz app

We've been working hard to get tvQ 2.0 out on the App Store (currently doing some beta testing). We really needed a new icon that captured the essence of our new UI and still kept a somewhat familiar vibe. Needed it to be cleaner, more modern and still very much recognisable on the iPhone dashboard.

Here's the old design and icon:

So we began by looking some existing icons that reflected somewhat of the vibe that we needed our icon to give out to the users. Here are some icon designs that really inspired us...

Of course, there was some dribbble.com surfing as usual and Suneth found this fantastic pinterest collection: http://pinterest.com/johnsonyung/app-icon/.

I think it is important to look at what else is out there. Creativity is really a fusion of a collection of ideas put together in a very personal way. And all these ideas don't have to be original. As a part time designer, it isn't so easy to come up with a completely original design either.

So here's the look and feel of our rewritten tvQ app:

And here's the new icon... I think we've managed to do an icon that reflected the new design but kept a little bit of the old feel. Love it!