top of page
Landing page.jpg

HUMBER E-SPORTS
JOIN US

Sector                  Humber college IXD STUDIO 1 5105

My role                 UX DESIGNER/ CLASS PROJECT

Project time        4 Weeks

Challenge           Create a mobile version & desktop                                                             version of how to add engagement for                                                       users to join Humber Esports.

HUMBER E SPORTS

Esports involves structured, competitive multiplayer video gaming, where professional players compete individually or as teams.

INTRODUCTION 

HumbXperience is an innovative, interactive student engagement platform developed by the Humber Esports department. Through this app, you can earn 'experience' points, connect with like-minded individuals, participate in exciting departmental initiatives, and explore your passion for esports alongside peers from various disciplines, all with the support of Humber's experienced faculty.

Earn points, build connections, and participate in extracurricular activities designed to help you relax and unwind!

HOW TO GAIN XP

You can earn XP points by participating in a variety of activities, including but not limited to:

  • Signing up with HumbXperience

  • Attending department-hosted events

  • Registering for and participating in esports tournaments

  • Engaging in challenges

  • Connecting with other players

  • Sharing events on social media

  • Purchasing merchandise from the official store

HOW TO USE YOUR POINTS

Redeem your hard-earned XP points for:

  • Discounts on Humber Esports merchandise

  • Opportunities to win exciting prizes and exclusive rewards

MOOD BOARD

Moodboard.jpg

VISION

 A forward-looking strategy aimed at enhancing the future state of user experience, emphasizing its evolution and the underlying rationale driving this progression.

VISION

To design a website that enhances the student life experience at Humber through esports engagement, it’s essential to focus on user-centric design, seamless functionality, and content that drives interaction. Below is a framework for the website:

1. Homepage

  • Hero Section:

    • Visually dynamic banner showcasing the latest esports events and student engagement activities.

    • A clear call-to-action (CTA) buttons: “Join Now,” “Explore Events,” “Earn XP.”

  • Navigation Bar:

    • Home | About Us | Events | Teams | Shop | XP Leaderboard | Community | Contact Us

  • Quick Access Links:

    • Featured Events, Tournament Highlights, Live Streams

  • Student Testimonials/Quotes: Showcasing how esports positively impacts student life.

  • Social Media Links: Instagram, Discord, Twitch, Twitter integration.

2. About Us

  • Mission & Vision:

    • Detail Humber Esports’ mission to enhance student engagement through competitive gaming and recreational activities.

  • Team Overview:

    • Profiles of the department staff, coaches, and key esports players at Humber.

  • Esports Program:

    • An overview of the varsity program and its recognition by Esport Canada.

3. Events Page

  • Upcoming Events:

    • Interactive calendar showing upcoming tournaments, casual gaming nights, and community events.

  • Event Registration:

    • Seamless registration for events with integrated sign-up forms.

  • Previous Event Highlights:

    • Video highlights, player interviews, and recaps of past events.

4. Teams

  • Team Rosters:

    • Information on all Humber esports teams, their achievements, and player profiles.

  • Join a Team:

    • Information on tryouts, upcoming seasons, and how students can get involved.

  • Team Achievements:

    • Trophies, awards, and tournament victories.

5. HumbXperience (XP Integration)

  • How to Gain XP:

    • A detailed guide on how students can earn experience points through participation in events, buying merchandise, and engaging on social media.

  • XP Leaderboard:

    • A live leaderboard that ranks students based on their earned XP.

  • Redeem XP:

    • A section to redeem XP for prizes, discounts on merchandise, or exclusive experiences.

6. Shop

  • Esports Merchandise:

    • Humber-branded esports apparel, accessories, and collectibles.

  • Discounts for XP:

    • Option to apply XP points for discounts on purchases.

7. Community

  • Discussion Forum:

    • A space for students to discuss strategies, upcoming games, and community news.

  • Player Directory:

    • Profiles of Humber esports players and their game specialties.

  • Esports News & Blog:

    • Articles, news updates, and insights into the latest trends in gaming and Humber esports.

8. Contact Us

  • Support & Inquiries:

    • Contact forms for general inquiries, event details, and student support.

  • Join the Community:

    • Invitations to join the Humber Esports Discord or other gaming platforms.

9. Additional Features

  • Live Stream Integration:

    • Real-time Twitch or YouTube streams of Humber esports events.

  • Mobile Optimization:

    • Ensure the website is fully responsive and accessible on all devices.

  • Accessibility Features:

    • Consider accessibility features like text-to-speech, color-blind options, and scalable text.

This site would serve as a dynamic hub for students, providing not only esports content but also fostering a sense of community and engagement at Humber.

LOW FIDELITY WIREFRAMES 

This is the home page when users enter
the E Sports website
home page.jpg
The background while contains some content
of the games that are presented in E Sports. Then the user clicks on login.
Then the user wants to look at the E Sports
store to see what is available, what E Sports
is selling.
The user wants to go to the events page. where
they can check all events that are held at E Sports
as well ass the result, teams of those events plus
upcoming events

HOME

LEADER BOARD

