Mobile First Design

If you are designing for many screen sizes, where should you begin?

Traditionally, most designers will start the design process at desktop size. This is where most content is going to fit in well. Then you figure out how to squeeze it down to a tablet, then a phone.

I believe this is the wrong path to take, when designing a mobile responsive page (or any website for that matter). Just because a desktop page can flow responsively on a small-width screen, it doesn’t make it suitable for mobile.

The best thing you can do is to start with a mobile design. Straight away, you are met with a conundrum: how do I fit all this content into the tiny screen? You can no longer just drop a matrix or a data table on to the screen — there really isn’t enough space.

You are forced to think about questions like:

  • what you are trying to do?
  • what are the most important elements a user needs to interact with?
  • what is the most important action that needs to be taken after viewing the content?
  • can the content/data be summarised and simplified?
  • can you offer a better way to drill down to your content?
  • can my data fit into an existing metaphor (like a map or a calendar)?

Once you are done with the design process, you might have a crazy realisation: all the questions you asked yourself, and the resulting design decisions you made — they apply on desktop too.

That’s right. A good design is already responsive.

Now, desktop design becomes more about enhancement over a lazy content dump. You’ve already made the decision up front on what is important and what is not. You no longer feel dirty, having to add ‘small-hidden’ css classes everywhere.

Start with a mobile design on your next project. Your design will be better for it. When you pick tools like the responsive grid, pick one that starts with mobile too. Bootstrap 3, for example, switched gears to do exactly this.

Responsive is hard. Mobile is hard. But the thoughtfulness and effort we put into what we build will delight our customers. And our customers are the reason we exist.

Apps that grow with you

It's difficult to make a good app. But it's even more difficult to make an app that grows and matures with the user: something that starts off basic and overtime, as more knowledge is shared between you and the app, more in-depth features are revealed to appeal to a more mature, advanced version of you.

Thought I had while discovering something completely new after a week of using the Jawbone UP fitness band.

Transient

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).

iOS Simulator Screen shot 22.04.2013 8.06.47 PM.png
iOS Simulator Screen shot 22.04.2013 8.08.02 PM.png

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!

iOS Simulator Screen shot 22.04.2013 8.50.57 PM.png
iOS Simulator Screen shot 22.04.2013 8.29.36 PM.png
iOS Simulator Screen shot 22.04.2013 9.00.26 PM.png

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!!! :)

Why Design is Important

A lot of the time, design is a step that is left up to the developer working on a feature. He/she is given full liberty to make a decision on the user interface. Often, there is not enough to make an informed decision on the UI, even though he may be capable of coming up with something aesthetically pleasing. Spending time on design can feel like a waste of time, effort and ultimately, money. This is, of course, not true.

Design is where marketing, sales and brand meet the product and its platform. It is the round table where all departments can sit down to have an equal say on how a product’s development effort can be be part of the bigger story.

A designer can interpret some of the abstract thinking behind features to produce a consistent design, which in turn can be interpreted by the technical team. A designer’s job is a lot more complex the just coming up with a fancy UI. He has to worry about the narrative, and ensure that the UI reflects on the spirit of the product.

Event a tiny feature like a word count in your word processor product can be a complex decision. You could

  • Have a count in the status bar of the app
  • Hide the operation in the tools menu
  • Toolbar item
  • Context menu when text is selected

The right decision can depend on a number of factors like user stories, target audience, client requests, estimated frequency of usage, new target markets etc. If you look closely, Google Docs chooses to hide it in a menu while Word has it in the status. Reflects well on what each product tries to achieve.

At the end of the day, UI is how your user forms a long term relationship with your product. The message you carry is important for this relationship to grow. A solid design process can go a long way.

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:

IMG_0761.png
IMG_0768.png
Icon@2x.png

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...

Transient
Transient

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:

iPhone IMG_0012_2.jpg
iPhone IMG_0003_2.jpg

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!

Icon-72@2x.png