Amped-UX
  • Welcome
  • About
    • Endorsements
  • Portfolio
    • HD Game UX Design >
      • Star Wars: Jedi Fallen Order
      • Battlefield V
      • Lost Planet 3
      • Sonic Boom: Rise of Lyric
    • VR & AR UX Design >
      • Starblood Arena
      • World War Toons
      • Fire Escape
    • Web & Mobile UX Design >
      • Precision Digital Health
      • Stacks! Live Streaming Game Show App
      • Smart Events Mobile App
      • Vyndica Mobile Trading App
  • Media
  • Blog
  • Return to Top
  • Fire Escape VR
  • Starblood Arena VR
  • Raising a Rukus VR
  • World War Toons VR
  • Dream VR Homes Unity App
  • iOS Augmented Reality Flows
  • MGO Advanced - Unity VR Video App

Virtual & Augmented Reality Projects

FIRE ESCAPE VR

Picture
Published By:  Google, June 2018 (Daydream release), Ink Stories, April 2020, (PC/Steam Release)
Developed By:  Inhance Digital, Ink Stories, Frima
Tools and Tech:  Unity, Visual Studio, C#, Perforce, Adobe Illustrator
​Platforms:  PC/Steam, Google Daydream VR, Lenovo Daydream Mirage
Services Provided:  
  • Lead Unity Programmer (Episode 1)
  • Mobile VR Performance Profiling
  • Engineering Team Management
  • UX & UI Design
Picture

Download Episode 1 for Free on the Google Play Store
Pixel Phone + Daydream Headset Required

ACCOLADES & SHOWCASES
FIRE ESCAPE SERIES TEASER TRAILER

PRESS TO WATCH

STARBLOOD ARENA

Picture
Published By:  Sony Computer Entertainment, April 2017
Developed By:  WhiteMoon Dreams, Sony San Diego Studio
Tools and Tech:  Unreal Engine 4,  Adobe Illustrator, Survey Monkey
​Platforms:  Playstation VR
Services Provided:  
  • UX Design
  • ​HUD Design
  • Usability Testing
AMPED-UX collaborated with the team at White Moon Dreams to drive UX design and player research for  this multiplayer, e-sports-focused combat game.  Through mockups , research, and wireframes, we resolved critical  blocking  issues and improved efficiency by focusing the team's effort on modular and reusable HUD design solutions.  We also generated wireframes and flows for longer-term feature development, including player progression and multiplayer lobbies, and clarified UX design strategy for critical trade shows , such as Sony's Playstation Experience (PSX) Convention.

COCKPIT HUD REDESIGN

GOALS - DESIGNING A REUSABLE HUD UI SOLUTION
A major goal for this 360 degree VR multiplayer shooter was for players to assume the roles of unique pilot avatars with larger-than-life personalities  and unique flying combat ships. Each pilot was permanently paired with a ship  to reinforce this relationship, and the game would convey pilots' personalities through dialogue and  avatar hand animations in the unique cockpits seen in first-person VR.
The problem was that the team was struggling with creating a consistent UX Design across all the unique cockpits, resulting in special-case work and duplicated effort to embed UI and feedback elements  in the cockpit geometry. This was causing the asset production team to struggle with UI  implementation.
The initial recommended pivot was to separate out the  HUD feedback elements  from the cockpit geometry via projecting them within a circle  onto the cockpit glass. This would promote visual/functional consistency  for users, as well as remove a development dependency between the UI HUD development  and the production of multiple detailed cockpits  geometry for each unique pilot.
FIRST DELIVERABLES - SKETCHES AND MOCKUPS
Picture
Cockpit HUD UX Redesign Sketch
The sketch shown here was the first deliverable. The team had a well-defined idea of what the control scheme should be, as well as all the primary player mechanics and actions. The workable prototype already proved the game was fun to control and mitigated VR motion sickness issues. With this well-defined set of  requirements as a foundation, I sketched out a solution based on a circular motif, partially inspired by the HUD in the old GOLDENEYE 007  first-person shooter classic for Nintendo 64.
Spec documents, conversations, screengrabs, and playtests provided by the client's in-house game design and production teams informed this initial sketch. Other UI elements were informed by drawing on prior experiences spearheading UX design for multiplayer HUDs in   MEDAL OF HONOR  and  LOST PLANET 3.
When thinking about how to organize visual information for VR, high priority information, such as shield and ammunition quantities, targeting reticles, and missile lock-on warnings, would be closest to the center of the circle.

Secondary, lower-priority information, such as timers, objectives, or other player status feeds (such as kills, scoreboards, or objectives) would be pushed out into the user's peripheral vision.
ILLUSTRATOR PAINTOVERS & NEW IMPLEMENTATION
Once the team approved the sketch and suggestion to move the UI elements out of the cockpit geometry  and  onto the glass, we started developing "paint-overs" in Illustrator to  clean up and iterate on concepts  presented in the initial pencil sketch. ​