The background while contain some content
of the games that are presented in E Sports
home page-1.jpg
When user clicks on log in, the user will be directed
to a login page where they have to enter their
username,password and Student number
The user decides to go to Experience page
where the user can check their experience
points status and information.
​When a user fills out all the login credentials
they are directly sent to their profile page
In settings users will be able to modify their profiles,
accessibility, mode color and modes

EVENTS

STORE

MID FIDELITY WIREFRAMES 

HOME

Group 632113.jpg

EVENTS

Group 632117.jpg

XP PAGE

Group 632118.jpg

Plans

Focus Areas and Objectives:

XP Collection and Gamification of the App:

  • Award XP points for the following actions:

    • Signing up for the app

    • Registering using a referral

    • Volunteering for esports events

    • Participating in esports events

    • Watching events (registration required)

    • Winning games, quizzes, trivia, or competitions

    • Watching Twitch videos accessed through the app

    • Sharing esports events on social media

    • Purchasing items from the store

Goal 2:

  • User Goals: Foster community building by connecting individuals with a shared interest in esports and gaming, providing opportunities for interaction with like-minded peers.

  • Business Goals: Facilitate direct community engagement, encourage participation from new users, and ensure the long-term sustainability of the platform.

Focus Areas and Objectives:

Integration with Humber’s E-Sports App:

  • Integrate the XP app/site with Humber’s GoIn app to facilitate easier connections among students with similar interests.

  • Enhance the visibility of the Humber GoIn app and encourage broader engagement through a unified platform.

JOURNEY MAPS 

Hammer's Journey map (2).jpg

Amreen, a student at Humber College and an esports enthusiast, heard about an esports team at her college and felt interested in finding details about the team. She remembers seeing some posters on campus, but they didn't have detailed information about Humber Esports. Now, sitting comfortably at her desk, she browses the Humber Esports website hoping to find all the information she desires and to register to attend future events.

Before entering into the events page, something catches Amreen's attention in the middle of the screen: a login prompt. Despite her excitement to register and log in, she takes her time exploring the initial pages such as "Home," "Events," "Leaderboard," "Store," and "XP," familiarizing herself with the site's offerings and functionalities. She notices the background showcasing the array of games Humber Esports participates in, and appreciates that registration isn't necessary to access all the website's features.

After reading, Amreen finally navigates to the events page, where she finds a comprehensive schedule of upcoming events organized. The top menu provides access to past results, details of upcoming matchups, and specifics of the next event. Additionally, a tab labeled "Leaderboard Hub" catches her eye, making her curious due to a status related to it on her profile.

To register for an event, Amreen discovers she needs to first register for the website, providing personal data like her Humber ID. Upon successful registration, she's excited with her profile page, displaying familiar data from the games she follows: profile information, experience stats, win-loss records, scores, levels, team affiliations, fun facts, favorites, and games played. Excited by the fact of not only spectating but also engaging in gameplay with like-minded individuals, she notices the option to customize her profile theme to her favorite game, enhancing her browsing experience.

As Amreen explores further, she finds information about users with the highest experience levels and how to earn these points. She's motivated to learn that she can use her accumulated experience to purchase items and unlock rewards as she levels up, including discounts on Humber merchandise. These features intensifies her willing to participate, as she realizes the advantages of attending and engaging in events on the Humber Esports platform.

Intrigued by the possibilities, she proceeds to explore the Store page, which showcases options for acquiring items both with real money and through experience points earned via user engagement. With each discovery, Amreen's enthusiasm grows, realizing that she can satisfy her passion for esports while earning numerous benefits from active participation.

USER FLOW 

Group 1.jpg
Group 1 (2).jpg
Group 1 (1).jpg

INFORMATION ARCHITECTURE PROPOSED STRUCTURE

Group 1 (3).jpg

INTERACTIONS

  • Login Page:

    • Login Button: Includes animation on hover, as implemented by Breno.

    • Logo: Changes color on hover; clicking it redirects to the Esports website home page.

  • Landing Page:

    • Call-to-Action (CTA) Buttons: Clicking a CTA button triggers a pop-up displaying information on gaining and redeeming XP.

  • Leaderboard Page:

    • Scroll Bar: Implement a functional scroll bar if necessary.

    • Row Highlighting: Rows on the leaderboard will be highlighted when the mouse hovers over them. User’s own row will be displayed in a distinct color.

  • Events Page:

    • Row Scaling: The row currently in view will slightly scale up on hover.

  • Profile Page:

    • Avatar Options: Hovering over avatar options will highlight the available choices. Clicking an avatar option will change the profile picture to the selected avatar.

  • Overall Frame (Present on All Pages):

    • Chat Box: Changes to a clickable box with a cursor on hover. Color change is also acceptable.

    • Friend Chat: Clicking on a friend in the side panel will open a chat window with that individual.

    • Top Navigation Bar: Icons will display their names on hover or when the mouse moves over them, including options like Profile, Events, and Leaderboard.

HIGH FIDELITY PROTOTYPE DESKTOP 

Final - landing page with login button.jpg
Final - About HumbXperience.jpg

HIGH FIDELITY PROTOTYPE MOBILE

©2024 by andresgraphics

bottom of page