Design teardown: creating an event intelligence platform

PredictHQ is a global events intelligence platform that aggregates, enriches, and connects scheduled and real-time event data happening both locally and globally, then predicts which ones could impact your business.

We work with people all over the world, but because we’re a New Zealand company, our relative geographic isolation makes for a challenging design process. So we’ve worked hard to make things as smooth as possible by placing a big emphasis on communication and collaboration.

Here’s a look at how our platform came to be, our process, and how you can ensure great communication with teammates—even when they’re on a whole other island.

Starting from scratch

We needed to design a unique platform from the ground up that could handle the hundreds of thousands of events we aggregate from around the world. And we needed to do it in such a way that would allow the customer to quickly visualize the events that mattered to them.

The major design requirements involved in creating this visibility:

• An intuitive, beautiful web app
• An equally beautiful consumer website focused on conversion
• Email templates: everything from account to billing, to onboarding and behavioral emails
• Concise and easy-to-follow API documentation that looks as good as it reads

We have a talented core team with backgrounds in everything from programming and data to product management and marketing. But we’ve also seen the benefits in working with external talent, pulling in resources—front-end designers, graphic designers, and copywriters—as needed.

Identifying the problem

Emerging out of Online Republic, a global company specializing in cruise, car rentals, and motorhome travel bookings, PredictHQ was initially created to enable better global visibility of campaign management across performance advertising, email, social media, and SEO.

Put simply: we wanted to know how particular events all over the world impacted our business performance—and how to make those events work for us. We needed a way to be more aware about events happening in other parts of the globe so we could act in a more local or contextual manner and be smarter with our marketing and advertising spend.

That got us thinking: if we were making a product that could create business success for Online Republic, could the same thing help others?

We knew the problem was real, so we set about proving the value.

Testing at scale

Being able to test our theories at scale put us in a unique position. One theory was to improve the age-old tactic of urgency as a driver for higher conversion. We had a hunch that we could create a higher converting booking alert versus the usual blunt-force book now or else with event-based context on Online Republic’s global car rental booking website Airportrentals.com. The initial results from our A/B test was a 22% uplift in conversion across search results where our new contextual booking alerts were shown.

We were taking the old generalized booking alert messaging and using the vast amount of event data we’d pulled into one place to present users with relevant, useful information based on their booking dates and destination, which in turn improved conversion.

It’s this type of intense testing at the coal face of ecommerce that provided the foundations of the PredictHQ platform.

Our design workflow process

The process we went through for designing our web app, consumer-facing site, email templates, API documentation—and pretty much anything we required that was visual—was highly structured in order to ensure the communication of essential functionalities.

When you have targets to hit and resource time to optimize, a well-formed structure allows you the flexibility to adapt if presented with possible changes to a design because there’s a clear end vision for the user experience.

Our wireframes were more detailed than normal. For example, they showed more styling rather than just placement boxes with labels. This made us think harder about what purpose every element and feature served and how its function might work—and that ultimately provided greater flexibility and consistency because our general end vision was clear.

Plus, they helped our designer, who works remotely, make decisions and suggestions not only based on the immediate task but how any changes would flow through other designs.

Here’s a quick rundown of our design workflow process:

1. With each wireframe, we supplied a detailed brief with notes about design requirements
2. Our designer came back with any initial questions before he started designing
3. He then loaded up screens to InVision and left comments for us to review
4. As our product manager, I kept our team updated and drew focus to comments that specifically required the team’s attention
5. We discussed as a team, then I collected all our feedback to comment back through InVision to our designer. I kept 95% of our conversations with our designer there, 4% through emails, and 1% face-to-face. This single point of communication worked well because it prevented sporadic commentary—everyone was on the same page, and we could move from one design to the next with minimal distractions

Whenever a bulk of designs were signed off on, templating would begin, followed by coding.

And so the process repeated, one design after another.

User feedback, communication, and staying on track

We gathered a group of users—search engine marketing, SEO, email marketing, and social media specialists as well as account managers—to try out an alpha version of our web app.

During the alpha period, this user group gave us valuable feedback about which features worked well, those that didn’t, bugs, and what kind of features they felt would be most useful.

The main tools we used:

