Introducing……

WOWs.Stats.Net

An Innovative, Responsive, Multi-Platform website designed to augment & enhance your gameplay experience through advanced data analytics and in-game insights.

Minimally Viable Product

Homepage:

AI-Based User Chat Interface:

Powered By Latest LLM

Default State:

After Mouse Click:

Design Process:

  • Design Follows a fluid and overarching vertical approach, with different sections of minor difference settled into different blocks contained within a single page rather than through multiple pages.

  • Intelligent AI chat assistants are powered by state of the art latest LLM from OpenAI. Providing users with a sea of relevant knowledge regarding this site and the game WOWs in general.

  • The web application is connected to the game’s dataserver through a central direct API access point, allowing it to be updated en-live through data feeds and information streams.

Top Features

  • I chose to work in an iterative approach, after thorough market research done and competitors analyzed, I was able to get a grasp on what kind of product my potential customers would want, and began to design the web application through a vertical top down approach.

  • I focused on utilizing lots of visual assistance and prioritized visual cues and signages rather than texts based prompts and guidances. This stems from the fact that people usually prefer visual based cues for easier processing rather than text.

User Research & Background

I have been a world of warship player since launch, with thousands of in-game battles and tens of thousands of hours. As I continuously look to improve my in-game performance through statistics and data-analytics, I noticed that the few existing sites I have access to are seriously lacking in one aspect or another. For instance, many are slow and unresponsive, while others have legacy and antiquated UI, with confusing navigations and hard to understand data dump-style user interface, which all makes them less appealing.

With Those things in Mind, I decided to create a more user centered web application that can provide strong data-driven analytics and evidence-based insights, hence, WOWs.Stats.Net is born out of this desire.

My experiences with the game:

Methods: Conducted through a popular online forum / community for this game utilizing anonymized survey forms. No identifying personal information was collected

User Research:

User Research Results:

Personas

Name: Ryan Taylor

Age: 24 Years Old

Location: Boston, MA

Profession: Data Analyst at a F500 Company.

Hobbies: Sports, Playing World of Warship

Why using WOWs.Stats.Net?

  • Currently a mediocre to average player hovering around 48% to 50% winrate across all ship archetypes.

  • Want focused, data-drive analysis.

  • Ease of use, easy to understand.

  • Recurring user rather than one time, likely to become a part of long-term user base.

Competitor Analysis

  • WoWStats.org

    Antiquated Layout

    Slow Loading Time

    Confusing UI

    Difficult To Navigate

    Site URL

  • WOWs-Number.com

    Slow Loading Time

    Long Wait For Updates

    Information Overflow

    Unintuitive UI

    Site URL

  • Profile.WorldOfWarships.com

    Hard To Find

    Requires Account Log In

    Can Only Access Own Data

    Site URL

Initial Wireframes

A Simple, Elegant Solution for a Simple, Straight-forward goal: To Improve At Playing a Game! To achieve such goal, I have to think like a gamer: What would I want and look for if I were a gamer who is looking for data-drive analysis to help me improve? Some ideas to keep in mind.

  • Top-down approach.

  • Layered Control of Information: Do not flood user with all the information at first, rather take them step by step.

  • Intuitive designs and logical order of contents. A flow asesthics and feel.

Tools:
Figma

Preliminary Ideas:

  • Responsive UI/Efficient UX

  • Controlled Information

  • Fast & Responsive, Multi-Platform

UI Design

  • Firing Control System

  • Main Battery

  • Ship Hull

  • Propulsion System

  • Torpedo Launcher

When I first started designing custom UI elements for this project, I was confronted with questions such as what variations should I consider incorporating in my UI elements. Since there are many different ships with vastly different appearances. In the end, I went with some middle of the road approach: Take the most obvious / well-recognized symbol for each of their purpose, so that any audience would recognize what these are.

  • HSL(15%, 60%, 52%) / HSL(15%, 68%, 40%)

  • HSL(15%, 68%, 42%) / HSL(20%, 68%, 80%)

  • HSL(15%, 70%, 40%) / HSL(20%, 62%, 60%)

Color Palette

For color palette, I chosen to use a mix of colors between light brown to dark brown, with most colors sitting in between those two extremeties. The overall theme color is shades and variations of brown, and the reason behind for that choice is the sense of feeling and the sybolism: A sense of sturdy, hard, resilient, strong. My goal was to make the audience of the site think that it is reliable and consistent, and with this color pattern, I will be able to achieve effects just to that degree.