Ratchet & Clank: Before the Nexus
This was an infinite runner mobile app for the Ratchet and Clack franchise released on Android and iOS. As a lead on this project, I was responsible for various visual aspects along with the UX assets seen below. The design style was based off the parent application so maintaining consistency and standards between products was a high priority. Playtesting was conducted in-house to iterate on design, playability and functionality.
Ratchet & Clank: Project Overview
My Role:
Lead Artist
Team:
Team Size:
Varied 12-18
Duration:
4 months
Deliverables:
I was responsible for Flow Charts, Wireframes, Play Testing Results, Iconography, and Final UI Design Review, Textures.
Process:
Discovery
Research
Evaluation of product
Technical limitations
Technical requirements
Define
Flow diagram
Ideate
Sketches
Wireframes
Brainstorming
Play testing
Game mechanics
Design
Final Design & Launch
Mock ups
Visual design consistency
Play testing
Texture flats
UI review of levels
Tools:
Accomplishments:
What didn't work:
I was able to solve the limitations on the texture usage issues by researching and talking to programmers to find out the technical limitations, and what bandwidth was allotted for texture sizes. I ended up setting up one 4096 flat for each level with a 2048 persistent texture flat for the entire game. The persistent flat contained characters, collectables etc. The organization of this texturing process was set up so all level designers could access the sheet and add to it as they created more textures. I would then organize each sheet to allow for room for addition textures that came up. This set up made the artists more confident in the process since before I had taken it over it was very confusing.
Challenges:
One of the bigger issues we ran into during the development, was brought to light through the play testing sessions. There were issues with the speed of the character in the levels, the number of obstacles, and the frame rate.
The biggest challenge was the short time frame, resulting in minimal time being spent on the UI. Even though we had to match the parent console version, we still we not able to extensively flush out the UI workflow.
Ratchet & Clank: User Flow Chart
Ratchet & Clank: Wireframes
Wireframes were created to explore the designs and then applied as a base for a user flow chart. The wireframes went through multiple iterations and the final direction can be seen below. Multiple playtesting sessions were conducted over the coarse of the development, results were discussed, solutions were explored and then retested.
Ratchet & Clank: Play Testing
Typical Questions asked:
1. Did you feel any weapon was over powering
2. How was the speed
3. How did you feel about the look of the levels
4. Did you know what to do
5. Was anything confusing
6. Did you know how to use the controls
7. Were you able to learn how to play quickly
8. What did you like
9. What would you do different
10. What were your thoughts about the game
11. What were your thoughts about the game play
12. Was there enough time to complete the task
13. What is the objective of the game
15. Is there any information that would have been useful to you before starting
17. Was it fun
Weapon Specific Solutions:
Tapping on the enemy to kill it was only major visual issue not solved. Since the users interaction to shoot the enemy was to tap on them, their hand and fingers would sometimes block their view. One reason this wasn’t fixed, was due to the fact that many users used both thumbs to tap the enemies which allowed for visibility in the middle of the screen if they chose the thumb that correlated to the side the enemy was on. Another reason was that the users didn’t express much feedback about it being a big problem.
Types of Issues and Solutions:
Issue:
At first the combination of jumping and shooting enemies resulted in complaints of it being too hard.
Solution:
These two actions (jumping & shooting) were divided into separate phases of game play. A level focusing on the rails with jumping obstacles and an enemy level on the ground (off rails) with a focus on battles. This made the game even better with 3 total phases of gameplay evolving from this issue for the users to interact with. Phase one was obstacles and maneuvering. Phase two was enemy battles. Phase three was the boss battles. These phases were separated with a transition tunnel between them to give the player time to prepare for the next level and for the game to have time to load the next level.
Issue:
The speed of the game was problematic.
Solution:
We ended up having to reduce the speed and the obstacles/jumps were spaced farther apart. After these changes were made, we tested again in-house and made tweaks until we felt it was ready for user testing. The final play test resulted in more positive feedback about the speed being at a good pace where it was challenging but fun.
Ratchet & Clank: Iconography
Some of the icons required for the game were needed for new weapons, skill points, achievements, gadgets and more. A few of the icon designs can bee seen below along with their location in the UI.
Ratchet & Clank: Iconography, UI & Final Design
• Rail challenges offered 3 rails in an urban environment with obstacles the player needed to avoid while collecting assets.
• Transition tunnels went to one rail so the player could collect more assets and take a brake before the next level encounter.
• Enemy Battles landed the player on solid ground in an outdoor environment with 3 paths to transverse while focusing on attacking the enemies and avoiding some obstacles.
• Boss Battles also offered player a ground experience but with 3 lanes in an arena type environment.
Some of the icons required for the game were needed for new weapons, skill points, achievements, gadgets and more. A few of the icon designs can bee seen below along with their location in the UI.
The overall look of the levels was geared towards making sure the players at a quick glance knew what to expect as they entered each level. By implementing a specific theme and color scheme, a visual distinction was achieved.
