Ride with Renewi: browser game
Project
A game that can educate potential clients about Renewi and recycling in general
Problem
To be able to integrate a quiz system into the game and have it in 3 different languages. The client is also unsure what platform the game should be built in
Solution
To create a game with different staging levels and that the user can play it across different screen sizes
Roles
UX design
UI design (assisting)
Interaction design
Prototyping
The client had a clear vision that they wanted a game and had wanted other goals in mind. It was up to our internal team to ideate on how to make a fun engaging game to educate players with the client's brand in mind.
The internal team had relayed to me on the different levels they wanted and they needed quick visual prototype of how the game should behave.
My role was to help create from a low-fi prototype to working with another art designer, who created the hi-fi assets so that I can convert it into a hi-fi prototype before it gets signed off ready for deployment build.
Video demonstration of browser game with instructions
Video demonstration of browser game with live gameplay and quiz
User goal
To ensure that the game is playable on a browser and/or phone device. It must contain quizzes that educates the players, is available in 3 different languages and shows the final score in the end.
Research & Ideation
Since the ideation of what happens for each round was already decided by the internal team, I explored their ideations a bit deeper by creating a userflow to ensure all pathways are covered as well as creating wireframes to find any pain points with the initial ideations. A low-fi prototype version must be made immediately to obtain both internal and external feedback.
Problem solving
As mentioned above, a userflow was made to search for all possible pain points for the game paths. This helps on deciding at which point of the game should the system behave and what screen should show up to reflect feedback to users (similar to storyboarding).
To showcase the interactivity of the project in a clear manner, I had used Adobe XD to show the animated transitions for each journey.
Sample user flow diagram showcasing the game and paper wireframes of the ideated layouts to look for pain points
Lo-fi wireframe layout for each round (The last wireframe showcases a redesign of the above wireframe after potential pain points)
Lo-fi wireframes for all user flow layouts
Designs
Once the low-fi prototype got approved, other team members had either created hi-fi assets or in the case of developers, they started to build the behaviours in place.
My role then involves changing the low-fi to hi-fi assets for the prototype, language checks, help amend a looping background asset for the developers, designing their main game logo screen and a small app icon for smartphone app store purposes.
Showcasing lo-fi wireframes are in the process of being built into hi-fi wireframes by the art director
Sample hi-fi designs after user experience feedback
Game asset design of the title screen and app for app store by me
Reflections
This was the first project I took on as a freelancer with Wardour. Some of the later amends were dealt with when I had become a permanent colleague with them.
This project was made during tight deadlines and also one were I get to ideate a small part within the team.
The game is probably still be playable as of July 2024 here. (It is sadly not made within a https page)
See another project…
Hobby Hunter Neoluce: illustrations for Youtuber
Hand-drawn digital illustrations created for a Youtuber, created with green screen in mind.
