League Of Legends

Web / Graphic Design

League Of Legends

Web / Graphic Design

Project Hero Image
Project Hero Image

Year

2016

Overview & Problem

A redesign class project for League of Legends homepage and brochure. Giving users quality experiences and access to their products and merchandise. The goal of redesigning League of Legene Brochure is to improve its visual communication and user experiences. League of Legends current website feels cluttered with a vast majority of different information, leaving many potential users confused and disorganized. Their merchandise aren’t as known because it’s hidden within several layers of subpages. So, my goal was to create a brochure that shows their product to help entice and gain more customers by exposing the products on a magazine.

Year

2016

Overview & Problem

A redesign class project for League of Legends homepage and brochure. Giving users quality experiences and access to their products and merchandise. The goal of redesigning League of Legene Brochure is to improve its visual communication and user experiences. League of Legends current website feels cluttered with a vast majority of different information, leaving many potential users confused and disorganized. Their merchandise aren’t as known because it’s hidden within several layers of subpages. So, my goal was to create a brochure that shows their product to help entice and gain more customers by exposing the products on a magazine.

Sketch

Below are images that I've brainstormed on for the potential redesign of the websites visual, concept, and layout.

Discover

Conducted online research, competitors, layouts, information architecture, problems, solutions, and user journeys. To help figure out what isn’t currently effective and what improvements or changes could be made.

Raymond Shen brainstorming sketches for League Of Legends

Website

Laid out the sitemap to get a proper sense of hierarchy and structure for the website. Jotted down important components that's necessary for the redesign of the website’s subpages.

Raymond Shen website sketches for League Of Legends

Sketch

Below are images that I've brainstormed on for the potential redesign of the websites visual, concept, and layout.

Discover

Conducted online research, competitors, layouts, information architecture, problems, solutions, and user journeys. To help figure out what isn’t currently effective and what improvements or changes could be made.

Website

Laid out the sitemap to get a proper sense of hierarchy and structure for the website. Jotted down important components that's necessary for the redesign of the website’s subpages.

Raymond Shen brainstorming sketches for League Of Legends Raymond Shen website sketches for League Of Legends

Wireframe

Wireframe

User Testing

After creating the wireframes and putting them in front of users. There were many different feedback, suggestions, confusions and insights regarding the wireframe redesign. Some of the intriguing findings were confusions on the class and roles section. I also found several different areas that needed improvements, because the elements I emphasized on wasn’t as effective than I initially thought after going through several testing.

User Testing

After creating the wireframes and putting them in front of users. There were many different feedback, suggestions, confusions and insights regarding the wireframe redesign. Some of the intriguing findings were confusions on the class and roles section. I also found several different areas that needed improvements, because the elements I emphasized on wasn’t as effective than I initially thought after going through several testing.

Designs

Final designs were made after several user testing, feedback, and suggestions with the given time frame of 3 weeks. Many of my decisions for the results and delivery are made based on research and user testing that I’ve received and collected.

Website (Live Mockup)

There were several major findings and changes I’ve made for the website redesign. The problem I faced was including all the information on one page and the spacing between elements making it feel busy and cluttered. With the final redesign, I reworked my spacing, organization, and hierarchy from the initial wireframe and user feedback.

Raymond Shen final redesign for League of Legends website
Raymond Shen final redesign for League of Legends website
Raymond Shen final redesign for League of Legends website
Raymond Shen final redesign for League of Legends website

Brochure

My brochure design for League of Legends was a bit more challenging because I couldn’t get hands on any user testing. Regardless, I did my best and emphasized the design work based on research, personas, and my user audiences.

Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine

Designs

Final designs were made after several user testing, feedback, and suggestions with the given time frame of 3 weeks. Many of my decisions for the results and delivery are made based on research and user testing that I’ve received and collected.

Website (Live Mockup)

There were several major findings and changes I’ve made for the website redesign. The problem I faced was including all the information on one page and the spacing between elements making it feel busy and cluttered. With the final redesign, I reworked my spacing, organization, and hierarchy from the initial wireframe and user feedback.

Raymond Shen final redesign for League of Legends website Raymond Shen final redesign for League of Legends website
Raymond Shen final redesign for League of Legends website Raymond Shen final redesign for League of Legends website

Brochure

My brochure design for League of Legends was a bit more challenging because I couldn’t get hands on any user testing. Regardless, I did my best and emphasized the design work based on research, personas, and my user audiences.

Raymond Shen final redesign for League of Legends brochure / magazine Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine Raymond Shen final redesign for League of Legends brochure / magazine
Raymond Shen final redesign for League of Legends brochure / magazine Raymond Shen final redesign for League of Legends brochure / magazine

Takeaways

The redesign process for the website and creating a brochure was very time intensive. Through the process of 3 weeks with little guidance on what areas needs to be designed, I was initially lost and not sure where to really start. With the actions I’ve taken by heavily investing my time on research. I’ve learned and gained a lot more insights of what areas could be improved or redesigned for the website. Throughout the process I’ve gained better ways on how to design more efficient and effectively.

Takeaways

The redesign process for the website and creating a brochure was very time intensive. Through the process of 3 weeks with little guidance on what areas needs to be designed, I was initially lost and not sure where to really start. With the actions I’ve taken by heavily investing my time on research. I’ve learned and gained a lot more insights of what areas could be improved or redesigned for the website. Throughout the process I’ve gained better ways on how to design more efficient and effectively.