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.
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.
All pages’ back buttons are merged into images.
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.
Per event, designers have to create 24 banners and copy-paste long contents into 8 post pages.
Performance overall is not bad, but can be improved.
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
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
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
Every day the marketing team releases a package of events. Each event's package has a main event and 1-3 following smaller events.
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.
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.
Briefly apply game UI on the mock
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.
Make easy to maintain and easy to learn for person not familiar with WordPress
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)
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
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.
By using CSV importer plugin, user can import content automatically
Currently the image sizes are not in right size, therefore loading bigger images cause performance issues. Images need to be updated increase loading performance.
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