Introducing
Wows.stats.net
An Innovative, Responsive, Multi-Platform website designed to augment & enhance your gameplay experience by helping you improve your performance through data driven analytics.
Minimally Viable Product
Homepage:
AI-Chat Interface:
Default State:
After Mouse Click:
Major Points:
WIP (Tehnically Frozen) as of this point in time.
Design was translated from Figma frames and prototypes to code in Visual Studio, with HTML/CSS/Typescript used along with common Frameworks.
Intelligent ChatBot powered by advance LLM model from OpenAI, GPT-3.5 Turbo.
Further improvement is needed on color tuning, adaptive background control, horizontal scroll items, etc.
Contrast on certain visual elements, especially pertaining to ship icons and their surrounding environment, seems to be lacking in scale.
Design Process:
I chose to work in an iterative approach, a very common one in UI/UX and interaction design. I first conducted sufficient market research, then analyzed all my potential competitors, then brainstormed some of the first intial wireframes. After that, I took my ideas to Figma, and created other necessary assets such as color palette, UI elements, before I start to put those ideas into a functioning product through codes in Visual Studio. I chose to only work on the first(home) page and relevant pop-up windows during this phase and will start working on other relevant secondary pages soon.
Video Demonstration:
User Research & Background
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 some of the existing sites are lacking in many aspects. For instance, many are slow and unresponsive, while others have legacy UI or no human centered designs at all.
My Account Profiles:
Methods: Conducted through a popular online forum / community for this game utilizing anonymized survey forms. No identifying personal information was collected
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
-
WOWs-Number.com
Slow Loading Time
Long Wait For Updates
Information Overflow
Unintuitive UI
-
Profile.WorldOfWarships.com
Hard To Find
Requires Account Log In
Can Only Access Own Data
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 pink 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 just that.