Bitpanda

A Trading Platform for Cryptocurrencies and more

I guess a lot of people know BITPANDA and their story of success. From a small Startup to Austrias first Unicorn. When a company grows the requirements are starting to change. More employees means more communication inside and outside of the company. The main communication tool of this company was the website which was hard to maintain since the marketing department was very active and the developers already occupied with other important projects.

In a small team of 8 to 10 people we created a tool (a pagebuilder) according to their needs:
Create, update and delete webpages without any knowledge of code.

Collect elements

Since there were multiple websites with different styles the goal was to combine all the different websites into one single website with one unified harmonic style. Therefore the first step was to see how the different websites were structured, what colors were used and how the different sections were laid out.

Navigation, text sections, tiles, lists and much more

After having multiple developers and designers working on different parts on different websites it starts to get “messy” over the years which is totally comprehensible and more often the case than people would think.

The challenge was to combine and unify as many elements as possible but still deliver flexibility to the content creators.

FACTBOX

Teamsize:

core team: 10
Duration:

6 months
My Role:

UI/UX Designer, Frontend Developer (static)
Main Technologies:

PHP, Laravel, October CMS, UIKIT, AWS
Design Tools:

Sketch

different navigation elements across multiple websites

the outcome: one navigation with all elements included

multiple footers

different types of list elements

different tiles

Chosing the right frameworks

To build a “pagebuilder” where employees (such as marketing or HR departments) without a technical knowledge in terms of HTML/CSS/JS/PHP can actually create styled content in different languages and act independently without the need of developers you have to chose your frameworks wisely.

easy to maintain or expand the functionality for developers

we chose the programming language to a most common language. Therefore we asked what most of their developers were used to. It was clearly PHP. So it was clear we chose a framework based on PHP and not based on languages like Ruby or Python.

result: Laravel and October CMS
similar styles and many options out of the box

We needed a CSS framework which is light weighted and comes with a lot out of the box. In this time where I was involved in this project Bootstrap 4 was newly on the market. Bootstrap is very well known and has also a huge community. Since I already worked with “Bootstrap 4” I knew that it had some bugs (especially with tiles/cards) and I didn’t want to run into workarounds from the beginning Bootstrap was out of question.

The next option would have been “Zurb Foundation”. The problem was, that the developers from Bitpanda were not so familiar with that framework (neither were we) and we have seen in different forums that there was a learning curve which would slow us down (of course the deadline was very close – like always).

I knew that there was also “UIKIT” out there and since I was very experienced in this framework and that it could easily been customised I was giving it a shot. It was the right decision.

result: UIKIT

Reuse as much as possible

Of course I tried to reuse different CSS modules, classes and they way it was built up, so that the in house developers can easily dive in after we finalize the project.

But like the styles, also the CSS was written from many different developers over the years and many rules were overwriting other rules. I started from scratch.

Since theming the UIKIT framework is straight forward you do not need many classes anymore. But still there are exceptions and so I also used a common naming convention: BEM (Block Element Modifier) and SCSS instead of CSS.

That meant when other developers are taking over the project the already have a documentation how they have to name the elements: BEM

Also SCSS (similar to SASS) has a much nicer syntax and allows you to have variables, nesting, mixins and much more: SASS

some of the CSS modules

The Results

The project took a little longer than expected since the scope was changing in between of the defined milestones but it was a success:

A pagebuilder which was easy to use for non-developers.
Therefore no dependencies to internal or external developers to make the required changes on the website.
Defined styles in harmony with the existing styles and the CSS framework. We delivered them a possibility to have an HTML Editor inside the user-backend where they could copy elements directly out of the documentation of UIKIT.
Multilanguage functionality and SEO options like META descriptions and canonicals.
Well structured and documented Stylesheets where developers could easily expand the functionality/library to their own needs but still follow the guidelines to prevent chaos (SCSS and BEM)