The guiding priciple was to divide a radial grid/guide  up into thirds, with shield UI feedback elements on the bottom third, with weapons on the left and right thirds (to match mappings of weapon types to the left and right sets of triggers on the Playstation controller.
edAfter a couple of rounds of iteration, the final asset was delivered as a Photoshop file and exported as PNG's. The internal team imported these into Unreal 4 and implement the redesigned HUD using the Unreal Motion Graph (UMG)  framework.
Picture
Post-Redesign HUD Screengrab
Picture
MINES & HEAVY WEAPON UI DESIGN COMPS
This image illustrates the process of zeroing in on potential HUD UI element designs leveraging iconography, color, text, numbers, status bars, and button image  signifiers so players understand what physical button presses do. 
These six comps illustrate mines in green on the left (activated by pressing DPad down on the Playstation controller) or Heavy Weapons in pink on the right (activated by pressing the pink Square button).   The intent with these comps was to provide the client with explorations of UI element compositions and granularity of feedback for status bars, using  both continuous and "dashed" status bars  to represent quantities of user resources (in this case, the number of  mines or heavy weapons the user has at a given moment).

USER CUSTOMIZATION & PROGRESSION UX DESIGN

Picture
This UX Design artifact  illustrates how a user would go through the process of configuring and purchasing upgrade and customization options for their pilots and their ships.
  • The Red circle seen in the mockups indicates  what users might immediately see in front of them in VR, distinguishing from  lower priority elements in the VR peripheral vision.
  •  Callout boxes   provide  context to explain certain design decisions or  convey details to the developers, such as  different states for environmental VR UI elements (like  hanging  screens) 
  • Pop-ups indicate how errors or edge cases would be  handled .
These mockups were created, reviewed, and iterated upon to convey how users would experience longer-term progression & gamification loops, which would keep users engaged by offering them purchasable or unlockable rewards for leveling up or for continued  play.

PSX DEMO FLOW UX DESIGN

These chart illustrates the process of designing a specific goal oriented user experience, in this case, the flow of a STARBLOOD ARENA  player at Sony's Playstation Experience (PSX). User functions include:

  • Viewing  the title screen
  • Entering a streamlined multiplayer lobby
  • Viewing other player details
  • Configuring options
  • Playing the game
  • Viewing Scoreboards
  • Exiting the Demo
PSX Demo Flow Chart
PSX Demo Mockups
The first step in the process of designing the UX for the PSX demo was creating the Flow Chart,  which  outlined in broad strokes the features that the team would implement and support for the show. This approach also allowed the client to see how many steps or interactions various navigations might entail.
​

Once the broad strokes in the High-Level UX Flow were agreed to and approved, the Mockup flow was created in Illustrator. This would combine existing screengrabs, images, fragments of mockups from pre-existing flows, and flow logic to define a foundational blueprint for the development team to work from.

STARBLOOD ARENA FEATURES TRAILER

Here's a more recent trailer for STARBLOOD ARENA, showing off the circular HUD elements.

PRESS TO WATCH
Picture
Looking for VR UX design help?  Subscribe to our Mailing List and get your FREE Minimal Viable UX PDF!
Or...
Contact Amped-UX

RAISING A RUKUS

Raising a Rukus - 360 Trailer from Create Advertising on Vimeo.

Published By:  The Virtual Reality Company, June 2017
Developed By:  The Third Floor, Grue Games
Tools and Tech:  Unity3D, Sketch, Adobe Illustrator
​Platforms:  Samsung Gear VR
Services Provided:  
  • UX Design & Wireframes
  • User Research
Picture
PRESS TO VISIT OCULUS GEAR VR DOWNLOAD STORE

WORLD WAR TOONS - COMING SOON !

Picture
Published By:  Roqovan, October 2016
Developed By:  Roqovan
Tools and Tech:  Unreal Engine 4,  Adobe Illustrator, Survey Monkey
​Platforms:  Playstation VR, Oculus Rift (PC)
Services Provided:  
  • UX Design
  • Unreal 4 Level Whiteboxing
  • Unreal 4 Blueprint Scripting
  • User Research

DREAM VR HOMES - GEAR VR ARCHITECTURAL WALKTHROUGH - COMING SOON !

Picture
Developed By:  Amped-UX & Underminer Studios
Tools and Tech:  Unity3D,  Adobe Illustrator
​Platforms:   Gear VR

AUGMENTED REALITY IOS APP 

CREATED USING:  Adobe Illustrator,  InDesign
These diagrams are from a project I worked on briefly in late 2014 to propose an overall UX design for desired functionality for a Augmented Reality (AR) mobile app that featured in-app purchasing (IAP).  With this hybrid "mockup-flow" approach , I used numbered columns to  indicate  how deep or how many interactions "in" a given screen or feature is.  The features and conventions of this diagramming approach offer both the development team and the client a number of benefits:
  • You can see, at a glance, what features were the most immediately and conveniently accessible to end-users (left most columns)
  • You can see features that are more complex  or de-prioritized  placed deeper in the UX to the right side columns.
  • You can follow through each step and interaction, screen-by-screen, to understand the moment-to-moment  user  experience, using  the decision logic gates (diamonds) to understand how users are guided to different features within   the app's UX.  
  • The thicker green line highlights  the "primary flow" or "critical path," representing the series of interactions that most users are expected to make or experience. 
  • Pop-outs"  illustrate the complete scroll for certain screens  that have more content "below the fold" of the mobile app frame. 
iOS App - Overall Mockup- Flow
iOS App - In-App Purchasing (IAP) Mockup-Flow

MGo ADVANCED - VIRTUAL REALITY (VR) THEATER

This project is best described as a "VR DVD Menu."  Using an  Oculus Rift or Samsung Gear VR headset, users can explore virtual, holographic movie theater where they can pause  a 3D movie and look  to the sides to interact with supplemental information panels depicting  actor and director bios, or similar movies.    This role involved some layout of 3D UI elements in Unity3D using the NGUI plug-in, as well as collaborating with another programmer (in the earlier phases of the project) on some C# interactive UI  programming  and  to pull image assets from a JSON-based back-end.
Developed By:  BackCode, LLC
Tools and Tech:
 
Unity3D, NGUI, Sourcetree (Git)
​Platforms:  Samsung Gear VR, Oculus Rift
MGO Advanced - Actor Bio & Image Viewer
MGO Advanced - Similar Films Browser
MGO Advanced - Director Bio

NEXT: VYNDICA MOBILE APP
Powered by Create your own unique website with customizable templates.