Q3 2018

React Native Akkroo App

Two devices showing the user interface of the React Native Akkroo app

Context

One of the main goals of the Akkroo product is to replace traditional lead capture methods (think paper forms and badge scanners) used by sales representatives at trade shows. Despite this, Akkroo is typically sold to marketing departments for its powerful integration and monitoring capabilities — not sales teams, the ones attending the trade shows.

After finally introducing some much-needed functionality with the Major App Update months prior, app user adoption was steadily improving, but performance and stability issues were still having a negative impact on the users’ experience.

In addition to that, we were getting more and more requests for a native Android app — users wanted to use their own devices, but by only supporting iOS devices, we were preventing a substantial number of them from doing so.

Problem

We framed this project around the user persona of the Sales Representative — who we named Serena Sales —, the typical user of the Akkroo app.

Using the Jobs to Be Done framework, we arrived at the following goal:

As Serena Sales, I want to be able to have a stable and reliable experience in a range of devices in order to trust and make the most of what Akkroo has to offer.

Discovery and ideation

Since this new app version was to be introduced very shortly after the Major App Update that had introduced a brand new user flow, we decided not to introduce any additional changes to it, choosing instead to tighten the user interface and focus on adding some delight to the user experience.

Starting with the base design, we started by creating a design system with reusable components. We spent a lot of time perfecting the grid and optimising the layout, along with writing documentation that would make development smoother.

Some of the components designed for the app
A look at some of the components designed for the app.

After the layout was designed, we spent some time designing a brand new set of icons that would look consistent and readable to use throughout both our app and dashboard products.

Some of the icons designed for the app
The Akkroo icon set.

To help build trust with users who had had syncing issues in the past, we took the messaging around syncing status even further, with simplified iconography and more explicit copy.

Video

A simplified and more transparent syncing process.

Finally, we spent a lot of time thinking about how to add an element of delight to the user experience by introducing fun microinteractions to actions that would otherwise be mundane and uninteresting.

Here's a couple of examples:

Prototype

Fun empty states

The moments before a tradeshow can be quite stressful, so you're greeted by our cheerful mascot, Kangakkroo, when opening up a brand new event.

Need an extra boost of energy before the start of a busy day at an event? Try and give Kangakkroo a high five.

Prototype

Syncing animations

Using some themes that are specific to events, like badges, we made the syncing process more unique and fun.

Swipe down on the prototype to test the syncing interaction.

Some difficult decisions had to be made, too: early in the project, we decided the check-in functionality — the ability to upload a list of leads or accounts you’re expecting to meet at an event — would need a complete redesign before it could meet the standard we were hoping to achieve with the new app, so it was left out of the initial release of our brand new app.

This meant that customers who relied on it had to stick with the legacy app, which prevented us from retiring it immediately after the new app was launched. This ultimately proved to be a good decision — the New Check-in Experience successfully launched later that year.

Feedback sessions

Due to the big impact this project was going to have on the organisation, we planned company-wide large-scale user testing sessions to gather feedback and insights about our new app. Some customers were also interviewed and had the chance to give us some feedback.

Three pictures showing people in a meeting room.
Photos from our testing and feedback sessions.

Some of the feedback we received during those sessions was either implemented before release or shortly after. Things like:

  • Introducing a way to navigate to events happening today.
  • Tweaking the syncing process and messaging to be very explicit.
  • Adding clear messaging when working offline.
  • And many more…

Outcome

This project resulted in the biggest launch we’ve had at Akkroo since I joined, and the results have been overwhelmingly positive.

Value added:

  • Massive performance and stability upgrade compared to the previous version of the app.
  • A codebase that was easier to develop for and allowed us to release many features since the release.
  • Refined user experience.
  • More mature and reusable component and design system.
  • Android support!

Room for improvement:

  • Not all the interactions made their way into the app due to time constraints, but most would make their way into the app eventually.