An efficient middleman between advertisers and consumers
Challenge
Perform a redesign and implementation of a Vue.js wizard to allow adding and editing of advertisements and introduce UX improvements throughout the entire application.
Outcome
A beautiful and unified easy to navigate marketing solution for small businesses and big enterprises.
Challenge
Create an outstanding wizard that will serve customers from Switzerland and neighbour countries powered by beautiful design.
Guidle AG is a digital advertisement delivering company. Their providers transfer ads to guidle and they handle publishing them in relevant media outlets after being reviewed by an editorial team. The company aids visitors in finding topic-related ads, advertisers in gaining an additional advertising channel and content providers in opening an effective distribution mechanism and gaining a competitive advantage.
We were contacted by Guidle AG to implement a Vue wizard for adding and editing advertisements through a separate application as well as improve the existing design.
The challenges that we had to face were to figure out how to:
- implement Vue.js application from scratch
- use the wizard as a web component to separate it from the website’s CSS
- test web component using Cypress
We decided to form a dedicated development team supported by an expert designer.
Process and Project Scope
The power of Vue.js and UX design
Guidle AG decided to outsource the design and UX improvements to Selleo. We developed new features, implemented integrations and improved the existing design delivered by the client. While our development team was working with Vue.js, the expert front-end designer conducted a UX audit.
Business Value
Technically sound and commercially successful advertisement management tool
guidle distributes digital ads in Switzerland and neighbouring countries. They are serving as a middleman between advertisers and consumers. The company offers media and content services, apps and portals as well as content tools. guidle’s clients have the ability to create ads once and present them across various channels while gaining access to up-to-date content directed to their target demographic. The control center for all channels allows controlling all media content, managing channels together with own and third-party advertisements.
The main task of our development team was to work on the main website as well as thematic pages. We managed to successfully introduce Vue.js wizard integrated with the main application, improving its design and navigation. The wizard is realized as a web component to separate it from the website’s CSS. Its Shadow DOM forced us to fix some of the third-party component packages. This web component was tested using Cypress.
Thanks to the UX audit conducted by our expert front-end designer the application gained amazing performance and consistency throughout the layout. The audit revealed the parts of the app that were causing troubles and combined with the end-user feedback helped us to bring the power back to the solution. The finished product is equipped with functionalities like:
- custom navigation
- colour schemes for each version of the application
- languages switching
- unified design for both wizard and the main app
The quality of CSS and the implemented changes in the UX positively influenced the consistency and ease of use for standard users as well as ‘power-users’. Additionally, it is now possible to view each CSS component in the Catalog style guide, together with possible use cases.
Selleo has provided excellent development services to us. Their design team focused on UX audit of our existing system. They did not only provide a thorough overview of the areas for improvement, but they also gave the right solutions alongside with designs for new features and style guides. All in all, the Selleo team has been a core part of our team and has consistently brought top-notch design and architecture to our project.
Technology stack
An amazing new design
The project was developed using Vue.js and tests were conducted in Cypress. Our expert designer delivered a top-quality design with smooth navigation and an improved UX experience.