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