PredictHQ
Crafting a brand and responsive web app for complex events intelligence platform
- 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.
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.
“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
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.
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.
“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.
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.
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.
“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
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.
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.
