Gosu Gamers
Gosugamer is designed for e-sports enthusiasts, offering comprehensive real-time content including game news, players, teams, leagues, tournaments, and live broadcasts. After taking over the website's development and design, I restructured its architecture, redesigned the website, and created a new Gosugamers app.
Service
-
Information architecture
-
Design system
-
UI/UX design
-
App Design
Support Device
RWD
APP
Designer
Product Designer
Jin
My Role
In this project, after taking over from the previous product owner, I analyzed user pain points and restructured the website's information architecture. I defined detailed RWD, created a new website style to match the target users, and designed layouts for key charts and data content. Additionally, I designed a new Gosugamer app to enhance mobile user experience and behavior.
Workflow
01
Analyze
previous platform.
02
Problem statement
03
Plan new website architecture
04
Define UI flow & mockup
05
Design New App
Analyze Previous Platform
-
On the same webpage, different sections followed different visual flow rules. For example, A~D followed a left-to-right visual flow, while E~J followed a top-to-bottom flow, causing user confusion.
-
On the same page, A.B.D. tabs had similar positions and functions, leading to confusion for new users.
-
Each section had its own button colors and shapes, resulting in an inconsistent UI experience.
Point of View
New users entering GosuGamer need a website where information is easy to search. The current interface often causes them to get lost in its pages, making it difficult to find the necessary content.
Plan New Architecture
I created wireframes for both the desktop and app versions to confirm the new structure, layout, and usability with various stakeholders. This new structure includes many features requested by stakeholders and offers better scalability for adding future features. It also allows engineers to start early development on the new functionality.
Plan Visual Flow
I planned the visual flow of the sidebar functions from top to bottom. For the main content area, I organized the visual flow in the common pattern: left to right, then top to bottom.
Structure the Navigation
I moved the main navigation bar to the sidebar, allowing users to intuitively select their desired games. The sidebar provides more space for key features and extensions, optimizing RWD space usage. The sub-menu functions are placed under the main page banner, enabling easy content switching for users.
Main Visual for Game Pages
Each game page features its unique visual and logo as the hero banner, allowing players to easily recognize the page they are on. This enhances the gaming atmosphere and adds visually appealing elements to the esports information site.
Enhancing Information
Information page redesign, I restructured the information display using color, and left-right and top-down arrangements to present real-time match status. This allows players to quickly grasp the competition details at a glance.
App Design
I have also redesigned the new GOSU Gamers interface, aligning it with the app's operational model and guidelines. The new structure and user experience flow are tailored to enhance information display, making it more suitable for mobile users' interaction and viewing experience.
How Might We
As a new esports game user, I want a clear and simplified information website so that I can easily find game information and watch more content.
Send me a message or connect on LinkedIn, I’d love to chat about new opportunities or anything design related!
Mobile : 886 91877183
Email : guojin.studio@gmail.com
