Highspot App Refresh

Highspot is a sales enablement platform used by sales teams to better manage their sales strategies. Highspot offers a native app experience that allows the flexibility to perform tasks on the go. I worked closely in a small team with a project manager and a team of 5 - 6 engineers over a year to figure out how we could improve the app UX and increase overall usage.

Situation

Highspot is a software product that primarily serves a desktop web experience. The native app experience initially started as a quick project to provide a mobile app option to customers who requested it. The tablet app experience managed to match closely to the desktop experience while the mobile app took a different approach.

This project started with a mobile exploratory research study led by one of our user researchers. This series of user interviews had 8 participants who fit into the sales enablement persona. Through these interviews we identified the top three pain points for mobile users:

No quick access to pitching - a feature available in the desktop web experience
Slow loading speed
Confusing navigation

This study helped us understand how we could address the scope of this large project and define our goals for the first release.

Original native app experience (2020)

Tasks

With the results of the study in mind, I wanted to better understand the problems around the current app experience.

Conducting a heuristic evaluation

I started with a heuristic evaluation of the app to better familiarize myself with the UX problems. My top considerations were the following:

Improve navigation consistency
- The bottom navigation had some confusing icons such as the Highspot logo serving as the home button.
- Recents and Starred felt like similar pages.
- The left side navigation isn't always accessible throughout the app experience, making it hard to access certain pages and features.
Touch areas were confusing and small which made navigating the app on small screens hard.
- The biggest offender was a the Offline Content button. It was a persistent button that appeared in the lower right corner that occasionally blocked content on the page.
Certain UI elements are not consistent with the desktop experience
- The page header looked like a search bar.
- The offline content page looked completely different from the rest of the app.

Competitive Analysis

I then did a competitive analysis of 14 mobile apps, focusing on how they handled navigation, search and overall UI. This was a great exercise to capture common UX patterns for mobile app experiences.

IA Exploration Sessions

I shared my findings and recommendations with the product manager and lead engineer. Through a series of collaboration sessions, we identified the scope for the first release. We would focus on the following areas:

App navigation - Improve overall consistency
Content viewer - Bring closer alignment to the desktop experience
Content list views - Improve touch areas and overall UX
Consistent page layouts - Set rules for future feature development

Sketches and notes from ideation sessions with the product manager and lead engineer

Action

I was able focus on ideating and finalizing designs for our scoped areas and work closely with engineering to implement these changes in the new native app experience. The product manager was able to establish an alpha and beta release with two major Highspot customers to test the new app experience and gather feedback from users through a series of interviews. Here are some of the largest UI changes we were able to focus on with the first release:

Bottom Navigation

Unfortunately we had inconclusive data for user interviews to make confident decisions around how to change the bottom navigation. The only consistent data point we had was a quicker access point to Pitching, a feature that is important to sales reps. The main changes we made were the following:

Have the left side menu be present.
- This followed closely with our desktop experience and ensured that users would have access to it always, no matter where they were on the app.
Removed Recent Items to reduce redundancy with Starred Items.
Include 'Add' which provided quicker access to Pitching.
Remove the Offline Content button that hovered above the bottom navigation on the right side.
- Offline content was treated as its own side project. Learn more about Offline Content here.
Incorporate telemetry on the bottom navigation to continue gathering data on navigation behaviors for future bottom navigation improvements.

Old Experience

New Experience

Left Navigation

The left navigation is a prominent feature in the desktop experience so we wanted to make sure it was available in the mobile app. This brought more alignment between the desktop and mobile experiences. Users in our alpha release also provided feedback that this change improved the ease of navigating to features throughout the app. We also were able to find a better location for Offline Content which Alpha users noted being easier to find.

Old Experience

New Experience

List Views

A big use case for app users is viewing content on the go, so we wanted to improve on the existing experience. We cleaned up list views and improved touch areas which made browsing through content easier.

Old Experience

New Experience

Content Viewer

Another big use case for customers is viewing content in the content viewer. We brought more alignment between the desktop and mobile experiences by adding the page header and establishing better interaction patterns. The header would minimize as the user scrolled though multi-page content. We also brought in the item properties pane, which wasn't available in the original app experience.

Old Experience

New Experience

New Content Viewer Experience

Mobile Component and Page Layout Libraries

I created a mobile specific component library and a page layouts library in Figma for other UX designers to reference when designing for mobile related projects in other feature areas. My goal was to promote consistency in the mobile app experience by easing any barriers around how to design for mobile. I worked closely with other designers on my team to improve on these libraries and document changes that occured in other feature areas.

Examples of the component and layout libraries in Figma

Results

The general audience (GA) release of the new mobile app experience was in September 2021. The following were established goals and their associated KPS's as of May 2022:

Goal: Increase customer adoption
- Outcome:
  - An increase of active installs by 50% was documented within 1 quarter of the GA release.
  - Over 10,000 active installs on Android
  - 50,860 active sessions on iOS
Goal: Increase rating in App Stores
- Outcome:
  - 4.9 star rating on Apple with 106 reviews
  - 4.8 star rating on Android with 80 reviews

Takeaways

Redesigning an existing app experience doesn't happen overnight. While this first release was a good step in the right direction, there are many opportunities to continue improving the mobile app.
Navigation is an ongoing priority for future improvement. It will need larger collaboration with other designers who are working on the desktop experience. I hope that implementing telemetry on the navigation can help us get closer to understanding what a better navigation experience could look like.
My team was awesome! It was wonderful to collaborate closely with product management and engineering on defining the scope of the project and establishing a roadmap for the mobile app.
Building a component library and page layouts library needs input from everyone. Working with other designers to gain insights to how to expand on these libraries was a great collaboration opportunity.

Back to Home

Page updated

Google Sites

Report abuse