Menu

PredictHQ

Crafting a brand and responsive web app for complex events intelligence platform
PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek
Date
2014 – 2015
Client
PredictHQ
Responsibilities
  • Art Direction
  • Digital Strategy
  • Branding
  • Print Design
  • UX Design
  • Responsive Web / UI Design
  • Interaction Design
  • Front-end Development
Video & 3D
Fab Design
Development
PredictHQ In-house
Website
predicthq.com

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.

Starting from scratch

PredictHQ's small, passionate team realised early that interface design would make or break their product. They needed to design a unique platform from the ground up that could handle the hundreds of thousands of events they aggregate from around the world. And they needed to do it in such a way that would allow the customer to quickly visualise the events that mattered to them. They contacted me very early on in the process to help them tweak and solidify their product wireframes and begin what would be a year-long design process.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

Custom design-led product development

Existing frameworks couldn't handle this complex level of visualisation. This would require a completely custom design, starting right from the branding. I helped tweak their existing logo and expand it to a brand styleguide of colours, icons, and common interface styles that would act as the design foundation for the web app, consumer site, display ads, emails, and all other touch points on and offline.

Our design process was one of communication and collaboration. The CEO, CTO, and Head of Product were all actively engaged in reviewing design drafts online, constantly shaping and reshaping the product as design challenges were discovered and overcome.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek
Campbell Brown - PredictHQ CEO & Co-Founder

“Working with Benek to take our vision from concept to reality was outstanding. His concise communication skills, attention to detail, and love for consistency were invaluable through out the project.”

Campbell Brown - PredictHQ CEO & Co-Founder

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

Data visualisation is everything

This complex app includes data visualisation of almost every kind: graphs, maps, calendars, and many varying styles of lists, cards, forms, and completely custom interactive input methods. A major design challenge was catering to this huge variety of data visualisation while maintaining a clean and cohesive interface. We accomplished this with smart and restrained use of colour, and keeping to a minimal pallet of styles for typography, icons, borders, and backgrounds. The result is an app that can handle hundreds of thousands of unique events on which you can interact with in a very intuitive and approachable way.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

Device optimisation

Every screen, function, menu, modal, and alert were meticulously designed to get the details right and leave out any guesswork for the development team. That included consideration for how the app adapts to extra wide screens, narrow desktops and notebooks, tablets, phones, touch and non-touch devices, and everything in between! I hand-coded the HTML and CSS to make the PredictHQ experience seamless across all devices, with custom navigation and layouts to optimise for your screen size without sacrificing features.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek
Campbell Brown - PredictHQ CEO & Co-Founder

“Benek has the ability to think holistically about the user journey and designed the UI not solely as something of beauty but to be truly intuitive.”

Campbell Brown - PredictHQ CEO & Co-Founder

Building it is only half the battle

I was also responsible for art direction and design for PredictHQ's comprehensive consumer-facing sales site. The goal with this design was to stay very much in-line with the design aesthetic established in the app, with the opportunity for greater visual expression. We also implemented custom video and low-poly illustrations they had commissioned as another layer to their brand.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

The requirement to have many common sales points repeated across multiple areas of the site led to design as a group of core modular sections that can adapted and reused to form the structure of every page. This modular structure included elements for hero images, sub-navigation, introductions, screenshot arrangements of varying types and devices, feature sliders, and special section to accommodate custom photos, graphics, feature lists, and illustrations.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

The result is a simple design language that allows for each page to build its own content structure and rhythm while maintaining a strong and cohesive brand, in both tone and aesthetic.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek
Campbell Brown - PredictHQ CEO & Co-Founder

“Benek has very much been a member of the team and completely immerses himself in his work. The end result is something we are all very proud of and will continue to work with Benek in the future.”

Campbell Brown - PredictHQ CEO & Co-Founder

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

Simplicity is adaptable

The minimal and modular nature of PredictHQ's consumer site allowed for effortless responsive patterns to emerge. Following a few primary rules, each module adapts to any screen to maintain an optimal display. Because I was responsible for front-end coding on the web app and consumer sales site, we could ensure perfect accuracy in translation from design to live website, with no interaction design overlooked.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

Extending the brand

My responsibilities have also included brand guidelines, iconography, media kit, product preview imagery, display ads and other promotional material, t-shirts, stationery, as well as all automated and campaign-driven email communications.

PredictHQ – Crafting a brand and responsive web app for complex events intelligence platform // Benek

More Work