Marketing campaign platform

In November 2018 I was contracted to architect and develop a brand new frontend for a company in the real estate business. I've worked closely with one graphic designer, one UX designer and a backend team of five in a agile environment using Jira for project management.

One part of the project is a customer-facing platform with following features:

  • Create social media marketing campaigns
  • View campaign performance statistics with multiple charts
  • Authorization pages
  • Browse properties connected to logged in user

Brand new frontend & deployment pipeline

The frontend is written in React and GraphQL as a data layer, both to communicate with backend as well as local state. I opted to handle local state in Apollo instead of the more commonly used Redux because it allowed us to use the power of GraphQL with schemas and caching and manage the data in one place. This proved to be very helpful, especially in the campaign creation page which is very complex in interaction.

Campaign wizard

The campaign creation page consists of three steps: setup, preview and summary. The setup loads product configuration from backend and renders each product as a configurable block. Each product has several selections like: product size, which channels to publish to and what kind of post. After this initial configuration, the user moves on to the preview using a stepper in the footer.

In the preview step, the user has the optionality to design how each product will look when posted (for each channel). These channels are displayed in a carousel with a preview of the post in each slide. Each preview contains an image and several editable text fields which might be prefilled with backend data. The user can change photo by clicking the image to open a gallery. Depending on the post type there are different possible actions. Video posts allow upload of a video file or creation of a slideshow by selecting multiple photos in the gallery. Other posts have just the photo selection feature with either 1 or 10 max selections.

Finally the user moves on to the summary step to verify everything is correct before publishing the campaigns.

Charts & analytics

The user can follow the results and performance of these campaigns in a page with multiple charts. I chose Nivo.rocks due to the elegant API, ease of customization, great mobile support, server-side rendering and just awesome looking charts.

There's also a listings page for the users to browse the properties they're assigned to. The page is built up by a search component and a list with a button to load additional results.

In order to control access rights I also built several screens for authentication: login, forgot password and set new password.

Embeddable script & widget

The second part of the project was writing an embeddable script that queries a backend service for configuration to load additional scripts. One of these scripts loads and displays a widget, much like Intercoms, only much smaller in scope. This widget loads components based on a configuration, one Send to Messenger plugin and one contact form for lead generation.

Everything supports multiple locales for translations and responsive design from mobile to desktop screens. Mixtrack was used for analytics to understand user behaviour.

The designs where made in Sketch and Abstract. We made the decision to use the CSS framework Bulma to find a nice balance between rapid development, quality and customization. Building components from scratch gives greater freedom but increases complexity exponentially for every new component introduced. Cross-browser compability can also be difficult to get right. It's important to keep in mind what provides value and where to put your focus.

screenshot of widgetscreenshot of widget