THE CHALLENGE Redesigning the UI and UX of an app while adding and improving on functions. The iOS application Klankwelle was an easy choice since we love making music and working with a complex system like a modular synthesizer intrigued us.
Klankwelle is a modular synthesizer application for iOS, used to experiment and playfully discover new sounds.
1.1.1 Screens from the original Klankwelle application. From left to right: Sequencer, Schematics and the Master Controls.
↓ 2. Research
2.1
BUT WHO CARES? We defined two main types of users and based our personas on these usertypes:
Then we conducted user tests to better understand the problems but also the opportunities of Klankwelle.
2.1.1 User Journey with Raphael, representing experienced and experimental users.
2.1.2 Figuring out the user requirements of the application.
2.2
ARCHITECTURE We wanted to improve the applications simple architecture and make features more logically consistent with the flow of sound, while still giving users quick access to the important features from (almost) every screen. We also used new features like the minimap to make it more comprehensible.
2.2.1 The apps new information architecture, simple but effective.
2.3
DESIGN PRINCIPLES Defining personas, conducting tests and setting the user requirements also helped to shape our design principles for the application.
2.3.1 The new Design Principles we defined for our users needs.
2.4. Then we started wireframing the new UI, using the insights from our research.
↓ 3. Functions
3.1
MINIMAP AND FRIENDS The minimap bar can be used to navigate over the canvas by dragging left or right. It also displays the layed down modules for an easier overview on larger builds. The play button renders the sounds of the modules currently on the canvas. The context button on the Minimaps right changes depending on what the user is doing.
3.1.1 Minimap with preview, play button and adaptive context buttons: record, confirm and delete.
3.2
PLUG N' PLAY In order to omit the patch cables with their poor usability on mobile devices we used a connector system. Modules now have between 3 and 5 inputs. One of these inputs can be used to send sound to a module without modulating a parameter. The other inputs can be used to control parameters of a module.
3.2.1 Canvas with three placed modules. Check the prototype video below!
3.3
THE SHAPE OF SOUND The hexagonal shape of the modules allows for up to four possible controllable parameters plus the option to send sound through module A without having module B control one of its parameters. The modules all come with unique icons and are color-coded for easier discriminability – for this reason, we only used black and white as the apps main colors.
3.4
DESCRIPTIVE DESIGN Tapping on the small modules lets the user zoom in and get access to all the functions.
↓ 4. Prototype & Final Screens
4.1
FINAL SCREENS Check out some final screens and a video of our prototype to see the app in motion.
→
Keen-Slider
4.1.1 The empty canvas - time to fill it up!
4.1.2 The file manager - see previews of your tracks and organize your mess.
4.1.3 Left tab contains the Sequencer, Piano Roll and the Keyboard
4.1.4 The right tab contains the Output Controls with EQ and Compression.
4.1.5 Add new modules and save your own presets.
4.1.6 The canvas - a modular synthesizer under construction.
4.1.7 One of Klankwelles many modules - a squarewave LFO.
4.1.8 Echo module - set the strength of feedback and the timing of the echo.
4.1.9 Highpass filter module - choose from different types of filters.
4.1.10 Math module - Doesn’t change sound, just combines module outputs.
4.1.11 Crush module - Distort your sounds and make them harsher.
4.2
PROTOTYPE In order to really bring the redesign to life, we built an extensive prototype. The video is silent.
General Project Information
TEAM Arthur Barbosa Barros Jonas Pflug
PROJECT DURATION 16 weeks
SUPERVISION Rebecca Schellhorn
MY ROLES Ideation, Concept, Interaction Design, Visual Design, Prototyping
