AR/VR Design Process:

Morgan Fritz
8 min readApr 19, 2018

--

Move from Organization to Ideation

Part I

I cannot overstate how much of a wild wild west the world of AR and VR stand at this moment. Fortunately, we can begin to tackle this emerging medium with design skills carried over from previous process methodologies. Below is my process when beginning any design project. From here, I have a second article outlining my prototyping methods in the space.

Keep in mind, this process caters to designing for augmented reality, however I do reference both AR and VR work at this stage, since many takeaways are valuable in both contexts.

A little about me, I’ve progressed through fine arts, industrial design, user experience design, and now work as a UX/UI designer in Augmented Reality at Osterhout Design Group. I’ve found that the tools may change, but the AR/VR design process is both familiar and experimental in the best possible ways. An interesting meld of experiences became relevant in Augmented Reality, including the physicality/spatial understanding from industrial design, interaction flows from UX, and the overall need for constraints to reign in the seemingly limitless possibilities. Different mediums, same discovery. So let’s dive in!

Organize

The process begins with some planning. Early organization is KEY to minimizing tedious work in the future. Something as simple as establishing naming conventions can save hours of combing through documents. We’ve all been there, and it’s no party.

Tools:

Decide as a team what tools you will use to collaborate, communicate, and store work. Keep in mind this is adjustable as new needs arise, but agree on a baseline. Within the ODG Design Team, we use:

  • Slack: Communicate and quickly share files
  • Google Drive: Organize, share, and store files
  • Trello: Personal and team to-do lists
  • Sketch: Create interfaces and user flows
  • Proto.io, GoProVR, Sketchbox, Unity: Prototyping (see Part 2 for details!)
  • Time Out App: Remind you to stretch and posture check!

File Collaboration

Create a system early on for file organization. Start by establishing a naming convention everyone can follow. For example, ContentName_Date_Creator’sInitials. I also use general to specific in that name, such as Section_SubSection_Date_Creator’sInitials so all of that section is grouped together. It seems tedious at first, but is invaluable for versioning, multiple contributors, and appears grouped by subject in an alphabetized list!

Structure

Establish a file structure that prevents clutter and confusion. I recommend using a folder system of general (Research, Process, Master Files, Finals, etc.) to specific (Icons, motion videos, etc.). Always have an “archive” file so that previous work does not clutter up working files.

Parking Lot

In my personal opinion, this is the most underutilized part of the process. From the get-go, ideas start to form, whether or not they’re backed by research or user testing. Don’t let them escape! Some of the greatest ideas come from these initial assumptions.

Throughout every stage of the design process, keep a running list, or “parking lot” of ideas and questions to gather and re-asses periodically. You never know what will spark that pivotal idea!

Mapping

•Define the “what.” What is the need? Careful not to phrase your “what” as a solution. This isn’t a “We need a stronger customer support system,” but rather a “We need a stronger means to aid or customers.”

•Next, map out your goals and constraints. What are your short term and long term goals? These may change drastically as you learn more, but are a key component to create your roadmap in the next step.

•What do you define as success? What do you define as failure? Answers that arises are free to be as vague or specific as desired.

•Brainstorm “how might we” questions. “How might we…improve this system, amplify this experience, provoke this emotion.” These can extend to “In what ways might we.” “Why would we” or “What limits us from.” Use this technique as a means to prompt actionable, meaningful, and insightful inquiries.

Roadmap

Create a calendar of general deadlines and expectations. These documents should be shared and accessible team wide. Define the timeline; what is flexible, what is fixed? Calendar items may, and probably will be, ever-changing. Create an initial calendar/team timeline for current deadlines and, as you progress from ideation to development, the roadmap will expand and refine with expectations and version planning (what is planned for execution now, in x months, in x years).

Research

•Explore the space of AR and VR. Research existing work in the field, current market, and use cases.This is a list of resources I’ve compiled to utilize and build upon.

•Gain a technical understanding of today’s technology. You won’t remember everything all at once, but it’s important to slowly build a technical understanding of strengths and constraints, as well as your tools’ specific capabilities, including programs and hardware.

