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.
Issues
Problems I have identified
Design problems
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.
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.
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
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.
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.
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
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
UI
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.
Solutions
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