Wireframe Exercise
< 1 week
Solo
Training Buddy
Training Buddy is a fitness-focused virtual pet mobile game I have worked on since concept by myself. The game is a source of motivation and discipline for players who wish to exercise more.
This project is still a work in progress. Everything is here up except the "Designing" phase.
6 weeks+
UX/UI Designer
Here I take a port of one of my favorite games, Pikmin 2, and update its HUD and menus through wireframes. These wireframes and mock-up are done in Photoshop.
The goal is to update Pikmin 2's UI to fit widescreen and be on par with the new game while staying true to Pikmin 2's art direction.
UX/UI Designer
Role:
Problem
Pikmin 2 on the Switch is a port of the Gamecube game of the same name. Considering the original UI is stretched to fit the widescreen in the port, it doesn't seem like much time was allotted to updating the UI to fit the new HD widescreen of the Switch. On top of that, Pikmin 2 came out in 2004, and there have been two mainline series games that have come out since its release. In this exercise, I wanted to update Pikmin 2's UI to fit widescreen and be on par with the new game while staying true to Pikmin 2's art direction.
This is meant to be a love letter to Pikmin 2. It's one of my favorite games, after all. I've played it multiple times, and it was just as immersive and satisfying each time.
I don't know the constraints the Pikmin 2 team had, and I'm sure they had them, especially when it came to updating the UI. Pikmin 2's UI is almost an exact copy of the first Pikmin's UI. Also, the UI is not bad by any means. Both the first and second Pikmin games are great and successful games. My goal is just to improve good UI with more modern UI while staying true to the style of the game.
Pikmin 2 HUD
Day-Timer
Day Counter
Treasure
Radar
Sprays
HP
Pikmin Fronting
# of Pikmin in Party
# of Pikmin Out
Total # of Pikmin
This is a screenshot of the HD port of Pikmin 2 on the switch. They stretched the HUD with the change to widescreen.
In my wireframe, I made changes but kept the overall structure.
Day-Timer
I removed the day counter out of the HUD. It’s carried over from the first Pikmin game, where there was a day limit. There is no day limit in Pikmin 2, so the player doesn’t need to be constantly reminded.
Without the day counter, I can center the day-timer, which improves the speed at which the player can interpret it. Changing the timer to a dial like Pikimin 4 is an option, but I adamantly stand by the original visual. Having the “sun” slowly track across the screen promotes immersion, and it matches the dew drop theme.
Sprays
I cleaned up the button guide to 2 buttons instead of 8. Including the guide was a good call. Pikmin 4 removed the guide for the left-hand buttons, and I forgot what was assigned to them.
HP
I liked the circler hp bars because they matched the dew drop theme and the monster’s HP, but four circles felt excessive. My solution was to combine the icons and hp.
Pikmin Count
First I took out the total number of pikmin. The player doesn’t need to know that while they’re running about.
The smaller circles are the next pikmin color when the player presses the left and right bumpers. So, in the image, there’s red and a purple pikmin, so the next pikmin, whether the player goes left or right, is purple. Both small circles would have a purple pikmin.
Showing the numbers of each color of pikmin in the HUD is very beneficial. The player can tackle the game with more confidence.
Off-Screen Deaths
New to Pikmin 4, if your pikmin are dying off-screen, your teammates will tell you directly through text. Having a visual cue that pikmin are dying is very beneficial and a victory for accessibility. It alerts anyone who can’t hear the cries of their pikmin dying, whether they’re too far away or hard of hearing. However, having teammates chime in doesn’t fit Pikmin 2’s more survival tone, so I devised an alternative visual cue.
When pikmin die, ghost pikmin could emerge from the total pikmin count as the count goes down. The ghosts would float up to about halfway up the screen, gradually fading away. If multiple pikmin are dying at once, a cluster of ghosts can emerge. The color of the ghosts could reflect the color of the pikmin dying or be uniformly white, depending on what the designers prefer.
Mock up
If the UI stayed the same, this is roughly what my wireframe would look like in the game.
Pikmin 2 Radar
The "Radar" page in Pikmin 2's menu is split equally between the pikmin stats and a level map. I don't believe the two are on equal footing regarding importance. If the player is coming to this screen, they're more likely coming to see the map. So why should they take up the same amount of space?
In my wireframe, I expanded the map to cover the whole window. Navigation aids such as the compass and zoom bar are clear and present on the right. On the left, the pikmin stats are organized into drop-down menus. The player can flip through the stats with the top and bottom left-hand buttons. The drop-down menu that's open when the player resumes the game stays open when the player returns. So if the player only cares about the free pikmin, they can still easily check with one button.
Pikmin 2 Menu
I didn't feel like much needed to change when it came to the basic menu, so I didn't change much. I squished the window horizontally and I added the day count since I took it out of the HUD.
Reflection
I think Pikmin 2's layouts and UI still stand; it's just a bit outdated and not updated adequately for widescreen. Where Pikmin 2 fell short, it made it up in the art direction. Pikmin 2 excelled in world-building, arguably more so than later entries, and it's evident even in its UI. That bubble text may be challenging to read at times, but its styling is connected to the world. I still love the idea of the day timer being a miniature sun that travels across the screen. It's things like that that sell the heart of the game. In this sense, I think a lot could be learned from Pikmin 2.
Speaking of the bubble font, I believe there is a way to keep the charm of the font while gaining legibility, and figuring that out is my next step in this project. I will look at the options: the other font used in the game, editing the current bubble font, and different fonts altogether. I'll apply it to the mockup image to see how well it works.
If you want to see more research, Training Buddy's case study has plenty!
If you're looking for examples
of testing, check out AC: New Murder's case study!