15 10 / 2013
Re-Designing Hundreds of Apps for iOS 7
I remember the exact moment it hit me– we had gathered couches in the office to watch the WWDC Keynote like it was a movie, and as they unveiled the iOS 7 video segment, it became immediately clear: we were going to have to redesign everything.
Like many app designers that day, I was feeling incredibly inspired after that Keynote and immediately got right to work.
We had already been planning on a UI overhaul of the Store section of our apps, and so now I had a really good excuse to do exactly that.
The tricky part was (and always is) that the app I was designing was actually a template for hundreds of apps that use MAZ to publish onto iOS, and so while I wanted to be on the bleeding edge design-wise, it still had to be vanilla enough to look good with all the types of content we help publish.
I’ll give away the ending of the story here, but these are our new iOS 7 designs for iPad and iPhone:
Here is a journey through the process:
Version 2.6 of the MAZ Publishing platform marked the last major update of our apps’ UI, which was back in February of 2012. We launched v2.6 with the premier of Inc. Magazine for iPad. This marked an important transition as we added a web button and a Twitter button in the Store section of our apps, allowing users to visit websites in the Store. Prior to that users could only purchase/download content to view it - this was the first move toward offering free web-based content inside the apps as well.
(look at the RSS and Twitter icons toward the top right)
A year and a half later, we released MAZ Publishing 3.6, which looked like this:
Same general concept but with some tweaks. There had actually been five updates to our apps between v2.6 and v3.6, culminating in this modern and polished UI, but one clearly built for iOS 6.
Concepts for a New Storefront
Soon after v3.0, which was April 2013, well before iOS 7 was announced, I was already working on some concepts for a brand new Store UI.
My basic goals were to:
- give a fresh new look to the apps
- emphasize new content
- give even more access to web content
- not stray too far from our current layout so we wouldn’t need to re-process all the assets on our servers
- make Clippings more prominent (trivia: Clippings was introduced in MAZ Publishing 2.8)
My first design was one which in retrospect is actually pretty iOS 7-y with it’s bright colors and white background, even though I didn’t know about iOS 7 yet!
I took our “full cover view” and made it the default view, instead of “grid view” which had always been our default previously, so that the newest cover would be the main event when a user launched the app, instead of many small thumbnails with none weighted over the others.
I added a Clippings Button to the right of the cover so that a user could very easily create a clipping of the cover.
I also introduced more social buttons so that the user could load any of that web-based content right inside the Store. I borrowed from our iPhone UI which had a sliding drawer and applied it to iPad.
This was the birth of the “hub” idea which is now a cornerstone of MAZ Publishing - basically that a publisher’s app should be much more than the converted print product - it should be a one-stop-shop for all content, including web, social, etc.
I killed content descriptions since the content was big enough to be legible (as opposed to the thumbnails), and most descriptions were redundant with what was already designed into the cover.
Another thing I brought to the new Store was the draggable overlay that we were already using within our content Reader, instead of a full-page web view inside a UITableView as we had previously done for web content accessed through the Store.
Now when a user tapped on one of those buttons along the left, the site would open in a draggable overlay like this:
Initial Concepts for iOS 7
The very day of the WWDC Keynote, after catching a glimpse of iOS 7, I got to work on updating my designs. Ironically, I didn’t really think I had that much to do.
First, I changed the fonts and toned down the gradients of the buttons. Then I changed the drawer background color to light grey to make the whole thing feel airier.
I thought I was done!
Of course, a lot of my initial impressions of iOS 7 were incorrect - my buttons were wrong, there should be no separation between nav bar and status bar, and as it turned out, going lighter was the wrong move…
Seeing is Believing
Even though I was still tweaking buttons, colors, and fonts, the new Store UI was actually already well underway with our dev team at the time of the WWDC announcements.
Soon enough, I had a live build to run on my iPad. I thought it was going to blow me away (after all, it was my own design come to life, how could I not love it?), but the truth is, I didn’t really like it as much as I thought I would.
It didn’t really make sense– I had really seen it a million times as I worked on it, had previewed it on the actual devices (Skala Preview is the greatest invention in the world) and simulated interaction (I use Keynote for all my prototypes and even most of my final design work - builds/transitions = fast prototyping), but using the actual real app is just different. And it wasn’t good enough.
Not to mention, my initial attempts at updating to match iOS 7 weren’t actually right. Once I had time to read through the new iOS Human Interface Guidelines and actually use iOS 7 firsthand, I realized that there was a lot more work to be done.
Buttons Without Buttons
For the purchase/preview/download buttons, I toyed with various arrangements, but came to find that the new iOS 7 button-less button (i.e. only text) would work well. I made the colors of the text to match the colors our users were accustomed to. Green to buy, blue to read, and so on.
I also used the fact that we were dealing with pure text to add some more descriptive language to the buttons.
I couldn’t really do all the buttons as text-only because they would all be competing for attention. So for the subscription buttons, I added a simple thin border, and slightly emphasized free trials with a lighter blue.
Back to Black
Okay, well not black, but dark blue. One problem when I was using the live build of the new Store was that the covers were being drowned out by the pure whiteness of the background. Sort of like in the new Photos app for iOS 7, your eyes don’t know where to focus when the pics are against the white, and really pop against the black (especially when using a black device where the black screen/black hardware border is ambiguous).
Here is a version of the UI that is very close to the final version, in light grey and in dark blue.
See how much more the cover pops out on to the dark background? Our v3.6 design for iOS 6 had a subtle dark blue gradient, and so I decided to backtrack to that palette, but without a gradient.
I removed all the drop shadows, even on iPhone behind the drawer. We also added some gesture based navigation, like swiping back to the Store from the Reader instead of needing to tap the back button.
For the navigation bar icons, I made some modifications to our buttons to make them a bit larger, more geometric - I made them solid white with no drop shadows, and generally made them look cleaner.
Similarly, for the interactive buttons inside the content, we flattened all of them and made them feel lighter.
Here are a bunch of other side-by-side comparisons between our iOS 6 iPhone design and iOS 7 (two different apps but you get the idea).
So that’s the story! It was a long process, but I believe we landed on the right final product. Submitting those hundreds of app updates was no fun, but that is a story for another post another time…
To send you off, here is a classy animated GIF of the various iterations of our iOS 7 design. I recommend listening to a Justin Bieber song while you watch.
Permalink 2 notes