"Liga dos Tremoços" – app mobile game
UX / UI case study (2014)
About the game
The Lupines League is a mobile game whose aim is to divert as many lupins from a glass of beer, which needs to be emptied regularly. Players who reach new highs can take and share selfies with friends. Our biggest challenge has been to create an addictive, socially stimulating, and simple game at the same time.
Initial planning with the definition of goals and game steps. For each stage we defined time, allocation of team elements and resources required.
All of the team elements were responsible for all stages of the process: briefing, UX design, UI design, prototypes and game animations, testing and validation, promotional video and final presentation.
There were two lupines glued to the wall ...
... It rains ... and one falls!
... It rains ... and one falls!
The Game
The idea for the game Lupines League came from a brainstorming session for a webdesign academic project. The challenge: to create an interactive and digital experience. The theme was free... it just had to be creative.
After many options, we explored an idea based on a joke with lupines - a simple game for mobile devices (design), whose main purpose was to divert as many lupins from a glass of beer as possible.
Since beer and lupines are elements present in friendship moments, the game should have a social component, reinforcing the sharing among its users.
Planning
The first step was to create a timetable with all the key steps and deliverables to produce.
Competition Analysis
For the development of the concept, we have explored our direct competitors - mobile games (eg. Flappy Bird), and beer brand promotional sites (eg. Heineken, Super Bock).
SWOT Analysis
Based on our research, we have identified the strengths and weaknesses of the concept.
Definition of target audience
Based on the concept of the game, we have identified young adults and adults (from 18 years old upwards). The target was selected based on the following factors:
- minimum age for alcohol consumption (equal to or greater than 18 years);
- price of beer and consumption habits of alcoholic beverages by university students (reduced price and easy access to the drink in question);
- possession of a smartphone or other mobile devices, level of knowledge of use and internet access.
Interaction Experiences
To conceive the interactivity of the game, we tried to recreate the environment in a real context. To do this, we have repeatedly shot and analyzed everything that happens when a lupine falls into a beer glass (with foam).
The tests were performed and filmed in a photography lab and in a garden at Cais do Sodré.
The tests were performed and filmed in a photography lab and in a garden at Cais do Sodré.
We also took the time to take pictures to our classmates to make the "cards" and selfies of the game.
Definition of game rules and features
Context:
Lupines falling, toward a glass of beer.
Objectives:
- Prevent lupines from falling into a glassof beer, bypassing them;
- Toss the largest number of lupins in the fall, in the shortest possible time;
- Share on the social network the moments of victory and conviviality.
- Toss the largest number of lupins in the fall, in the shortest possible time;
- Share on the social network the moments of victory and conviviality.
Game Modes:
- Singleplayer
- Multiplayer (unlimited number of players, simultaneously, each in a different device).
- Multiplayer (unlimited number of players, simultaneously, each in a different device).
"Game over":
- Singleplayer: when the player leaves the first lupine fall into the glass;
- Multiplayer: when the last player leaves the first lupine fall into the glass.
- Multiplayer: when the last player leaves the first lupine fall into the glass.
Additional Options:
- Photographic record of the winner of the game;
- Share moments of victory on social networks;
- Share moments of victory on social networks;
Prototype of the paper application
Having defined the rules and possibilities, we designed on paper the screens corresponding to each step, with the representation of their interaction. With these low-fidelity wireframes, we created an interactive prototype with the POP3 application.
Wireframes
From the tests performed with the paper prototype, we made some changes in the rules and scenarios of the game. We re-created the wireframes and documented all the steps.
Workflow
With the wireframes drawn in the previous step, we designed the workflow of the game.
High-fidelity design
With the concept and rules of the game consolidated, we design a moodboard, assets and high-fidelity mockups of the game screens. The recreated scenario was the individual game mode. Complementary functionalities of the application were also designed
Interactive prototype
With the high-fidelity models, we created a prototype with the Invision App software. We ran tests with some users and from there, we made some changes to the features and scenarios we designed.
Workflow
After the tests and changes to the models, we represented the workflow of the game, with the possible functionalities and scenarios.
Motion design
With the elements designed for high-fidelity mock-ups, we've created videos simulating the various phases of the game (in Adobe After Effects). These videos were later used in the game's promotional video.
Promotional video
For the presentation of the game, we made a promotional video, in which 2 college students play with each other.
The film was held in the Jardim do Arco do Cego (Lisbon), a meeting point for many young people and adults who study and work in the area.
Next Steps ...
After the design phase of the project (academic), we started the implementation of the game for the Android operating system, with the collaboration of a frontend developer (with the Unity platform). We started some tests of the individual game mode.
From here, we could test the game with a larger number of users and improve the aspects related to the interaction.
Next steps...? Coming soon :)