Success Path
Everything you need to get started with augmented reality

Design Preliminary User Interface

Break down the components that make up your AR experience. Then arrange them into a basic design.

List asset needs

List all the assets you need to create your AR experience. Assets include anything that appears on the screen—buttons, menus, icons, 3D models, and more. To make your list, revisit the storyboard and user flow you created earlier in the project. For each screen, document which assets appear in the AR experience. Use a spreadsheet or pen and paper.

For each asset, specify several details:

  • What asset you need: Is it a button, menu, icon, 3D model, pop-up, or other asset?
  • 2D or 3D: Will the asset be a 2-dimensional or 3-dimensional feature in the experience? Typically, assets are 2D unless otherwise specified. Imagine 3D assets as things the AR user can explore from numerous angles—they can peer inside, see it from another angle, or step closer to get a better look.
  • Screen or scene: Everything in your AR experience will either be part of the “screen” or the “scene.” The screen assets are locked in place. The scene assets will move and shift, depending on where the user is positioned. If you’re not sure whether the asset is part of the screen or scene, skip this step.
  • Data needs: Will this asset need to display real-time data? Decide how to display that data, for example as a gauge. If so, specify what system houses that data. You’ll connect to those systems later.

For example, if your AR experience is designed to help service technicians find and fix problems with a car engine, you’ll list numerous assets. One asset may be a 3D model of the car engine itself. The model will be overlaid on top of the engine in the real world. The service technician will need to see the engine from multiple angles, so it’s part of the “scene.” The AR experience must also alert the technician to the problem, so you can assume that data is necessary to do so.

Do your best to list all the assets for each frame of your storyboard. Include as much detail as possible. Later in the project, you will partner with designers, developers, and engineers to create the assets on the list.

Create design mockup

Create a rough design mockup for your AR experience. This initial design will illustrate the user interface—the elements on screen that someone uses to interact with the AR experience. This basic design will become more detailed as you go along.

A user experience (UX) designer can help create the design mockup. They will use a wireframe tool or other software to arrange and annotate the necessary assets on the screen. At this stage, the design will look plain: a series of black-and-white boxes on a screen. Include notes about what information each asset contains and/or what happens when a user interacts with it.

Ideally, you would design multiple screens in the flow. From screen to screen, some components will change—menus may collapse and buttons may appear or disappear, for example.

As you design, focus on what each asset does, not what it looks like. You can incorporate colors, visual elements, and branding now if you prefer—but we recommend you complete the visual design later. Determine whether your organization has branding or design standards you must adhere to. As your design becomes more visually detailed, those guidelines will be important.

The AR design process is most successful when you work iteratively.

  1. Design and build until you have something you can test.
  2. Then, show it to the workers who will use your AR experience, and test whether it’s usable and functions properly.
  3. Finally, make improvements and build upon your design.
  4. Repeat the process until you have a completed AR experience.

Once you have a preliminary design mockup, share it with workers at the organization or other stakeholders to get feedback.

As you design the AR experience, document any details that designers may need in the future. This documentation will help you make changes to existing experiences and create new solutions with Vuforia Studio.

Did you find this helpful?

ADDITIONAL RESOURCES

Technical Support

Log a case with eSupport using your Service Contract Number. Don’t have it? Ask the Community.

Product Documentation

Find step-by-step instructions and information about using Vuforia Studio and Vuforia View in the Help Center.

Ask the Community

Visit the PTC Community to get product assistance, share ideas, and browse information about using Vuforia Studio.

Contact Us

Have a question? Submit your contact information and we’ll reach out within 1 business day. You’re never obligated to purchase or commit.