My idea is to create an immersive UI design grading experience for our current web platform. Instead of moving it to 3D, I think a simple set of five buttons will work better. I want to emphasize that we are exploring this idea with the intention of making it into an AR experience, but even if it fails, the exploration itself is valuable.
Currently, our web platform offers UI design daily challenges. To make this grading experience more authentic, I wanted to avoid it looking like a dribbble shot and instead incorporate it into my own space. Regardless of whether your room is beautiful or not, grounding the design process in your own space adds authenticity to the experience. This also makes the case study more interesting because it’s not artificially prettified.
In order to achieve this, I took a photo of my living room, messy wires and all. While authenticity is important, it doesn’t mean we can’t make some improvements. So, I used Pixelmator (or you can use Photoshop) to clean up the photo with generative fill. Now, we have a clean background for our design.
Moving onto the design phase, I started using Sketch (or Figma), keeping in mind that the majority of the experience should remain flat. Adding too many layers on the z-axis can overwhelm users and detract from the overall experience. I began with a single window to view the projects. The first principle I followed is familiarity, so I created a simple grid of screens submitted by our community members for the interface.
Next, I sketched out the main vertical set of tabs to be used for secondary navigation. The main navigation in this project is contextual, happening within the main window. I then imagined that when users enter a category of designs, they would have a fully immersive, surround experience. The room would dim around them and a carousel with a 180° field of view would appear in front. However, the main focus would always be on the center design. To assign a quality level (score) to a design, users would focus on it and swipe it up (for higher level) or down (for lower plane). From the side, it would look something like this.
Most of the interface would remain in 2D, but I envision this interaction of moving designs onto different levels working well in 3D space.
Finally, having my main “spatial” a-ha moment, I decided to add more detail to the card views.