echoes App
Background
echoes is an Audio mystery game by Ravensburger that uses a companion iOS or Android app to play the game. Players scan physical cards to listen to sound clues associated with each card, then scan the cards in the correct order to solve the game.
Role
As the UI designer, I worked directly with the Munich Ravensburger team lead on concept and design. The app was developed by an external development team.
Key Considerations
Because the app is available for both iOS and Android, we wanted to make the UI the same so that players have the same experience no matter the platform. Another key consideration is that the app is intended to be a companion app and not the main hero of the game. The game developer wanted to have balanced game mechanics and not focus the entire gameplay on the app.
Tools Used
Adobe XD, Adobe Illustrator, Adobe Photoshop
Process
Discovery
I started by reviewing the wireframe and user flow provided by the team lead. I then proposed several design explorations with some alternate page flows to be reviewed by the game development team. We chose the UI with an ethereal and mysterious look and feel to match the concept of the game.
Option 1
Option 2
Option 3
Design
The process was divided into several design sprints that included internal reviews and iterations based on feedback from the game development team. One of the challenges was to keep the core UI neutral and not clash with the individual episode color palettes.
Iteration from wireframe to final design
Included in the design process are the icons to match the overall look and feel. Sound wave texture was applied to the icons to reinforce the auditory nature of the game.
High Fidelity Mockups
The completed UI design is for both mobile and table formats. Here are some examples of the final screens, including the episode selection, listening screen with audio control function, episode solved screen, and scanning function.
