The SoFriendly way: Optimizing workflows for VR design

All images courtesy of SoFriendly.

By Justin Mitchell
Posted on 09-09-2020

Always build products for our clients that their audiences fall in love with immediately — this has been our number one goal at my product design agency, SoFriendly, since day one. We cater to startups, and we’re always telling them that it’s important to really understand their users. We believe that investing in user experience (UX) design pays off in droves, especially for young companies that need to see success as fast as possible.

To ensure our clients quickly see this kind of success, we make sure they are on the same page with our designers and developers throughout the design process. This has often been challenging to put into practice.

That is, until recently. When we switched over to Adobe XD, we were thrilled about how much faster and easier our whole process became. This goes for the products we’ve created in both 2D and 3D. Here’s how we’ve managed to adapt our UX best practices for an augmented reality (AR) and virtual reality (VR) world.

Adobe XD

Create and share designs for websites, mobile apps, voice interfaces, games, and more.

Learn more

Our initial design workflow: Designing VR for enterprise clients

Much of what we do involves building VR solutions for enterprise clients. VR is really the next frontier since it’s emerging tech for both users and designers, which is incredibly exciting. At the same time, this is what makes this process hit-and-miss — there is a total lack of testing standards in VR.

Any good designer knows that it’s essential to test your app design before you start building it out. Curiously, in VR design that process is generally skipped over entirely. This has been predominantly a tech issue: We found that it was pretty much impossible to test a VR experience effectively until it was fully coded — which can lead to all sorts of issues.

In our previous workflow, we’d design an experience in Photoshop, and we would ultimately warp the user interface (UI) to make it look like it would in a VR app. We were also needing to essentially guess how the experience would look in VR as a person moved around and interacted with the experience. This would cause problems with accurately incorporating distance — a crucial concept in VR.

I can’t tell you how many times I’ve designed a VR experience, given it to a developer, and have had the developer integrate it, only for me to finally try it in a headset for the first time — and then realize it doesn’t work at all. Of course, this has meant starting from scratch. Again, as a startup agency that works with other startups, any lost time and resources is tough.

We needed to find a better way to be able to work in this emerging medium, so we built our own tool. To increase the efficiency of our design workflows, we created DraftXR, a plugin for Adobe XD that makes it easy to design, test, and share VR UIs.

A new-and-improved VR design workflow

Working with Adobe’s prototyping API, we built DraftXR to allow for as rapid prototyping as possible of VR experiences. The end result is incredible: You can go from a 2D design to a full VR prototype in just a couple of minutes. We know what this has meant for our workflows, which have been dramatically improved.

A VR web experience, created with Adobe XD and DraftXR.

DraftXR allows you to prototype VR experiences right in a headset or mobile browser. This means we are able to show our clients exactly what their finished design is going to look like before having to spend time and money on coding the experiences. They can experiment with the design in full VR, click where applicable, and look left and right.

This is a first in UX; we are privileged to be able to give our clients and other XD users out there the chance to accurately prototype in VR.

This has led to big improvements in our client relationships. Thanks to the rich prototyping that XD makes possible, now even in VR we have been able to align with clients on exactly what they’d like to see (or not see!) in the products they pay us to build.

Designing other tools to help with asynchronous design workflows

At SoFriendly, we’re obsessed with workflows and making them easier. Again, I think this is a core value of a startup culture: Find the best way to work, and if it doesn’t exist, invent it. This is what we were able to do with DraftXR, but we have also concentrated on reducing friction in the general design process. To effectively design as a team, you need to optimize how you hold your design meetings and reviews. Often, and especially now, this doesn’t mean everyone meeting at the same time.

This is why we created Yac, fully designed and prototyped in Adobe XD. Yac is an app for audio-first messaging for remote teams.

Inserting image...

Justin and his team at Yac.

Say you need to meet with your developers, but your schedules don’t line up. Yac lets designers use voice messages to explain to them, on their screens, exactly how a prototype should look — no more miscommunication. Since Yac is asynchronous, your team doesn’t even have to be available at the same time to receive this guidance. This has been another step on our quest to harmonize design workflows and make the process of creating products better for everyone.

The importance of workflows to startups

When you’re a startup agency, you don’t have time to waste or unlimited budgets to absorb costly experiments. You want to build products you’re passionate about and make your clients happy.

For us at SoFriendly, we have lived and breathed this mentality, and we recognized this need to help others in our industry early on. Our switch to XD helped facilitate this, and since then we’ve used it as our tool and platform for springboarding products for our clients and our own apps. We’re passionate about making design life for startups much easier, and we’re glad we’ve been able to make an impact so far.

Adobe MAX 2020

Location: Wherever you are
Virtual Conference: Oct 20 - 22

Register now

Topics: Customer Stories, Insights & Inspiration, Creativity, Creative Cloud,

Products: XD, Creative Cloud