• Client
  • Heikkinen Energy Advisors
  • Team
  • Petr Reichl (CTO)
  • Slavo Pastor (PM)
  • Agency
  • Tapmates Inc
  • Scope
  • Universal iOS app
  • Responsive Website
  • Services & Emails

HEA Connect is a cloud based content delivery platform providing you with access to energy research products from Heikkinen Energy Advisors.

Speaking human; It’s a platform where you sign up to get the latest energy news from Heikkinen Energy analysts.

Visual Case Study
Available on Bēhance

About

HEA Connect is a project which started early in 2016 and kept me busy throughout the year. A lot of work has been done and both the app and the website since we started and the whole project went through countless iterations. I was the only designer on the team but I consulted most of my work with my developer colleagues, mainly Peter Reichl, and project manager Slavo Pastor. I didn’t properly documented the process which now I regret a lot, so lots of the things I’m mentioning I’m writing from memory.

Before we started working on HEA, all their research and analyses were sent trough emails as PDF of Word files, they weren’t easily consumable on the go, and were generally though to manage for both the company and its clients.

We had to build a platform which would make managing all the research and reports for the company a breeze. And an easy way for customers to consume the content they pay for.

HEA Connect operates in a very niche market. Its user base consist of Wall Street bankers and analysts. People with very specific needs. Since these people work in huge corporations, we didn’t get access to them and most of our work was based on assumptions and what our client HEA told us.

Scope and challenges

  • There was a ton of stuff we had to design for version one. Responsive web app, universal iOS app, emails and admin interface. It was huge.
  • Client gave us logo bot not branding, so I also had to set colours and typography.
  • Version 1 was about moving all the documents up in the cloud, but lots of features were coming later.
  • Overcoming the disconnect between us and our users was my biggest personal struggle

Onboarding

The first version was only for already registered companies and emails using their domains. So when we released the first version, we already had about 300 users in our database. And since HEA didn’t have an e-commerce platform at that time, we didn’t want to include the standard sign up form. We had to make a domain verification flow first.

Sign In

At first we had only one app called “HEA Connect” including only HEAs research and excel sheets. But later we’ve introduced couple more products like HEA Meetings and HEA Messaging. Since all these products are very high priced it is very rare to find a user with all of them. That is why we’ve decided to separate all these products into different apps. Even though this was a very rare case, we went ahead and introduced Facebook like “Sign In Once” solution to our apps.

Document, Project Views & Navigation

All the apps, HEA Connect (now called Research), HEA Meetings and Messaging are very simple apps. They show documents, meetings and messages respectively. The further you can get is 3 or 4 levels deep. Navigation is basically the same in all of them. First level is for general navigation, second for item listing, and third level for item detail.This simple navigation is shared between all the apps.

When we were designing the first version of HEA Connect (Research only), we were planning to have all their products in one app. Because of this we didn’t want to “waste” tab bar early for features like Favourites and Custom Channels and save it for upcoming products.

Later we’ve decided to make all products separate apps and share iOS code between them in order to save money for our client. This is why all the navigation and home screen look basically the same and don’t include a tab bar even though it makes sense to use one now.

Research

Research was HEAs very first product. First version included only huge PDF files or Excel documents but in the latest version we’ve moved away from these and included “smart” aka HTML documents, which can be easily displayed across various screen sizes.

As simple as it might seem at first it got complicated quick. Every research could contain infinite number of attachments. You could add your research into favourites. Share as a URL or a file. See different version of the documents.

We took advantage of native toolbar which sorted this problem rather quick. Also because we didn’t want our users to change the document versions very often, we kind of hidden it in the navigation bar.

Web App

The web app was replicating all the features already mentioned but in one big package. Making it usable for both mobile and desktop while adding features proved to be rather challenging. In the time of writing this case study the app itself is currently undergoing a huge redesign based on analytics and user feedback. Screenshots below are from the latest version.

Conclusion

Designing HEA Connect was and still is a great experience (it is an ongoing project). You don’t often get a chance to design a fintech app of this scale for such a niche market.

My biggest takeaway from this project is that I’ve learned how to translate one feature into various screen sizes and for various devices while keeping everything consistent.