It all starts with a tiny frame. That’s the philosophy of Martin McClellan, senior UX designer at Breaking News.
Breaking News, part of NBC News Digital, has been making industry headlines for the innovative ways it sources and pushes breaking news to users through social channels, push alerts, website and apps. We welcome Martin to the SNDDC lineup to share his experiences in mobile-first design and give us an inside look at his process.
Breaking News is probably best known for its breaking news reporting and social feed, but is becoming more recognized for its innovative mobile apps. Can you share some background on the project and how the work you do as Senior UX designer has evolved over time?
Breaking News started as a twitter account run by Martin van Poppel’s BNO News. MSNBC.com, the then joint-venture between Microsoft and NBC News, bought the rights to the account from van Poppel in 2009 with just shy of 1.5 million followers.
Breakingnews.com was launched soon after, and then the iPhone, Android, and Windows Phone apps. We’ve had continual growth. We’re up to 7.35 million followers on Twitter, just to give one metric.
I’ve been the only designer on the team since I joined in 2011, besides Creative Director Ben Tesch. His primary focus is development, management, and the future, so I have no shortage of projects to work on.
Hard to say how my role has evolved. Our team has certainly grown, so I work more broadly with more people. We work from downtown Seattle now, instead of Redmond. Working on the future of news always has been, and I hope, always will be very exciting to me.
Breaking News is a stand-alone startup within NBC News Digital. How does that unique position impact the work you’re able to do?
It’s really the best of both worlds. We’re fully independent with our own editorial and product staff, but get to rely on the expertise and resources of one of the best news companies in the world. Plus, going to New York and working from 30 Rock on occasion is a real treat.
Your session will focus on the mobile-first production process. As a preview, can you share what your brainstorming and mock-up process looks like?
Well, the first step is to draw a tiny frame. I usually do very rough thumbnail sketches in a notebook to work out the visual logic of what I want to do. It’s amazing how that simple idea in your brain turns out to have no legs as soon as you transfer firing neurons to hard black ink.
After that, roughing in how the concept works in a wireframe, these days in Sketch, although I worked a long time in OmniGraffle, and still love it. We wireframe a lot, to prove out concepts.
Seeing it on a screen is also vital, to make sure your sense of scale between the big monitor and the small screen is what you expect. Using products like Sketch Mirror, or Xscope Mirror help with that. Lately we’ve been testing InVision, and I really like it.
If we proceed on a concept, I’ll produce higher resolution art, either in Sketch or Photoshop. If we’re using OS widgets, it’s often a rough layout just to communicate the idea and the flow to devs. If we’re doing something new, I make it 1:1 with what I imagine I want to see on the screen. Sometimes we nail it right away, sometimes there are dozens of versions by the time we’re satisfied.
Then I start iterating with developers. Final designs are never marching orders, they’re the start of a collaboration on the development. Ideas change when you can touch them, and when developers point out that what you want is impossible given the physics that govern the world.
What do you feel is the most important consideration when approaching mobile UX as compared with other platforms?
One: You have to know the system like a user. Emulation doesn’t count. You need to carry the device to get a feel for its strengths and weaknesses. Sometimes this is impossible, because you’re designing for things that don’t exist yet, or for a platform which is so splintered that knowing every expression is impossible *cough* Android *cough*. Which leads to:
Two: Rely on the platform to establish conventions. We’re trying to be useful over novel, so although visual identity is important in the use of the app, so is respecting the research of the designers and developers who work at the OS level. There are times we break with convention, when the convention doesn’t suit. In that case, we have to be confident the use case we imagine is better for the user than the default widget.
You’ve spent 20 years working on the web. How does that breadth of experience help you in your work with Breaking News?
There is an ease that comes with experience, I think. A confidence in yourself, your limitations, and your strengths. You know your tools well.
Also, you’ve been to the circus before. They may swap out the tigers for acrobats, and elephants for dogs dressed as people, but you pretty much know what to expect when you buy your ticket.
At Breaking News we’re all used to running the marathon and not the sprint. We show up every day and put in the work to make the product better. Some days are more productive than others, but our team is good at keeping the pace up so that harried finish-line dashes are minimal.
Where do you look for inspiration?
Inside of the design world, I’m a sucker for the history of typography. Nothing beats an old specimen, as far as I’m concerned. More modern resources like A List Apart, and The Manual are invaluable for understanding the why of how we do things. I rely on my friends and people I admire online to help surface whatever new thing is on the horizon. I feel like I’m awash in amazing visual stimuli constantly on the internet, and isn’t that a lucky thing, compared to our compatriots of the past?
Outside of the design world. I’m a novelist (I just launched a Kickstarter for my first novel!), so writers like Iris Murdoch and William Gibson have impacted my worldview. I went to a dance performance in New York by The Dance Cartel that rearranged my atoms in a great way.
My wife is an artist whose work makes me see people on the street with new eyes. And, it may be cliched, but having a young kid in our house is constantly challenging in the best sense of the word. They both inspire me daily.
We’re profiling #SNDDC speakers as we lead up to the annual workshop. Martin’s session is slated for 11:30 a.m. on April 11. To register for the workshop, which runs April 9-11 in Washington, D.C., click here.