Overview

XR blocks is a completely free game engine that allows young developers to create augmented reality and virtual reality 3D masterpieces such as Games, Story Tales, Models etc. and share them with the world. My role was to make the complete application's user interface and prototype to make it user friendly. I also worked on creating a 1500+ Asset Library for the platform on Unity3D Engine.

Problem

The major problem to solve in here was the features that were developed were scattered and did not look pleasant aesthetically. Also less the colors were not friendly and the functionality provided to the user was given without instructions.

Solution

I was asked to create a solution for this problem. With the help of my team, we used to discuss about the possibilities and ideas, which were then implemented in the design. Check out the design process below for better understanding.

Tools

Figma
Adobe Illustrator
Adobe Photoshop
Unity3D Engine

Team

1 UX designer
3 developers
1 project manager

My Role

UX design
UX research
Design in Unity3D

Timeline

Overall: 16+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks

User Journey

I made sure that our users had a smooth transition while building a game and while keeping the business objective in mind. Thus, in order to find areas for improvement, we drew a map of the user journey as it is right now. We found probable drop-off spots and extraneous steps in the flow. We were able to create a lot faster and better experience that improved conversion rates by removing these from the new design.

My input throughout the process

Creating a Multi-screen Application
Selecting a Color Palette
Designing and iterating it with feedbacks
Adding different Features and Buttons
Prototyping and Testing

Heading 1

1

2

3

4

5 Research

Wireframes

UI Design

Prototype

Unity3D

Install
Build
Play

Click on the devices to stop playing.

UI Design

After resolving the usability difficulties, I continued to create the final displays in Figma. My aim was to develop a visual identity that is compatible with both functionality and values. I looked at the competitors as well as my extensive library of sources for ideas.

Visual style I used here was a mix of dark but light was also used for highlights
Fonts used - Inter Family Font
Color Palette used- Greens, Yellow, Greys, Black and White.
Designed for Platforms - Android, iOS, macOS, Windows and WebGL.

Prototype

Wiring all Screens, Buttons and Elements

Using Figma, I wired all the components to each other and made a full-functioning application prototype on my mobile which also helped in user testing. In my opinion this was 'the' difficult part of project.

Go to Figma File

Designing on Unity3D

UI/UX Development

After completing designing on Figma, I converted it into a Unity Scene by learning how to embed the elements one by one into game objects and making it responsive through all devices with the help if my team. And through Source Tree and GitHub platforms, I was able to merge my design and share it with developers.