•In this phase, it’s important to leverage other disciplines and practices! AR and VR are still predominantly undefined, so learn from any and every source possible. Look into physical tools people touch/open/place in their home. My background is in Industrial Design, so I reference the spatial understanding gained from woodshop, and 3D modeling programs. Source work from designers, architects, writers, you name it! With the level of unfamiliarity to a new AR/VR user, expected interactions from existing physical and digital contexts are strong stepping stones to lessen cognitive load.

•Create visual inspiration boards for work that can influence design choices, and kindle creativity. Additionally, I always have a running list of categorized links to helpful websites and videos to reference, like the resources list linked above.

•Know what is known: Note conventions that are forming in AR/VR interfaces, and conventions that do not yet exist. (for example, unlike typical UI/UX, there are no standard screen sizes, distances between user and content, interaction patterns, layout patterns, etc. but there are some “common practices” emerging, such as Google’s Designing for Daydream)

•Involve Developers from the start. Knowing early on that a simple adjustment can save many hours of work will make a dramatic difference. Communicating clearly (prototypes, storyboards) and in full detail with developers will help both designer and developer understand:

  • Time estimates for completion
  • What is simple, and complex to implement
  • What is feasible for roadmap

Personas

Define, understand, and research your persona(s). Try to get in their head and walk through “a day in the life” of this persona. It’s crucial to understand who you’re designing for early on. Tools such as Empathy Maps and flow maps are useful at this stage.

Flow map: place user types on left, and desired goals/endings on the right. Connect the two sides through words and arrows to indicate interactions

Ideation

This is the part where you start making! Below are a few ideation processes I’ve found useful:

•Sticky note ideation: There are many methods to sticky note ideation, but here’s one. Time yourself for a sprint of to consider your persona’s wants and needs, and jot down ideas that comes to mind on sticky notes and post on a wall. After sprint, group sticky notes into categories and title groups by key subjects. Take the time to go through these ideas thoroughly, and continue to add if more arise!

•Prioritization Grid: Create two axes: Importance (low to high) and feasibility (left to right, difficult to easy). Take the ideation sticky notes, and place them along this grid, discuss with your team. Focus on the “no-brainers” in the top right (high importance, easy feasibility), and the “big bets” in the center diagonal. Avoid spending time on the lower quadrant, as they are both low priority to the user, and difficult in feasibility.

•Early on, create an “assumptions and questions” board. This will help you identify what is known and unknown to keep the team grounded. Create a 2x2 grid, make the top to bottom axes “high risk” at the top, “low risk” at the bottom, “certain” to the left and “uncertain” on the right. Plot questions and assumptions within these four quadrants on where they rank. Then discuss how certain you are about the answer, and how risky it is if you’re wrong. Then focus on validating posts in the upper right quadrant, as they are the most high risk uncertainties.

Don’t forget your Parking Lot! As mentioned earlier, always have some place to store ideas that pop up as you go for later reference, whether or not they’re relevant at the time. You never know what will be gold later on!

Storyboarding

Use personas to map out storyboards and use case scenarios. Storyboards help to summarize findings and align team members on key takeaways.

Timed storyboarding: give yourself a time cutoff of 1–2 min per frame to create a series of storyboards, either individual frames, or a story of 3–4 frames. After creating a series (example, each team member creates a 4 frame storyboard in 8 minutes), give yourself 30 minutes to create storylines from these panels or series of panels.

Even on paper, it’s important to start thinking spatially. Vincent McCurley posted a helpful article and template for storyboarding in VR to begin thinking of your content in 3D space!

Rinse and Repeat

Collect your findings from research and user testing, and build upon previous concepts. This process can repeat as many times as necessary or time allows.

Conceptualization

From here you are ready to ideate, prototype, and user test!

Continue to Part 2 of this article to walk through my prototyping process in the AR/VR space!

Thanks for reading! If you liked this, send some claps below so other people will see it on their Medium feed!

--

--