The design process gets an upgrade

My part of a talk on Cultivating UX with Will Hortman and Amy Henty from ACBJ. Here's the rest of the talk: https://dl.dropboxusercontent.com/u/62652476/UXMeetupWide2015.pdf

Notes:

This year, we also got to rethink how we approach projects. Since we needed to serve other parts of the company that weren’t part of Bizjournals, we had to think up new ways of working with them and refining our current processes.

We had been pushing to get out of a waterfall process and into something that let us design for today’s internet. We’d been making strides there, but a new way of working provided us the perfect opportunity to apply that thinking to more projects

We had several goals to achieve:
One was stop all this living in PSDs nonsense. PSDs, Sketch, Fireworks (RIP) files aren’t bad in and of themselves, but they can distract you from the ultimate goal of making a working product. We ultimately want to show the thing we’re designing, not a picture of the thing. I’m hoping this idea is becoming more commonplace in your company—it allows great conversations with people who don’t speak design and code like we do. Interactive can mean HTML, Interface Builder comps, or clickable prototypes. Don’t feel like you’re locked into designing in the browser. I say this because a static file can be limiting, even if you have a desktop, mobile, and tablet version up side by side. Static designs leave too many questions unanswered: animation, for example.

Getting to where we’re banging ideas around in a prototype stage also helps us think deeper about all the devices that access our site.

Part of being flexible is answering the right questions at the right time. That means we’re not trying to show the house off before we’ve laid the foundation. Reason being: if you don’t have a foundation in place, everything is subject to change.

What this house metaphor means on a practical level: Understand both the BUSINESS and USER goals before you get going. This usually happens through user research and what your stakeholder will tell you. Prototypes and style tiles are part of our foundation, too. We’ll talk about those in a moment.

Mobile first was an interesting proposition, I’ve come to love it.
Some nuances became apparent for us: mobile first makes sense for code because of the hundred billionty performance benefits.

It also helps with content strategy. Example: a stakeholder gives you a wall of text. You show it to them on a phone and ask them would you want to read all this text on a mobile phone? Nope.
Surprise, you have less text to deal with!

Design wise, we gravitated toward something like “mobile also.” This helps us break free from a templated, scaled-up look which can feel stale. This way, we get a more dynamic experience that takes advantage of the canvas. Let’s talk about how we applied this approach.

Case study: NASCAR Illustrated
We had 6 weeks to rebuild a site from (mostly) scratch. We couldn’t alter the editorial workflow, so we needed to understand how to make something they could maintain within their existing CMS. Thankfully we knew their goal: GET MONEY.

We moved quickly and provided clickable prototypes within a couple of days. We used Bootstrap and made sure that it worked before we were able to apply much in the way of styling. Once we saw we were succeeding, we iterated and also began to work on style tiles to explore typography, color, and how we’d treat image assets. These helped them paint a picture of what they’ll see without us having to design everything. The end result was a mobile-first design that processed several times more transactions than the year before.
It was the first responsive project we launched.

Case study: Hemmings

They’re an institution when it comes to classic cars. They have a great community and product built around this idea. They make their money through advertising and listings.

The first project was their app, which we used to set the tone for the brand update and eventual new site

We gathered requirements and goals and began to think about how we could solve them. Once we hashed that out, we moved quickly and had clickable prototypes within a couple of days. We used Sketch and Flinto to help make our design go quickly.

About Flinto: they provide the ability to create clickable prototypes in seconds (also mention InVision) but they're mobile-focused. Our prototypes were based off iOS’ new design language, but were downplayed it to look like blueprints so we could focus on hierarchy and flow.

We also began to work on style tiles at the same time to explore typography, color, and how we’d treat image assets. This let us react quickly when a developer brought up some wild business logic that we needed to account for. It ensured everything was perfect before we got our hands dirty designing all the screens.

When we were ready, it was simple to move this into a higher fidelity prototype while development went on in tandem.

The end result went live a couple months back and is doing super well. They’re getting great feedback from users, advertisers, and even competitors. Hemmings said “this has the highest production value of any product we’ve released." We’re pretty satisfied with that.