Redesign Challenge (1/52):
Designer News for iPhone
Introduction
2014 felt unproductive. It wasn’t really, not in any measurable way, but it felt like it because the volume of work I produced was lower than what I’m used to. I could give some excuses as to why, but regardless, I produced less work last year because I had very few side projects. One look at my Dribbble account says it all; five shots in all of 2014, with just three being truly unique, and only one of those was a personal project.
Despite this, I don’t feel as though the quality of my work has stagnated. Quite the contrary, over the past year I feel as though I’ve grown considerably, particularly when it comes to designing for Android. But most of that growth can be attributed to the work I’ve done at Shopify as part of the Android team, and that’s a problem. Not just because working on the same projects can potentially impact creativity and quality of work, but because it can contribute to burnout.
This year, I’m going to address this by posing a challenge to myself. Every week in 2015, I will be redesigning something and posting it here on Medium.
The Challenge
Every week, I will redesign the interface of an existing product, or design a new product for an existing brand. The original branding must stay more or less intact. The result of the exercise will be posted with a rationale to Medium on Sunday night at the latest.
Purpose
The point of this challenge is not to criticize existing designs or focus on aesthetic changes. After all, we can never know what internal factors went into the design decisions of any product. But the beauty of an unsolicited redesign is that internal constraints no longer apply; ideas that would have been impractical to implement for whatever reason are fair game.
By removing implementation constraints, and leveraging the aesthetic of an existing brand, unsolicited redesigns become more about flexing creative and problem-solving muscles. They allow you to think creatively about different types of problems in new ways, without focusing too much on the nitty gritty details. Writing a rationale about the decisions I make during the redesign process will also force me to write more often, something I keep meaning to do, and keep putting off. Lastly, as a general benefit, the routine of designing something new every week should improve my creative workflow and time-management.
Designer News for iPhone
For the first week of this redesign challenge, I decided to imagine what an official app for Designer News might look like. I was limited on time this week, so I chose Designer News because it’s a fairly simple concept and I’ve already taken a stab at designing an app, for Meng To’s Design+Code giveaway contest.
Designer News doesn’t have an official native app, so this isn’t a redesign in the traditional sense, but the goal was to come up with something that held up the branding in a way that would look first-party.
Navigation Structure
Content consumption is the primary purpose of Designer News, particularly when viewed in a mobile format. Most of the decisions around the navigation were centered around bringing the three content sections — Top Stories, Recent Stories, and Discussions — to the forefront of the app, alongside the New Story action. Search, Profile, and Settings are significantly less important on mobile, so they’ve been downplayed in the hierarchy, while still being easily accessible from the top level.
I chose to ignore the Jobs section and Message of the Day for the mobile app because I didn’t feel they added enough value to offset the clutter they would create in the navigation. You could also make the argument that Jobs deserves to be split out into its own product to retain focus, but that’s another topic altogether.
In my previous Designer News iPhone app concept, the navigation bar held all of the primary navigation. This was before Discussions was added, so a segmented control let the user switch between Top and Recent. Settings was on the left, New Story was on the right, and Search lived just below the navigation bar.
In this week’s redesign, I moved the most important top level navigation elements to a slightly unconventional tab bar instead. Search was moved from a search bar into an icon on the right side of the navigation bar to better imply that the search is global, not just within the current context. Settings remains on the left of the navigation bar, but in the form of the user’s profile instead, for better consistency with the web. The room that was freed up in the navigation bar is now occupied by the current section’s title, for better user friendliness.
Apple has long recommended that designers use tab bars as their primary navigation method, and with the iPhone 6 and 6+, it’s more important than ever. I chose to use a tab bar to make it easier to navigate between sections or post content without discomfort. While I would normally include labels on the tab bar so the user doesn’t rely on icons alone, the target audience for Designer News is tech-savvy, so the icons should be pretty obvious, especially when re-enforced by the section title in the navigation bar.
I used an asymmetrical tab bar design to maintain grouping of the three content sections. On larger and smaller screens, the new story button would stay a fixed size, while the other three icons would fill the remaining space. I made this choice to avoid giving too much weight to the New Story button on larger screens, and to avoid awkward sizing issues.
Stories List
Most apps focused on content consumption are lists with titles and metadata, and Designer News is no different. The stories list is optimized for scanning, with each cell being a static height so the starting point of each title is easy to locate while scrolling through the list. The left margin contains Designer News badges that match the style of those used on the web, but adjusted to waste less precious screen real estate on mobile.
I typically use custom fonts in native apps sparingly, reserving them only for navigation bar titles or where absolutely necessary to maintain branding. People get used to their operating system’s default typeface — the legibility, the x-height, the general look and feel — so it can be jarring to read body copy in another font. An exception can be made when the reading experience is a significant part of the branding, however. For example, it would be equally jarring for Medium’s native app to use Helvetica Neue as the body font, rather than keeping the typography consistent between web and mobile. In this case, I felt it was more important to retain the branding and reading experience from the web version of Designer News than it was to use the default system fonts.
User Profiles
The only other screen I had time to design this week was the Profile screen, and I’d be lying if I said I chose it for any other reason than because the content was more interesting than a discussion page, comment thread, or internal browser.
The navigation bar treatment was heavily influenced by Twitter’s iPhone app, because their approach makes profiles seem more personal and gives cover photos (or pixel headers, in this case) more of a purpose. Otherwise, the content and structure are very similar to the web version, giving an overview of the user’s information and statistics, followed by the colours they’ve unlocked, recent posts, and recent comments.
I would have liked to work on the profile screen for longer, to smooth out some spacing and typography that I feel is inconsistent, to make better use of platform features, and to show subsequent screens of how profile editing would work.
Conclusion
It’s only been a week and this exercise is already tough. I chose what I expected to be a simple app due to time constraints, but still overestimated how much I’d be able to complete within the time limit. I had planned on producing a New Story screen, a browser for external links, Search, and a Discussion screen with comments, but didn’t make much progress on them. I also thought the rationale and introduction would be trivial, but underestimated how long those would take as well. I expect that as I get used to the routine of producing a redesign every week, I’ll be able to write my thoughts down quicker, and produce more screens without focusing so much on the details and variants.
That being said, I’m very happy with the result of this week’s redesign. It was a great creative refresher after being in holiday mode, and I’m already planning what I’m going to be tackling next week.
If you’d like to follow along, or if you’re reading this from the future and want to see what I’ve redesigned since the start of the year, I’ll be posting everything to my Weekly Redesign Challenge collection.
