01 The Situation
What is Elite Gaming Live?
Elite Gaming Live partners with schools on the east coast to bring organized after school eSports leagues, STEM education courses, and other video game activities to students who would otherwise have no after-school programs of interest.
Why a Redesign?
EGL is growing rapidly, and needs to implement new features which the current platform has no room for. They are seeking an updated user interface which follows best UX practices. The current platform also does not support different breakpoints consistently.
The website will need to accommodate new features and mature aesthetically while still remaining true to current brand guidelines. Stakeholders would like to improve interactivity and ease of use. I will create the necessary UI assets, information architecture guides, and other design deliverables in order to bridge the gap between design and development.
Sketch, Illustrator, Photoshop, and InVision will be used to create assets and wireframes. Zeplin will be used in order to convey specific design specs and spacing to the development team.
02 Wireframing the Profiles
At the request of stakeholders, we chose the school and student profiles as the first section to be updated
The first step was assessing how the current website was laid out. Breaking down the site by sections allowed me to determine how to adjust the layout in a way that improves usability.
Sketches and Early Wireframes
I took to sharpies and paper to investigate possible rearrangements of elements such as the news section, and then moved to low fidelity wireframing in sketch using simple gray scale elements to represent content. This began the feedback loop driven process of submitting designs to stakeholders and adjusting based on input and testing.
Establishing the Grid
I coordinated with the development team in order to determine what grid system would be most useful when uploading final design deliverables via Zeplin. After learning that the website would be developed with flexbox, a responsive, mobile first, approach which relied heavily on EM measurements, I created a grid wherein each square was exactly 1 em tall and wide (which translated to 16px via sketch). This would allow the development team to reference placement and sizing quickly by simply referencing how many grid spaces elements were placed from each other.
My low fidelity wireframes provided a solid foundation to continue the process of design, feedback, and redesign. The input of the art director, intended users, development team, marketing members, and other stakeholders was considered.
03 Icons and Badges
EGL needed new icons and student/school achievement badges. The designs would need to communicate their message concisely and entertainingly. I created a simple mood board with previous badges, examples of the desired new direction, and inspiration. I then presented multiple versions of the various badges to stakeholders, allowing them to guide the design process via iterations.
04 Bracket Design
Event Creation and Management
EGL after school events consist of ranked video game tournaments. The events are created on iPad tablets, and must allow for the recording of wins, losses, fouls, and highlights. An especial priority was the improvement of usability over the old design. I made sure all possible interactions for each bracket were contained in one "meatball" menu instead of the previous approach of spreading them across multiple buttons.
The project lead had a tight budget and timetable, but also an increasing number of features they wished to see implemented. It became clear that there that there was not yet a visualization of the information architecture. The project lead would request buttons or features to be added to screens, but the impact these features would have on the overall task flow had not been planned. I had to take charge in terms of ensuring interactions were fully mapped out before we moved on to wireframes and user interface assets.
I communicated that before we created additional screens, I would need to create task flows that mapped out what screens were needed and the points they would interact with other parts of the process (such as creating the bracket, launching the bracket, and launching the bracket display). This allowed the developers and myself to better estimate what features could be feasible implemented in the time we had. This in turn allowed the project lead to better understand the overall scope of the project.
05 EGL Academy
Student Dashboard and Lessons
EGL students are able to complete STEM education lessons via the EGL Academy dashboard. The dashboard displays the possible "careers". Once the career is selected, space must be afforded for multiple lessons and questions which can take on a variety of forms. I designed a user interface which facilitates ease of use and would be easily implemented across multiple breakpoints.
Ideally, this system would have been tested on the actual users, but because they are all underaged students, the project lead made clear they would not be available for testing.
Instead I created a survey to be filled out by coaches, who could give insights on to where they felt the process could be improved. A heavily requested change was clearer indicators on if a lesson was in progress, had been completed, or was yet to be started. Thanks to the input generated by the survey, I was able to improve usability despite a shortage of time and lack of testing resources.
06 Admin Dashboard
A majority of the features that drive the Elite Gaming Live platform are controlled from the admin dashboards. Coaches can add students, lessons, badges, and create events. On the previous platform, this process was largely guided by EGL staff in a "white glove" approach. This makes scalability a challenge.
The dashboard controls the majority of features that make the Elite Gaming Live platform viable and useful. Since the project lead is re-creating the backend of the platform from scratch, there are a great number of features that must be brought over, and little of this process has been plotted out. There is also little time to test the usability of these flows.
I started with task flows to to form a team consensus on what screens would need to created. The lack of testing time meant that we had to make assumptions, but I utilized tree testing to identify potential areas of improvement. Thanks to the tree testing, we created a button where many common tasks (such as creating events) could be accomplished with less effort on the part of the user.
While the majority of pages designed so far were intended for students and coaches already involved in the program, the homepage and its immediate children pages are intended to inform parents and school officials of the EGL program benefits. A uniform navigation was developed in order to assist user orientation across the platform, but the homepage was designed with a more "mature" feel by using a less playful font than the student sections.
Potential new clients needed to quickly see quantitative results via simple infographics and a concisely delivered mission statement.
08 Clickable Prototype
In order to better convey the intended user journey to the developers and other stakeholders, a clicakble prototype was created via InVision to demonstrate the more complex task flows such as logging in and an onboarding sequence of the student dashboard.
● League Explanation
● Log In Taskflow
● Student Dashboard Onboarding
● Parent Screen
Please note that much of the content, especially on the homepage, is dummy text meant to be filled in for the final product.