Crafting the 3D Immersive Experience Builder
ROLE
Lead UX/UI Designer
PLATFORM
Web App, VR, Win, Mac
LOCATION & YEAR
Germany © 2022 – 2023
MY ROLE AND RESPONSIBILITIES
As the lead UX UI designer, I was responsible for creating a design system, brand guideline, user flows, wireframes, features list and interactive prototypes managing the design team. The main tools used in this project was Figma and Miro for organizing designs, prototypes, brainstorming and workshops. I also created user stories for sprints on Jira to plan and prioritize developments. In addition to designing user interfaces and creating interactive prototypes, I performed tests to identify the feature required, an simple and easy to navigate user experience and resolve issues with implemented features. Attended client meetings to gain a deeper understanding of their requirements and desired outcomes.
1. project overview
I joined the new startup called Anitya, aiming to build a platform on top of the Godot game engine that would enable users to create immersive 3D experiences, facilitate storytelling, and build virtual worlds for social activities with friends, such as playing games, solving puzzles, and watching movies. The platform would also include gamification features to enhance the user experience and be accessible on devices with low configurations. In addition to these core features, the platform was required to offer a wide range of customization options, a rich and flexible chat system, a system of roles and permissions, support for custom avatars, web3 integration, non-fungible tokens, and the import of images, videos, gifs, and 3D objects from external sources.
This UX/UI design case study will detail the design process and decisions made during the development of the Anitya platform, as well as the outcomes and impact of the project.
2. CHALLENGES
The main challenges we encountered during the development of the platform was finding the balance between a wide range of features and a user-friendly interface. Another challenge was making sure the platform was accessible on devices with lower specifications with sacrificing performance or design as less as possible. Additionally, we had to consider time and budget limitations when deciding which features and improvements to prioritize for the client demos. Overall, managing the various requirements and constraints of the project while still striving for a high-quality user experience was a significant challenge.
Believing that we can face challenges to
- Allows users to build and explore immersive 3D environments and facilitate storytelling through interactive and dynamic experiences
- Develop virtual worlds for social activities with friends, such as playing games, and watching movies, with a wide range of customization options to personalize their experiences
- Implement a rich and flexible chat system to facilitate communication and collaboration within the platform
- Introduce a system of roles and permissions to enable multiple levels of access and control within the platform and ensure a safe and secure environment for users
- Enable users to customize their avatars
- Web3 integration to enhance the personalized and interactive nature of the platform
- Allow users to import a variety of media, including images, videos, gifs, and 3D objects, to further enrich their creations and express their creativity
- Optimize the platform for accessibility on devices with low configurations and ensure smooth performance for all users
- Incorporate gamification elements to enhance the user experience, encourage engagement, and motivate users to continue exploring and creating experience
3. USER RESEARCH
To better understand the needs and expectations of our target users, we conducted a variety of user research methods, including interviews and surveys with potential users, creative directors, storytellers, and more. We also reviewed existing research on the use of game engines and virtual worlds for social activities.
Through this research, we gained valuable insights into the motivations and goals of our target users, as well as the challenges and pain points they faced. For example, we learned that many of our target users were interested in creating games, but had little to no experience with creating 3D content or coding. We also learned that our target users valued flexibility and customization options, but were often limited by the performance of their devices.
Based on these insights, I created a set of user personas that represented the different types of users of the anitya platform. These personas included beginners, game developers, marketing specialists, kids, socializers. I also created mind maps and journey maps that illustrated the steps and experiences of these users as they interacted with the platform.
The user personas, mind and journey maps helped us to better understand and empathize with our target users, and they informed the design process as we worked to create a platform that met the needs and expectations of these user.
4. DESIGN PROCESS
Based on our user research, we conducted a design sprint to brainstorm and sketch out ideas for the platform. We used Figma, Miro and Jira to organize our workshops and align design team with the development team. During the scrum sprints, we focused on creating a clear and intuitive navigation structure and defining the key features and functions of the platform.
4.1. Design System
To establish a consistent visual language and design principles for the anitya platform, I created a design system that included brand guidelines and a style guide.
4.1.1. Design Principles
I focused on four main design principles: usability, accessibility, simplicity, and consistency. Our goal was to create an intuitive and easy-to-use interface and maintain a clean and streamlined design as a toolkit. We also aimed to ensure that the design was consistent across different parts of the platform, so that users could easily navigate and understand the interface.
4.1.2. Color palette
To create a spacious atmosphere and keeping in mind that anitya will be a toolkit, the color palette decided to be a mix of white and light grey tones. Black is primarily used as an accent color for text and graphics, but it could also be used as a background color. We chose playful a colors as well, reflecting the immersive and interactive nature of the Anitya platform and to add depth and interest to the design. The ratios of each color in the visual identity are approximated. The goal when using color is that the neutral palette is prioritized, and white and black will perform the most of the job.
4.1.3. Typography
Google Noto Sans was a great choice for the typography of the platform due to its legibility, multilingual support, and professional appearance. It was used for the body text of the platform, which needed to be easily readable by users. In addition, the font’s multilingual support allows users from different languages to communicate, which is one of the key feature of the platform especially chat system. Google Noto Sans also had a modern and professional look, which fit well with the branding and visual style. also, I added all typefaces to the Figma project library for ease of use.
4.1.4. COMPONENTS
I designed range of components, including buttons, icons, and navigation elements. Each component was designed in Figma to be flexible and reusable, allowing us to create a consistent and cohesive user interface. I also used the atomic design system methodology that breaks down UI design into modular pieces, starting with the smallest, basic elements (atoms, molecules, cells) and building up to complete user interfaces (pages).
4.2. Design sprints
To quickly prototype and test new ideas, we used Scrum sprints for our design and development process. Each sprint lasted for two weeks which includes five events (Planning, Daily Scrum, Review, Testing, and Retrospective). We used Jira to create user stories and track progress. I also held workshops during sprints with complex features.
4.3. USER FLOWS
To understand the user’s journey and identify potential pain points, we created user flows.
4.3. PROTOTYPING
We used Figma and Miro to create interactive prototypes that allowed us to test the design and gather feedback.
4.4. Usability Testing
To ensure that the platform provided a high-quality user experience, we conducted lots of usability testing at various stages of the design process. Through an iterative design process, we were able to continuously improve the implemented features based on feedback and testing results. As an example, one key area that we focused on was customization options for avatars and display names. During the usability testing with a group of users, we found that users wanted more control over their avatars and appearance and wanted to be able to customize their avatars and displayed names. Based on this feedback, we decided to switch from using Mixamo avatars to Ready Player Me avatars SDK, which offered more customization options and users where able to upload their photos to get avatars similar to them. We also separated the displayed name and username to give users more control over how their name was displayed in the play mode. Most of changes were received by user feedbacks and helped to improve the overall user experience.
5. Implementation
The design of the Anitya platform was implemented in close collaboration with the development team. We used agile methodologies, including design sprints and workshops, to prioritize and plan the development of features. We also used Jira to create user stories and track progress during the sprints. There were a few challenges that we encountered during the implementation process, such as performance issues on devices with low configurations. However, by working closely with the development team and using agile methodologies, we were able to successfully implement the design and deliver the platform on time.
6. Outcomes and Future Considerations
The demos of platform had a positive impact on the user experience and overall success of the project. After delivering demos, we saw an increase in engagement and retention, as well as a decrease in user frustration.
One of the main lessons we learned from this project was the importance of user research and usability testing in the design process. By regularly gathering feedback from users and stakeholders, we were able to identify and address pain points and improve the overall user experience.
Additionally, we learned the importance of building a strong foundation for implementation. By taking the time to carefully consider the long-term goals of the project and ensuring that the underlying infrastructure was robust and scalable, we were able to more easily add new features and integrations in the future.
Looking forward, we believe that there are several areas that could benefit from further consideration and development. For example, we believe that there is an opportunity to improve the performance and scalability of the platform.
Additionally, Currently, the platform is only available on Windows, iOS, and Linux and web version. Expanding the platform’s accessibility to better web version and solving some issues with browsers, and also mobile versions would improve the user experience and allow more users to access the platform and increase the platform’s usability.