HubSpot Mobile
Overview
I had the privilege of serving as the first Product Designer for the HubSpot mobile app when it was first created in 2016 by a team of 4. Throughout the following six years, the team grew to a full product group consisting of five teams and with that, my role extended to Principal Designer overseeing all aspects of design.
Throughout my time, I encompassed a holistic approach that included discovery work, user interviews, user testing, iteration, visual design, and creation of marketing videos. In the last two years I paired with the Director of Product to define the Vision and Strategy for the Mobile Group.
One of the foundational pillars of our success was the emphasis on user-centric design. We were lucky to be inundated with feedback from many channels, which guided our strategy, alongside research on industry trends and emerging technologies. I collaborated frequently with our researchers to ensure our work was validated and remained relevant.
Spotlight: Contact Cache & Caller ID
💬 Feedback
”I want to be able to download all of my contacts onto my phone.”
💔 Issue in brief
Users were required to be connected to a data network to view information of the contacts stored in their CRM, but often needed to call leads when away from their desks, and without a data connection. They also wanted to know who was calling before answering incoming calls from potential leads, to provide a more personalised experience.
🔬 Discovery
After seeing the above feedback frequently through NPS Feedback and Support tickets, we began to speak with users to understand the issue. The overwhelming suggestion was to allow the user to sync the contacts from their HubSpot account to their local contacts on their phone.
This would solve both issues, contact information would be managed by the device OS, therefore available offline, and having the numbers stored locally would allow the user to see who was calling.
This solution did bring up the following problems:
📡 Ensuring the contact information was kept up to date on both ends (Phone client & CRM server)
📦 Delta updates in each direction to ensure limited bandwidth usage
⚠️ Privacy – Concerns around a user being able to easily copy the details of all leads and customers belonging to a company account, with the company being unable to then control that copy, meant this solution would not be suitable, especially while being fully GDPR compliant.
So it was back to the drawing board for both.
📱 Local Contacts
The team began to brainstorm how we could solve the initial data connection issue. Working with our mobile analysts, we found the average number of contacts per account and the average size of each contact record. Given that a user would not require every contact detail while offline, we surveyed the users who had submitted the feedback, to see which fields would be considered essential – First & Last Name, Company Name, Contact Number(s). This data amounted to a negligible amount of kilobytes, less usually less than 4kb per contact. Pairing that with a max contact number of 10,000, which would cover all contacts for >95% of HubSpot customers, we set about designing an in-app cache of contacts.
Upon initial login to the app, the essential fields for up to 10,000 contacts would be downloaded. The <5% of users who had more contacts would be prompted to choose a filter list of contacts, usually contacts assigned to them, which in 100% of cases was less than the 10k limit. A mechanism would then check for delta updates on the CRM and update accordingly on subsequent app launches.
📞 Caller ID
While the above solution covered the offline scenario, it also allowed us to use Apple’s CallKit to integrate with iOS’s CallerID feature. Having the contacts stored locally meant that the phone number from incoming calls could be instantly polled against the cache to provide the caller’s full name and company name.
On Android, we were also able to display any associated deals and value of those deals, right on the incoming call screen, and persist that information on missed call notifications
