randrr's UX Stack And Remote Collaborative Tools

The Situation

Here at randrr, we’re obsessed with putting the user at the center of the universe. We strive for a design process that is itself frictionless so that we can provide that same experience to our users.The strategy we’ve developed is aimed at meeting needs from a mobile-first perspective and this is reflected in our UX stack, user testing approach and beta testing plan.

Our motivation comes from some simple truths about the state of today’s career search experience:

  • Americans are doing one billion job searches from their mobile devices each month.
  • More than three in five job seekers look at company career pages from their smartphone or other mobile.
  • Mobile users will reject an ugly career-site experience.
  • You can ask 15 pages of questions, but don’t expect people on a mobile to apply.

The Landscape 

There’s a lot of buzz about collaborative design lately and particularly around Figma. There are a ton of features in Figma that make it look promising, but not every design team can work around software that’s largely still identifying its core features.

The biggest obstacle for user experience design in today’s increasingly remote design process is versioning. It’s a small space where niche tools to handle design document merging can flourish. Most of the tools - like Plant - are still in beta or cryptically get bought up. We’ve decided to work from a centralized component and style library that allows us for greater design transparency between design, marketing, development and even content strategy.

 

Brand.ai

Our savior came in the form of brand.ai: a library tool that directly integrates with our design software (Sketch, the industry standard) but also provides a repository for approved photography, brand assets and even language (both approved and prohibited). Brand.ai works a lot like Invision’s Craft plugin but isn’t strictly a plugin for design applications.

Because we have the pleasure of working with Digital Telepathy in San Diego, our style guide and component library is now something we can all remotely access and update in a non-destructive way that allows us to work through our three hour time difference without the concern of overwriting each other’s efforts.

Brand.ai’s workflow is enhanced significantly by a Sketch Plugin that allows you to segment, add and update your component library directly from Sketch. This ensures consistency across every facet of the app, which we know is a huge factor in having a successful user experience.

So we know how to keep our designers on the same page. How do we replicate this in the never-graceful design handoff to development?

 

Zeplin.io

Zeplin is a great tool for managing design assets and translating them to usable code. There are many competitors. Even our beloved UXPin, which we use for wireframing and prototyping, supports this feature but it’s only available to enterprise users. That’s a big obstacle for a startup even at our scale. Zeplin does just what developers need and at a reasonable price. So reasonable in fact that most startups who are working on an MVP won’t have to pay for it until they scale.

Zeplin allows us to upload source files from Sketch as single screens. We can then add taxonomies to these for certain parts of the experience. Developers can then get a high level view of all associated screens for a particular tag and then drill down. How deep you ask? Take a look for yourself.


Your devs can now grab specifically noted assets directly from the platform while also getting relevant measurements. You can even take it a step deeper and grab code snippets from nearly every asset.


The added bonus that Zeplin adds is a commenting system so developers and designers can share a safe space to have explicit conversations about trivial things.

 

TLDR

User experience design is complicated but collaboratively designing for it doesn’t have to be thanks to Brand.ai and Zeplin.io. Check back every week for something cool and insightful.