Iron Maiden Legacy of the Beast


Re-design Newsfeed


The project started with observation of existing newsfeed. I had to find problems and give solutions on what things can improved in the future.


My role

UI/UX Design
Graphic Design 
Front-end Development


Mobile Center Design


Marketing Team


Design: Photoshop, Adobe XD
Development: WordPress (PHP, HTML, CSS, etc.)


Problems I have identified

Design problems

Tab clarity

The tab does not look like a tab (it looks like another event post thumbnail).


The carousel image is cut off, so users have to scroll down carousel. The image text guide did not concern about the long text. Also, there is useless empty space because the images size are not measured.


Sub-page list

No title or notification on sub-page and back button merge with images.


All pages do not have enough spacing between images, so it all looks like one image. Also, useless empty space.

Too many graphic elements

Too many heavy graphic elements, so hard to focus on one thing. Also, it can cause slow down loading speeds.


Back Button

All pages’ back buttons are merged into images.

Technical/ maintenance problems

Complicate to use

The person who creates the post have to create 8 posts and upload carousel banner separately.

Categories are mixed up

The categories are mixed up. The Event, Guide, icon, update, etc. If the user clicks the wrong category, they have to delete and create a new post page.


The vulnerable back button

The back button crash with a minor mistake. (If accidentally click two categories and publish, and remove the category the back button does not work properly. Therefore, users have to delete the post and create it again)

Too much plugins and hard to maintain

To upload one image on the carousel users have to click more than 7 times, and we have 8 different languages. So there is a lot of steps, therefore easy to make mistakes.


Time consumption

Per event, designers have to create 24 banners and copy-paste long contents into 8 post pages.

  • Come up with one design
  • Create three different types of banners; Main banner, thumbnail banner, carousel banner.
  • Translate into 8 languages
  • Copy-paste the contents inside of WordPress (8 times)

Performance overall is not bad, but can be improved.


Approach on the redesign

Taking into account all the information gathered from the research, I decided to address the concerns and needs for the user. Collected insights served as a base to sketch wireframes, build UX design. Then planned how to rebuild the site using WordPress.


General process guide


Start with Design

The main design goal is to make it affordable / intuitive / modern



Research other competitor’s games to read now a day's trend design of what kind of layout users feel comfortable with. By downloading 15 different kinds of RPG games, I found many games use tabs to organize the contents and use the HTML text format font instead of using graphic fonts for clarity and readability.


Create SWOT Analysis


UX direction

  • Use tab to organize the content
  • Add tab active notification, so users know which tab they are looking at
  • Reduce graphic font and use HTML text format
  • Make carousel fit inside phone screen
  • Show as many events as much as possible for users
  • Make enough space between content so instantly users can understand that two images are two different images.
  • Relocate the button where it can stand out
  • Make users comfortably use the page
  • Limited banners re-sizing process (reduce work of resizing banners)

Design Solutions


Nowadays new phones have a notch on the side and have different phone screen sizes (ex 4:3 ratio). If designers want to use full screen, they need to test mockups with a variety of sizes. The current News Feed carousel banner has cut off the problem because it did not consider a variety of mobile phone sizes. To solve this problem, I use the popup to make enough space on the button and sides.
Every day the marketing team releases a package of events. Each event's package has a main event and 1-3 following smaller events.

Newsfeed landing page - version 1

This version is a mix and matches big and small banners. The important content places on significant carousels and less important on the small area. The user clicks the thumbnail to see more detail of the individual event. The tab menu locates on the left side, so players can check out other information conveniently.

Newsfeed landing page - version 2

The Tab menu locates on the top, so players can navigate easily what they want to see. The list of events is on the left side with the text, so the screen does not move when the user clicks one of the lists. The information shows on the right side.

Design Solutions

Color Mockup

Briefly apply game UI on the mock

Design Solutions


Pick the colors from the game theme, so not many options to choose. I try to use solid and solid dark colors from the game because the event banner images and texts need to stand out.



Technical Solutions

Make easy to maintain and easy to learn for person not familiar with WordPress

Reducing Banner resizing process

Currently, the design team makes 24 banners per design but I would like to reduce those banners to 8 per design. (ex. Make 1 banner per design and translate it into 8 languages)
If we follow the text guidelines, we can use one image in three ways; full-size banner, rotating main banner and thumbnail banner.
For rotating/ thumbnail banner, trim the sides of banners by using CSS and keep the same ratio. (ex. check reference image)

Make easy to maintain and have less confusion

The main goal is make the site easy to learn and maintain for not expressed WordPress editor.
Reduce dependance on plugins or reduce plugins usage to minimum, because some plugins crash if misused and have restrictions. Additionally it helps to decrease the loading time.
Organize the posts by contents

Replace carousel plugin to plain PHP version

Now uploading carousel images on the site is very painful, because user has to click more than 10 times to upload single file. Instead of that, I am propose to create a ‘Custom Field’ inside of the post and implementing using PHP. Therefore, the user does not have to open multiple pages and click too much while they upload the files.

  • Carousel image input
  • Carousel number input (ordering the slide. If user put #1, the #1 banner will show first)
  • Carousel title input (Title and subtitle only if we are using HTML text format, otherwise it can be omitted.)
Reducing copying nad pasting

By using CSV importer plugin, user can import content automatically

  • Reduce the grammar mistakes
  • Reduce the used time
  • More options to add CSS (styling)
Improve Performance

Currently the image sizes are not in right size, therefore loading bigger images cause performance issues. Images need to be updated increase loading performance.

Update Back Button

Problem: Currently the back button is very vulnerable. Easy to break with minor mistake so uses have to delete the post page and create it again.


One of the solutions to improve the functionality of the back button is adding PHP code instead of using plugin and heavy graphic image.

Add one line of back button code inside of PHP