Project Wingman
Overview
Up5 Gaming is an up and coming professional gaming community consisting of 2 teams of veteran Halo Infinite players. Other than Halo, Up5 Gaming also gathers the power of the community to produce projects.
In Wingman, Up5 gaming wants to make an AI analysis coach that can provide gameplay suggestions for multiple games and help players improve their game skills.
Role
UI/UX Designer
Duration
2 months
Tools
Figma, HTML, CSS
Our Team
We are a team of young game enthusiasts with a diverse set of skills. Our manager, Juan, not only leads the team but also handles front-end development. Additionally, our three UI/UX designers specialize in different areas.
In Juan's words, each UI/UX designer can be likened to the roles of Tank, ADC, and support in a game.
Manager
Front-end developer
Juan Olivares Hernandez
UI/UX Designer
Prototype and component
Aleksander Weber
UI/UX Designer
Style and UI elements
Xinyi Chen
UI/UX Designer
Research and analysis
Miguel Angel Aranda Ramirez
Empathy
Background
Research
Design goal
Background
The Value of Wingman to the Company
For Up5 Gaming, Wingman is the first major project that they are preparing to publicly announce and seek funding for. Given that the success of this project will impact the company's profitability, it is of utmost importance.
The stakeholders have laid out a plan for UI/UX designers to create prototypes that will be coded into demos by the front-end developer. This demo will be presented at several conferences, where potential investors will be approached to support the development of Wingman. Thus, the design of an exquisitely designed prototype is paramount to the project's success.
How does Wingman work?
The core function of Wingman is to use AI to analyze gameplay, offering players a new level of insight and analysis into their gameplay performance.
The initial release of Wingman is a desktop application. Users can enable the application to automatically capture gameplay by running it in the background, connect their gaming account, or upload local videos for Wingman to analyze using AI.
With Wingman, users can access a wide range of data analyses including behavior patterns, victories, and tactics. By leveraging this data, players can improve their gaming skills and take their performance to the next level.
Research
Because the stakeholders themselves are potential users of the software, possessing extensive gaming experience and a clear understanding of what features should Wingman have. The design team is also a group of game enthusiasts, so the handover of the scheme went very smoothly.
Although the stakeholders had a clear vision for Wingman, I still took some time to research the design style and gameplay analysis platform to ensure that our design would align with industry standards and user expectations.
Design Goal
How might we design an AI gameplay analyzing application？
Visual
As a product of Up5 Gaming, the visual design of Wingman needs to match Up5 Gaming's brand guidelines. Wingman will incorporate Up5 gaming's blue color in its design.
Functional
While the primary function of Wingman revolves around AI analysis of gameplay, which is primarily related to the back-end, the design of the front-end is equally important.
Usability
Being the first generation prototype of the product, Wingman should only present the most fundamental functions, with a UI interface that is simple and easily comprehensible.
Define
User personas
User flow
Problem statement
User persona
Wingman is a typical example of a design that lacks a research phase. Despite the fact that all the designers on the team have UI/UX design titles, stakeholders only want us to focus on design and do not want the design team to invest too much time in market research and user experience. In addition to design drafts, they do not request any form of textual documentation. Nevertheless, I still created documentation to better assist the front-end development.
Fortunately, our design team is made up of the target audience of Wingman, so we can use ourselves as personas to understand and support the concept of Wingman. The persona session was added when I was writing this design process. However, the lack of market research is always risky and could potentially affect the survival of the product.
User Flow
Logging in or registering may seem like a simple task, right? In the digital age, it only takes a few clicks and typing to complete these tasks within a matter of minutes.
However, designing a front-end that can connect to the back-end is not something that can be accomplished in just a few minutes. In the documentation, the main user flow focuses on the user login process since the design of the user interface needs to be closely aligned with the data collected by the back-end.
Ideate
Sitemap
Wireframe
Style Guide
.png)
Sitemap
Given my experience in web design and the relatively simple functionality of Wingman, creating the sitemap was not a particularly difficult task.
The primary features of Wingman revolve around AI analysis of games, which is why we have prioritized the design of the Home, AI Analyzed Clip, local video and stats sections. The next priority is user login and account settings. Finally, we need to connect to the API for Livestream and player game data profiles. Actually, Livestream was a feature that was added in the later stages of design with the intention of providing real-time game assistance and advice to players through AI.
The good news is that we managed to complete the design of all basic pages within the specified time frame.
Wireframe
Because the design is relatively simple, we did not spend too much time on wireframing after determining the style. However, in order to enhance versatility, we conducted some research and explored different layout designs.
Style Guide
Wingman follows the brand guide of Up5 Gaming.
Using a neon-style blue as the primary color, along with black and white. The font choice should be modern, minimalist, and easy to read.
Prototype
High fidelity prototyping
Reflection
Market and product feasibility
The core of the product
Driven by enthusiasm
Market Research and Feasibility
This design process was developed after the Wingman project failed to secure investment. While the results are highly reliable, relying solely on the popularity of AI to design a product is not a reliable strategy for an innovative company.
During the design process, stakeholders did not disclose any user research data. Even though various software exists in the market to help enhance the gaming experience, we do not know the size of the market or how many users actually require a product like Wingman. From an investor's perspective, the lack of reliable and persuasive market research means that the profitability of Wingman is uncertain.
The core value of the product
Wingman is a typical case where the design focus is on visual appeal rather than the functionality of the product itself. During the process of seeking investment, stakeholders focused on showcasing the prototype to investors, rather than the core AI analysis function. Without the essential functionality of the product, even if it looks great, it is just an empty shell, and users will not pay for it. From a business perspective, this is an unconvincing and failed project.
This result can be said to be inevitable. However. we should also acknowledge our failures. Through this project, I have come to realize the importance of project management and market knowledge. This has laid the foundation for me to pursue the Google Project Management Certification.
Driven by enthusiasm
It has to be said that working with like-minded people is a great pleasure. Because we all have a genuine love for design and this product, our communication is very smooth, and our understanding of concepts is quick, which naturally leads to a significant increase in work efficiency.
Learning has always been an interesting thing for me, but being able to learn and work at the same time, while also being able to easily communicate with others, is a rare and valuable experience. I really enjoy the time I spend with my team!
