How we built this — a deep dive into our process from concept to launch of a self service advertising platform for local media

Daniel Butler
Socius-Insights
Published in
7 min readJun 29, 2019

The past 3 years led us to identify a huge problem — media advertising was excluding the SMB market. Why? Because the tools available to create and order ads are too complex and expensive compared to Google and Facebook’s offerings. It’s therefore no surprise that these two firms account for around 70% of all digital ad spending globally, which has forced closures and cutbacks and severely threatened the future of journalism. See our other post titled “ the REAL reason newspapers are losing to facebook

What we want to achieve

At the beginning of 2018 we embarked on a 9 month journey to develop and launch a solution, Google even granted us financing from their DNI fund.

  • build a simple ad product for SMBs
  • enable promotion of social posts through available publisher ad inventory
  • open up a new revenue stream for publishers — SMB market
The project proposal to Google was as vague as possible to give us the freedom to explore the best solution whilst being sure to meet the- milestones required to trigger key cash payouts.

Project Kickoff

More market research

The first 2 months were spent carrying out third and first party research to dig deeper into the market and to put meat on the bones of the initial project concept. We reviewed the ad buying process on all social platforms and for comparison we analysed several media’s home-built solutions. First party research involved interviews with both demand (the advertisers) and supply (the media houses) which were transcribed in audio and text. A key quote was “If you had a play button in Facebook, where you can automatically get it into programmatically bought distribution, that would be gold!”

Comparison of “steps” to create ads on each social network

Free My Feed was the working project title, and it came from the idea of letting businesses take their content out from the social silos that host it (facebook, YouTube, Twitter etc) to reuse and repurpose in other marketing channels. We validated that the context and audiences that online publisher’s (and particularly local publishers) offer is a valuable channel for both parties, so long as the solution was cost effective and simple enough to manage by an SMB themselves.

One of countless whiteboard sessions — yep you can’t beat IRL brainstorming
Before the product was built we built a sales deck — this was the high level Product offering to vet partners.

Refining the concept into a product roadmap

We refined the initial idea of using any social platform and focused on facebook as most SMBs have a profile. We then refined the idea of creating an ad generator into specifically a native ad generator as it leans into the growing market preference of using content to tell a brand story and would follow a strict formula which matched well with the components of a facebook post — image, title, logo, link.

Adlocal didn’t cut it but shows the distillation of the product idea — we were initially thinking to use facebook ad campaign data

K.I.S.S

We knew we had to keep the buying process super simple and work hard to resist adding common programmatic features on the frontend, preferring rather to set sensible programmatic defaults such as frequency capping and view-ability, as automated processes running behind the scenes.

The name Free my feed needed to go, the product had to convey simplicity and doing something independently — after 4 long weeks Solo was born (and hair was lost).

Naming is sooo hard! Solo didn’t make it in this mind map, it took over a month of back and forth.

Starting to build 🚧

From April the tech team began building, starting with APIs.

A monthly timeline with key line items: product, sales

Technical approach

Tech stack and principles
User workflow — making simple things is about to get detailed
User workflow — refined using draw.io
Data architecture
App architecture

Design framework

User stories has a structure which says that for each function you should define the user carrying out the action, their role and what they want to achieve with that action. For instance: as a finance manager I want to access campaign receipts to see what was spent and download them to share with our accountant. The entire team contributed with possible user stories and these were laid out, organised and prioritized using Trello.

User stories for every step — we used Trello to organise these with our team

Designing for screens

We consciously focused on designing the desktop experience first for the MVP. Sure you can make the whole app responsive but we wanted to be mindful to the tasks that would most likely be done on various devices — e.g. desktop for the initial campaign setup, and then mobile for campaign monitoring and notifications. We anticipate that the mobile app to be an accompaniment to the desktop app rather than just duplicate it.

We designed the entire app in Sketch. One great thing about Sketch over say other vector tools like Illustrator is the ability to create clickable prototypes. This feature saved us a lot of time in describing and conveying the functionality when the engineering team began work.

App designs using Sketch — campaign booking
App designs using Sketch — campaign reports
Interactive UX prototyping in Sketch made it easier to communicate functionality with engineering

Colour palette, iconography and fonts were chosen for clarity and minimalism to reference the UX of social networks.

For headlines we chose D-Din Exp. For body text and buttons Din Alternative and for “small print”, time stamps etc we used Roboto Mono. DIN fonts are industrial, created in Germany and popular for signage. The Roboto family was designed by Google for readability on screens across a variety of devices.

Feedback for dev team — annotated screenshot of design refinements
UI transition experimentation designed in Sketch — never implemented

The user experience doesn’t stop in the app

As a self service tool (SaaS) it’s important to design the user experience that continues through email as a feedback loop to the customer and the team. We chose Sendgrid to manage transactional emails which were in turn hooked up to Slack to notify our team of required actions, such as approving newly ordered campaigns.

User internal / External notifications — hooked up to Sendgrid

We worked in weekly sprints in a lean development process to enable us to keep on track to the launch deadline.

CTO Slack release notes — excerpts showing currency support, credit card payments, and discount coupons

Communications materials

Alongside the design process our sales team began presenting increasingly refined messaging to potential media agency partners. Online we built a one page site in Webflow. This contained the 1 minute introductory video, animated GIFs of key steps and Calls To Action to lead interested readers to the app login page.

Webpage

Responsive single page webpage designed and implemented with Webflow

Login page

Parts of the login page content was dynamic so visitors would only see relevant newspaper logos from their respective countries. The page also featured a one minute subtitled screenshare video and 3 step information all contained above the fold (on desktop).

Login page — solo.socius.co.

Online ads

We began testing communication using facebook and instagram ads and slowly adjusted messaging based on the ad engagement score as well as through direct sales feedback. We included the free chat bot from Small.chat to allow users to communicate in realtime with our team from within the app.

An example of an ad creative that was run on Instagram designed in Photoshop (old skool right?!) and Sketch

Offline materials

Sales one pagers were necessary after visiting agency partners and presenting a larger slide deck and live demo. One pagers created in Gdocs made it easy to share with their teammates and pick out elements for their own sales materials. As we built cases and gained testimonials we added them into the mix. The copywriting was clean, simple, with as little text as possible.

Resources

Our Solo FAQ section added to our blog (built in Ghost) is a continually updated database of information gleaned through sales meetings and customer feedback (We use the free small.chat for inapp feedback and responding).

And we’re live! 🚀

6o second screenshare demo video, captured with KAP, edited and subtitled in iMovie

Solo went live in Norway on September 20, 2018, Sweden in November, Denmark in February and Finland in March, completing our Nordic coverage; a launchpad for internationalisation.

Product achievements ✅

  • New users acquired through online ads completed campaigns orders within 6 minutes of accessing the platform
  • Returning users complete campaign orders within 80 seconds of logging into the app
Solo ads — a wide range of advertisers have utilised the platform
Screenshot of Solo ad on Norwegian national news site VG.no
Socius Founder’s receive Press coverage in Swedish media — Dagensmedia.se

Thanks for reading! If you liked this article please give it some claps to encourage me to keep writing, and feel free to drop a comment below, I’d love to hear your thoughts.

My name is Daniel Butler, I’m a tech entrepreneur with a specialism in digital branding and design. Connect with me on Twitter or Linkedin. Details of my projects can be found at DNLBTLR.com ✌️

--

--