“People who use Facebook don’t call themselves Facebookers. That’s just not a thing. But people literally call themselves Redditors.”
So said Robinson Scott, a senior UX designer at Reddit. His “Facebooker” point underscores a tricky fact: the stronger an audience identifies with a platform, the less likely it will be to embrace changes to its interface. That could be especially true for a platform like Reddit, which is infamous for its bare-bones aesthetic — even when those updates are specifically tailored to improve users’ experiences and based on extensive testing and research.
“It definitely makes putting out new features more challenging,” he said.
Scott was quick to add, however, that the surplus of vocal Reddit fans is also a blessing of sorts. He never wants for access to feedback.
Scott’s challenge is like a hothouse version of the task faced by all in UX design, implementing usability features to improve how users interact with a product, while still retaining the essence of the thing, or of the brand. The fact that Reddit had a reputation for puzzling newcomers — its own co-founder and CEO once called the site’s pre-makeover look “dystopian Craigslist” — only ups the difficulty.
“It's like a city,” said Scott, a self-described guinea pig for new UX software. “People say tech ruined San Francisco. I don't think that's true, but it does underline the importance of making sure that, whenever there’s change — whether it’s to a place or a website — you maintain the identity. You can’t wreck their culture. It adds a whole other level of complexity to the work.”
Striking that balance involves several steps, including gathering plenty of feedback through user research and testing, drawing up both basic frameworks and advanced prototypes and keeping (sometimes large) teams well organized.
In addition to Scott, we reached out to another San Francisco-based UX designer, Tommy Dale, who currently designs user experience at Salesforce. Both told us about their preferred software, platforms and other tools for designing products that people really want to use.
User Research and Testing
Before designing and building a feature, it’s a good idea to make sure it’s something people actually want to use. This all-important process of gathering feedback is essentially two-pronged: product teams first conduct research to pinpoint the needs (spoken and unspoken) of their user base. They then test out a prototype of their design to make sure it satisfies those needs before passing it along for developers to build out.
Here are some resources Scott and Dale singled out as particularly helpful in these stages.
Google Sheets
Location: Mountain View, Calif.
The old-fashioned spreadsheet isn’t likely to win UX Design’s Tool of the Year any time soon, but it’s a great standby for not only centralizing user feedback, but also for quickly organizing it and teasing out meaning, Dale noted. "I take all my interview notes in a spreadsheet so I can sort and filter their answers and look for patterns. From there, creating graphs and conclusions is a cinch." Either Microsoft Excel or Google Sheets will suffice; like much in the UX design toolkit, it ultimately comes down to personal preference.
UserZoom
Location: San Jose, Calif.
Scott is a newcomer to this user testing platform, but he evangelizes it like a longtime true believer. UserZoom offers unmoderated testing: instead of guiding and questioning a lab full of testers, you upload your prototype to the platform, segment and screen your remote test audience as necessary, and let the feedback come to you. The process isn’t fully automated, but it can save big on money and time. “You still have to combine all your findings into a readout,” he said. “But before, when I was [physically] running tests, it would take up most of a whole day — which is a lot when you still have other work to do … Basically you just put a prototype on the site, and then a day or so later you have 15 videos [of feedback].”
UserTesting
Location: San Francisco
Some organizations have dedicated UX researchers on hand to really home in on user responses and behaviors. Dale in the past has often either handed off his prototypes to such a researcher or run a lab-style test environment himself. For the unmoderated route, though, he recommends the site UserTesting — in particular its ability to build an effective test pool. “It can save you a ton of time especially when it comes to all the recruiting,” he said.
Flowcharts & Wireframing
Once UX designers have made sense of initial user feedback, they can go about building their design. That might mean drawing up a flowchart of the user experience (which could be as simple as a literal pen-and-paper sketch or a map of sticky notes on the wall). It could also mean drawing up wireframes, which are essentially lower-fidelity, early-stage skeleton versions of a prototype.
Here’s what Scott and Dale recommend for both:
Whimsical
Location: Denver, Colo.
Everything flows. When a user goes from point A to B to C on a website or app, they follow a path. If required, one of the first things a UX designer does is map out those paths and the various hierarchical levels of the product experience, dubbed information architecture. Along with some simple-to-use and pleasantly minimalist wireframing platforms, digital sticky-note boards and mind maps, Whimsical hosts a fast flowchart diagramming space in which multiple team members can operate at once. “It’s free and has real-time collaboration,” Dale said. “Also, the UI is purdy.”
Sketch
Location: London, England
Sketch was a UX and UI watershed when it launched. Photoshop was never tailored toward product design, but a dearth of options made it designers’ de facto wireframing and mockup tool for years. Now an industry favorite, the Sketch application liberated UX land from the bulk and cost of the Creative Suite. “I just find Adobe products to be extremely heavy and extremely expensive,” Scott said. “I use them for my photography but I don’t want to use them for design.”
Count Dale a fan, too. “Nothing beats Sketch [for mockups], and the amount of plugins is endless,” he said, referencing the plethora of add-ons available to expand upon the app’s factory design functions. The multi-use nature also facilitates changeover with fewer headaches. “When I make digital wireframes, I like to keep them in the same program I use to create the mockups so that the transition is easy,” said Dale, who's used Sketch for both mockups and wireframing. (It can be used to prototype, too.) “The dimensions, spacing, etcetera are mostly in place and easily adjustable.”
Figma
Location: San Francisco
A bit like Sketch five or so years ago, Figma is an emergent, buzzed-about and wide-ranging design tool in which users can wireframe, prototype, design and hand off. The platform, which works on both Mac and Windows, has two major facets that make it stand out. First, it operates on the cloud. So rather than downloading an app, designers can design right in the browser. Second, and perhaps most remarkable, is what the company dubs “multiplayer editing” — the ability for multiple users to access and tweak a design together in real time.
“I do think it's the best because of that collaboration,” Scott said. “The fact that two designers can work on something at the same time is insane. You can't do that in any other tool.” It also simplifies handoff, he added. “You can actually just send links like you would a Google Doc.”
Prototyping
If wireframing is the skeletal version of a design, prototyping adds the meat. Think of it as a more developed, better-fidelity, more easily interactive punch-up of the first draft. While aforementioned heavyweights Sketch and Figma both offer prototyping, UX designers often turn to other resources to add finishing touches like UX logic and animations so that test users are faced with something that resembles the finished product as much as possible.
Axure RP
Location: San Diego, Calif.
In a blog post titled “Why Isn’t Axure RP More Popular in UX Design?,” Imaginet senior UX consultant Yichen He makes the case for this underdog platform, in part for its “best-in-class” interaction logic. Dale agreed, calling the rapid prototyping tool one of the most underrated of its kind. He also lauds its logic capabilities, which let designers create dynamic objects within prototypes “without a billion screens.”
Dale offered this illustrative anecdote: “One time, a designer coworker thought it would be impossible to prototype a time zone comparison chart he made. He needed a vertical red box to follow the user’s cursor so they can highlight specific time zones on a vertical list. I took his mockups and created logic in Axure without using code to create the functions he needed for a working prototype … That took only a few minutes.”
The prototype was so effective that some mistook it for the real thing. “The users didn’t even know it wasn’t a functioning program,” Dale said.
Principle
Location: Atlanta, Ga.
“For usability tests to really be worth my time, I want to make prototypes feel really polished, like they're almost already built,” Scott said. When it’s time to fine-tune the fidelity on a Sketch or Figma file, he turns to ProtoPie or Principle. The latter excels at animation, which means you can create and visualize smooth screen transitions and dictate specific outputs for different user interactions (i.e. here’s what happens when you double-tap a screen; here’s what happens when you scroll or long press.) “It’s not going to be exactly like the built product, but it’ll be close enough,” he said. “When you test it, the user won’t be focused on the fact that it doesn't feel like a real thing because it does feel like a real thing.”
ProtoPie by StudioXID
Location: Seoul, South Korea
“We’re not beholden to one tool,” Scott said. ProtoPie, for instance, lends itself well to mobile-app design. As this introductory video outlines, the simple interface includes layer and canvas panels (so anyone who has even dabbled with, say, InDesign will already have some frame of reference), plus an “interaction” panel where designers can incorporate “triggers” and “responses” — all without having to code. Users can then test out the prototype on their smartphones. And if an app prototype needs access to, say, a smartphone’s camera, a ProtoPie design can allow that. Like Principle, it makes for a smoother, more finished experience than InVision, according to Scott, who described that popular app’s renderings as more flatly presentational — a “page-by-page prototype, almost like a sprint.”
Process Management & Handoff
UX designers deal with a lot of moving parts. They also interact with several related teams and departments — think UI, researchers, product managers, product marketers, developers. Needless to note, organization and a well-mapped workflow are musts. And as befits UX folk, overly complex agile systems are non-starters.
Here are the apps they recommend to keep the process flowing.
Trello
Location: NYC
Scott’s team at Reddit uses the aforementioned old reliable Google Sheets for maintaining big-picture project workflow: “We just list names and dates at the top, then weekly work allocations. Next to the project entry is the link for the stack.” But within that broader overview, he also uses a personal Trello board, which he shares with one other designer, to track more granular details that are specific to him. “The engineering team uses Jira, but we try to not overcomplicate it,” Scott said. “I’m not sure it’s the very best system possible, but it works. I'm never confused about where things are.”
Google Drive
Location: Mountain View, Calif.
Once a design passes full muster, it goes to the development team, which builds it into an actual product. That last step is the “handoff.” There are plenty of options for handoff, but as Dale pointed out, some enterprises prefer to stick to Google Drive — especially for security reasons. “Often, the programs with collaboration features don’t pass security at a lot of companies,” he said. “So you have to make do with the old tried-and-true Google Drive. But if I had my choice, programs like InVision, Zeplin and Abstract are amazing.”
Illustration via Shutterstock. Images via company sites, social media and Shutterstock.
