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
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
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.
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.
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.
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.
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.