Intercom
We installed Intercom on our web app so that we could funnel and manage user feedback efficiently. It’s also allowed us to learn more effectively what the platform could do for us before we went live.

We later installed Intercom on specific pages of our website which could present the opportunity to reduce any customer friction such as our pricing page.

Slack
This was and remains our internal communications tool within our team. We used different integrations on Slack so that we could automatically pull information and activity from outside tools into Slack in a way that’s timely, relevant, and searchable.

We’ll be looking to create a PredictHQ integration for Slack so users can gain greater event visibility without having to leave Slack. As with Intercom, what better way to understand another business’s platform than by using it in the real world?

InVision
Even when team members were out of the office or out of the country—and even when our designer relocated to the States for 3 months—our project kept moving, largely thanks to the use of InVision and Slack. Comments and feedback were made directly on specific parts of a design, which made things really clear for both our designer and us.

“Communication needs to be open, flow both ways, and be constructive at all times.”

Bugify
Bug tickets as well as feature ideas we saw value in were loaded into Bugify, a simplified issue tracker built by our very own CTO.

Trello
Our designer shared his Trello board with us, so we had complete visibility at all times of remaining tasks, in-progress tasks, where content was required, and completed tasks.

We were able to add attachments and comments to specific cards when needed, and our designer’s checklists and labels helped to clearly show the state of progress for each task.

3 design features that came out of our alpha phase

1. Our event search locations filter needed improvement in order to allow searching of events down to the city level of any country.

If we wanted businesses using our web app to be able to find out what local events were happening around the world and when, they needed to be able to search and filter locations more easily.

2. A quick way for users to bookmark searches and choose to be alerted about events that matched their search.

Based on the user indicating types of event categories and locations, ranks, and/or keywords that they were interested in, we included an option for whether they wanted to receive alerts for events that matched their search and how far in advance. This was a vital design that customized the user’s experience to ensure PredictHQ was relevant for them.

3. A way for events to be associated to a project either new or existing.

Doing this enabled the user to have a link directly to the event(s), which could be easily viewed from within projects created in our app.

Approaching beta

About 6 months after our alpha period, we found ourselves at the doorstep of our beta launch. For us, beta meant that we’d open PredictHQ up to the public. People would be able to see our brand-new website and sign up to try out our web app and API—and then hopefully convert into paying customers.

We used our alpha period to refine our products based on real feedback rather than random guesswork. We knew we were never going to launch with a perfect product. But we had strong foundations in place that meant we could iterate at speed while retaining the consistency of design, which formed the basis of our “beautiful simplicity out of chaos” approach.

We have no doubt that we’ll learn just as much from our beta users as we did from our alpha users.

Key takeaways

While our geographic isolation could have been a roadblock, it’s turned out to be a necessary ingredient to the future success of our business—it pulls together our passion, ideas, designs, and vision. If you’re in a similar position with a remote team, here’s our advice:

Make sure your vision is clear but flexible. When you’re at the ideation phase of any design, you need to know what’s important and why, as well as how it’ll be used so that you can communicate this with those designing and building your product. Designs should be flexible enough to allow for changes based on feedback, and they should be looked at not only by product managers, marketers and designers, but also the developers who will end up coding your creations.

Communication is key. Just like any relationship, communication needs to be open, flow both ways, and be constructive at all times. Make sure key stakeholders are always kept on the same page so there aren’t any major surprises. Consider channeling communication with your designer through one single point of contact, like a product manager, so your designer doesn’t get mixed messages or get bombarded with feedback from all over the place.

“Consider channeling communication with your designer through a single point of contact so they don’t get mixed messages.”

Keep things constantly flowing. Make sure that when anything needs reviewing or requires more explanation that it’s dealt with timely and efficiently. Remove any roadblocks as quickly as possible and always have the next set of wireframes and briefs lined up and ready to go.

Use tools that give you visibility and allow for collaboration. You’ll find that you end up saving a lot of valuable time because feedback can be given and received precisely where it needs to be, for those who need to see it.

Research, design, and refine based on understanding of your user journey and feedback. Just like how we want users of PredictHQ to be able to make business decisions based on actual data and not guesswork, the same concept applies to our design iteration process.