bar-img

Back

Brand

Iron Maiden Legacy of the Beast

Project

Re-design Newsfeed

Summary

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

newsfeed-hero-img

My role

UI UX Design
Research
Graphic Design 
Front-end Development

Scope

Mobile Center Design

Team

Marketing Team

Tool

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

Issues

Problems I have identified

icon01
Design problems
table-img1

Tab clarity

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

Carousel

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.

table-img2

Sub-page list

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

Spacing

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.

table-img3

Back Button

All pages’ back buttons are merged into images.

icon01
Technical/ maintenance problems
table-img4

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.

table-img5

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.

table-img6

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)
icon02
Performance
table-img6

Performance overall is not bad, but can be improved.

Timeline

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.

time-table-img

General process guide

Solutions

Start with Design

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

Design

Research

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.

swot-img

Create SWOT Analysis

Design

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

wireframe

wireframe-img01
wireframe-img02
Newsfeed landing page - version 1

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. Accordingly, I mix and match big and small banners to organize the content. To place important content on big carousels and less important on the small area.
Place the tab menu on the left side so players can check out other information conveniently.


wireframe-img03
Newsfeed landing page - version 2

Design Solutions

Mockup

Event Tab

Update/ Guide Tab

Design Solutions

UI

I need to 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.

ui-kit-img

Solutions

Technical Solutions

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

ui-kit-img
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

image01
image02
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)
image04
image03
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.

html-img

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