ONENET APP
UX/UI DESIGN
video game distribution and launcher application that would make it easy for anyone to explore, download, launch, and play their video games.
01. pROJECT bRIEF
Onenet App
Onenet, a video game development studio, was in need of a video game distribution and launcher application that would make it easy for anyone to explore, download, launch, and play their video games. The caveat? The application must have support for blockchain features and users without deterring the traditional video game user/player.
On top of launching their own products, they needed something that could also house a plethora of video games created and listed by other video game development studios in the industry.
My role as the product designer was to take on the design process and lead the team to developing a unique, innovative, and user-friendly experience for their upcoming title, Bushi.
My Role:
UX/UI Designer
Responsibilities: User Research, User Experience Design, User Interface Design
Tools Used: Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Adobe Premiere
Timeline: June 2022 - November 2022 (6 Month Timeline)
Onenet App Prototype Showcase
02. Discovery, research, empathize
The Start
Understanding the Team
Before embarking on the design process, it was very important for me to understand and empathize with the team that I'd be working with for this sprint.
I made it a point to conduct 1 on 1 introduction calls with all relevant team members to better understand their work style, communication preferences, and detail their preferred methods of conducting day to day activities/work. This helped immensely with the overall fluidity of working together during this project.
Team Members:
Ryan Deleon (Myself) - UX/UI Design
Leon Berroya - UX Design
Frankpeter Ani - UI Design
John Duriman - Front-End Web Developer
Brandon Belchar - Backend Engineer
UX Workshops
Personas, User Journey, Stakeholders
We started the project by conducting multiple UX workshops with relevant stakeholders to gain a deeper understanding of the problems being faced as well as close the knowledge gap regarding the target market, users/customers, and future product vision.
During this time, we focused heavily on a goal-setting session to make sure that all parties were aligned and all in good understanding of what the high-level direction and objectives were for the project; an open stakeholder interview to layout wants and needs of the application, a user persona workshop to identify the target audience, and user journey workshop to define an initial hypothesis of problems being faced in the most popular market solutions being offered by competitors.
These exercises were conducted during a live group session within Figma to align on project goals.
To wrap up the workshop session, we created job stories to further define a hypothesis regarding the goals that users will want to achieve while using the application.
Discovery
Defining & Confirming the Problem
In order to be able to fix the problem, we must be able to confirm and define further the original hypothesis we came up with during our initial UX workshop.
We decided to take our interviews further and validate our hypothesis by organizing a focus group of individuals matching the personas created in the previous UX workshops with the intent to identify the key problems they have experienced while using competitor solutions.
During the interviews, we asked them to walk us through the platform of their choice and point out the good and bad features that they believe is of importance to note.
Majority of users within the focus group mentioned key features that make distribution platforms successful and unique.
Throughout this focus group interview session we recognized some key discoveries:
-
Some users who play web3 games still do not like to be required to connect a wallet in order to create an account.
-
Users who are not familiar with web3 games or with blockchain technology are still interested in being able to sell assets on a marketplace.
-
Although some users do not use workshops or community sections in other products, they agree that the sentiment to have one adds to their experience using the product.
-
Some users found it more enticing to see analytics on certain dedicated video game pages and gives them more incentive to download and play.
-
Some users found it difficult to find out how to connect a wallet after already creating an account on current market solutions.
With the interviews finished, we were able to confirm the problems that our hypothetical user personas were facing in our previous UX workshop. We were able to confirm via real data from users who consume/use the current market solutions and allows us to identify key features in which we can create user flows and journeys from.
Example of User Flows created: Onboarding Flow Example
We embarked on creating user flows for the key features that were mentioned from our focus group and user personas.
These were key to be able to start ideating and designing in a meaningful and purposeful approach.
03. Ideating, prototyping, and iterating
The Design Process
While the research team conducted their practice, our UI Designer studied the competing platforms to gain inspiration for possible direction on styling and brand guidelines. At the same time, myself and Leon, a UX Designer, researched the structure of the information architecture patterns that our competitors had as well as map out the users flows that these competing platforms designed to gain an even better understanding of current market solutions.
Together, our designers and researchers ideated on possible solutions and directions for the application. It was extremely important to hone in on a direction before iterating on any wireframes to show to the rest of the team.
The first low-fidelity wireframes were created after the research had been conducted. We used Figma to get the general blockout of the first few pages as well as create multiple renditions of the same pages with intent to gather feedback from the marketing and engineering team.
Low-Fidelity Wireframes (Login, Sign-Up, Store Page)
Accessibility
Something to take into consideration in every design process is the notion of making every design accessible for all personas. Though none of our focus group participants or research subjects were affected by any visual impairments or disabilities, it is always important to design with accessibility in mind to be able to cater to all types of users the application may encounter.
04. High-Fidelity & Prototyping
High-Fidelity Wireframe & Prototypes
After many iterations of the initial wireframes, the team was finally able to start on detailing the designs and testing via prototypes.
Frank and I teamed up to create the high-fidelity wireframes and also worked on creating a prototype for the team and our focus group to play with.
High-Fidelity Wireframes (Login, Sign-Up, Store Page)
Our initial testing with those who were selected to go through the prototype resulted in a surprisingly low amount of friction. Users who went through the onboarding prototype noted that the onboarding flow was easy and simple to use, while those who were presented with the store page, community page, and settings page had minor user-experience pain points.
Given this data, we iterated and focused on fine-tuning the features within the application that caused problems for our early testers.
We continued to conduct regular weekly testing with our focus group and applied the final decisions to the user journey, flow, and design.
Final Deliverables
With the final designs completed, we used a final hand-off page within our Figma to deliver the final designs to the engineering team.
These designs included a high-level detail of specifications and states of all buttons and features that were important to reach the intended user experience.
After multiple conversations with our engineers, we were able to reach the first alpha version of the Onenet App.
The Onenet team later filled in the appropriate "filler" text and images in order to launch their early alpha product.
05. Evaluation
Conclusions and Learnings
Working with this team in a unique environment was definitely a challenging experience. Startup workflows are always different in each company and it is important to be able to be flexible, willing to learn, and dedicated to reach the end goal of creating an entirely user-friendly experience through a product.
Through this project I was able to note the importance of having a dedicated group of testers in order to gather the most valuable feedback as well as to be able to understand and empathize with the target group. The team cannot stress enough how pivotal these group of testers were during our design process.
Being able to improvise new methods of solving the early pain points also proved to be extremely valuable as the world of gaming is an ever-growing landscape. I believe that the team both learned and grew as professionals during our design process and can continue to apply our new-found knowledge to projects in the future.
The Onenet team has since been able to onboard more than 2,000 users to their application and continue to iterate the design as their development roadmap continues.