Starting the project
While doing my internship at the fin-tech company Loyyo I worked on the rebranding of the brand. In this project I restyled everything and also build the new website in this new style, along with presentations and other digital and physical products.
The previous people who worked on this already thought of a new concept for the company, so I went from there.
I was given the assignment to look at the concept and give my ideas upon it, so I did. When looking at the design I found it a bit hard to make a solid styling with the given elements like the colors and the existing logo. So I started making variations on the logo first. I also made some social media designs to see how my ideas would work out in a new style.
This is where something funny happend… Whilst I was thinking on how to make the joke: ‘Whats Superman’s favorite payment method?’ I had the idea to combine our YY logo with the superman logo as a funny detail. The Wouter, the CEO, said: ‘Thats so cool, we should use that as our new logo!’ So we did! The diamond shape represents both timelessness and value, the YY in the middle comes from LOYYO and the old logo. Perfect for small implementations and also for big and even 3D usage.
With the new logo and styling from that I started making the new UI designs for the presentations and website, here are some examples:
To illustrate in a simple way how the LOYYO’s SaaS solutions can look like, I made this animation.
Just like everyone I also struggled with some design issues. Our CEO invested in a cool photography concept and wanted, of course, use those photographs. But they didn’t really match the styling that I made. But somehow I had to make it work.
With trial and error I came up with the cloud like header, images show thru a little bit and text is very readable.
The cloud like header then became one of the main styling elements in various other designs aswell.
I made the site with bootstrap and did everything myself. This way I have the most controle over every element. An element where I was really struggling with was the round text box at the top of the home page. These had to be responsive, stay round and also look nice. It took quit a bit if googling and tweaking to make them work nicely.
When I was uploading the favicon I noticed that it was quit hard to see what it was. The logo, with its thin lines, silted up. So to see the logo also in its smallest size, I tweaked it a little bit. Instead of outlines I filled it in and made the negative space bigger.
Favorite new thing
My newest discovery and cool thing I came across this project is a way to use svg’s inline and call upon them using a ‘<use xLink:href=””>’ tag.