Auto-Generated Visuals for your Voicy Setup
In a previous post, Kevin told all about how he designed the logo from Voicy and the creation of the branding identity. We wanted to take the next step for the brand and the visuals, so what was next?
For the brand itself, Kevin created the animation with the animated comets, which is up and running on the screens in our office all the time. These lines became such a powerful and recognizable element in the brand, that we wanted to do something more with it.
Voicy shows incoming calls, but what is shown when no one is calling? A solution like a screensaver was quickly devised, but in order to prevent a regular screensaver, we had to come up with something new and not just with some random static wallpapers. Something that could fit any type of business in different branches.
The Idea
We challenged ourselves to create something that takes the brand identity to the next level in the product itself. Then Kevin came up with an idea of something that we hadn’t seen before. We all agreed that the comet animations were important and recognizable. Besides that, we wanted to make sure that the user could enjoy custom and unique visuals in the office that they could setup with minimum effort.
Combining those two led to thinking of an onboarding process where several line patterns are combined, similar to the comets. These lines are based on the unique combination of digits from the user’s VoIP IP address – which has to be filled in when setting up Voicy. This results in different, abstract wallpapers for each office that are tailored for the network Voicy is connected to.
How it works
When setting up Voicy, you have to provide some required data, like the IP address. We created ten different line patterns, each assigned to a number. When filling in your IP address, the system will generate a wallpaper from for example three digits of your IP address. These three different patterns combined with a random background color generates your wallpaper automatically. The overlapping lines can lead to special combinations that are like abstract art in your office.
Design Process
The process of designing the wallpapers started on paper. We made some sketches and came across the fact that each pattern had to be very simple and minimalistic. If these lines will be put on top of each other, it should keep the minimal look we intended and should not come off too crowded.
On top of that, we wanted the comets to animate through the patterns. In order to create the patterns, we started with a dotted grid, so that each pattern fits perfectly over each other. We kept the lines simple and clean and added some bright colored gradients on the background that match the brand. This also makes the lines pop out way more!
The Result
Let’s test it!
We wanted to see this work, ASAP! As a proof of concept, we built a generator with Framer, a prototyping tool we use. On every refresh, the prototype generates a new pattern. We added this to the set of visuals that are cycling on the screen here in the office. It’s very cool to see all of these combinations of lines and colors showing on all of our screens at the same time!
The next step is to make sure these lines have animating comets and are implemented in one of our next releases of Voicy!
That’s our inside look into designing and creating a proof of concept for the Voicy wallpaper. If you have any questions, drop a comment below or send a tweet to @CallVoicy on Twitter!
Voicy is in alpha and is now in the App Store for iOS and Apple TV. We’d love to hear your thoughts and if you want to try it out! Stay connected at CallVoicy.com.
