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 Website Redesign?
EGL is growing rapidly, and needs to implement new features which the current website has no room for. They are seeking an updated user interface which follows best UX practices. The current website 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.
*Note that this is my current work in progress, I'll be updating steadily over the next few weeks!
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.
Event results are displayed in real-time. The primary audience is middle school and junior high students, but the goal was to design a mature and communicative bracket which would appeal to a broad audience.
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.
The admin dashboard has a variety of different functionalities. My primary role was to design various assets such as drop down menus and input fields which can then be implemented across other screens.
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 programs 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.
07 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.
08 Next Steps
This project is ongoing. My current areas of focus are:
● Finalizing a style guide.
● Designing other pages and art assets as needed.
Thanks for taking a look at my current project! Feel free to check back over the coming weeks to see my progress!