Charisma.ai x Sky 'The Rope'
Overview
Description
Tools
- Figma
- Unity
- Adobe Illustrator
- Adobe Photoshop
Process
- UX Design
- UI Design
- Animation
- Figma
- Testing
- Adobe Photoshop
My Role
As a lead UX/UI designer at Charisma.ai, I was responsible for designing the UI for ‘The Rope’, ensuring that it was accessible on the TV and visually matched the aesthetic of the interactive experience.
Design
As the experience is intended to be used on a TV screen, it presented me with various challenges, while I was designing the UI elements for it. Firstly, unlike traditional games that are played with a keyboard and mouse or a controller, The Rope uses a camera that detects the gestures of the player. That means that the interactable elements have to be big enough to allow easy interaction, while not taking too much space on the screen. This also brought up another challenge – making sure that the UI is accessible and easy to read and use for the player no matter how far away from the TV screen they are. Another thing to keep in mind during the design process were the changing environments in the experience. As the story is taking place underwater, there are some scenes which have a much lighter environment and some that are almost pitch black.
Buttons and Subtitles
The design of the various UI elements went through multiple iterations before it was decided what the final version would look like. Various styles have been explored for the buttons and subtitles, such as a simple capsule, a rope design, a more futuristic version and a glowing capsule (which was chosen as the final version). The images below show the styles, as well as the two states for the buttons – pressed on the left (dark version) and not pressed on the right (light version).
Player Input
As the game allows the player to speak to characters in natural language, a lot of thought was put into the design of the player input field. Unlike traditional games which use a keyboard for typing in the text, The Rope uses the microphone and allows the player to simply say their responses. This means that the player should be able to read their response on screen before sending it to ensure that it was interpreted correctly by the game. Furthermore, in case they changed their mind and want to say something else, they should be able to re-record their response. Similarly to the buttons, the design for the input field went through multiple iterations, which included not only different visual styles, but also different layouts on the screen. The final design contains all elements (the ‘Speak’ button, player input and subtitles) in one ‘control panel’ element in the bottom right of the screen. The ‘Speak’ button is disabled (greyed out) until it’s the players turn to speak. Then it starts flashing/blinking to prompt the player to reply. Once they interact with the button (hover over it), the word ‘Speak’ changes to ‘Listening’ and the player’s response appears in the text field above the button. To send the response all the user needs to do is remove their hand from the button. If they want to re-record their response, they need to remove their hand from the button, triggering a 5 seconds waiting period and then hover over it again.
Animated Tutorials
‘The Rope’ is an innovative interactive experience, so to make it easier for the players to get used to the controls and have the best possible experience, I ahve designed and animated some tutorials. These tutorials were then added at the begining of the game by the developers. Below is a screenrecording from Figma that shows the flow of the tutorial section of the experience.
