NomNom Insights project: a UX design case study

Team: Annelise, Ben, Cuong, Niki

Time: 2.5 weeks sprint (May 2016)

Tools: Sketch, Omnigraffle, Invision, Keynote

Methods: Competitor Analysis, Online Survey, User Interviews, Personas, User Stories, Scenarios, Design Studio, User Flows, Sketching, Wireframing, High Fidelity Prototype, Usability Testing, Client Pitch

Background and Brief

We were tasked by NomNom to design their onboarding solution for new users. NomNom are a SaaS startup with a mission to help small to medium startups and tech companies to make better products by giving their teams a place to integrate and act on customer feedback data. They wanted us to convey the value of the product as quickly as possible while encouraging new users to integrate their CF data and see the value for themselves.

Hypothesis

“We believe that providing sample data where users can learn by doing and therefore see the value of the product for themselves, will result in better understanding of how the product works. We will know this to be true with an increase in customer feedback sources being integrated.”

Research Phase

The initial scope gave us lots of room to explore the user onboarding experience. Given our 2 week sprint time constraint and our client’s imminent public launch we decided focus on the first time in app experience only.

We sent out a recruitment survey through our social media networks and directly approached people who fitted the current target market for NomNom, which included; product managers, product designers, UX designers, heads of business development and CEO’s of small to medium sized software companies.

Competitor Analysis

We not only looked at what others in the landscape of data integration tools were doing with onboarding but we also reviewed general best-practices.

“What happens right after sign-up makes or breaks any web product.” — Nate Munger, Intercom

Onboarding had to be fun, show value in as little as 10 seconds and give a sense of progress through a simple guided process.

User Research

I set up a Google Form so we could send it out as a recruitment survey through our social media networks and directly approached people who fitted the current target market for NomNom, which included; product managers, product designers, UX designers, heads of business development and CEO’s of small to medium sized software companies. We got a healthy 46 responses.

One of the interviews I conducted face to face.

We then chased down respondents who’d expressed an interest and conducted 30–60 minute interviews with 15 potential users.

Key Insights

Affinity Map of our users responses.

Analysing our user interview data through affinity mapping, revealed that we had different attitudes for onboarding and learning new software. Some of our data seemed to be backing up our client’s assumptions that prompting instant integration was the key but there was also data showing that approximately half of those surveyed wanted a different experience.

Personas

We gathered our user needs and behaviours into 2 personas to guide our design.

2 distinct personas representing 2 different needs.

Design Phase

Design Studio with the client.

Design Studio

We conducted a design studio with key stakeholders including the CEO, Product Manager and UX designer to explore two design challenges: 1) how an onboarding experience would flow considering the needs of our user 2) how we could improve the design of the integration page to provide my integration information and feedback.

Sketching and Prototyping

As a team, we felt that our users needed a friendly welcome when first entering the NomNom site, so we introduced a welcome screen. Focusing on the need for flexibility we decided to test how users responded when given a choice (to either integrate immediately or take a tour) on that welcome screen. We created paper prototypes to test this as well as our ideas for the integration page.

Assumptions were tested early with paper prototypes

Because we weren’t redesigning the UI of the product we moved to Sketch for mid-fidelity wireframing quite early in the process. By moving to higher fidelity prototypes early we hoped to gather richer feedback from our testing.

User Testing

With a test script for our users, we managed to get in 5 rounds of tests and design iterations before settling on a high fidelity prototype. We conducted most of the tests face to face but some were successful done using Invision’s Liveshare feature, Skype, and Quicktime Player for recording.

Insights and Iterations

The most challenging and interesting aspect of this project came from the apparently conflicting insights we were gathering from users, and what the client was telling us about what their users needed. Integration was a key way the business knew they could show value early but they also knew that users might not do this before they had been convinced this sometimes lengthy process would pay off. NomNom believed we should focus on integration and on product managers, their core user. We found that the order of the screens was important. If we started with the integration page, we created confusion as to what was real data and what was dummy data.

In trying to cater to choice and differing preferences with how users liked to be onboard, and to the business’ priorities and had confused our testers.

This flow feels very bizarre… I’m feeling very confused right now because I don’t know if this is showing me my data or not.

— Mina Badawi, Administrator

A mixture of styles had become a bit of a Frankenstein. This had been reached by iteration after iteration based on the latest round of testing but we decided to take a step back and return to onboarding best-practices.

What’s more, testing with existing NomNom users revealed a powerful feature of the product that they felt we needed to include in our onboarding to show new users value in the product. This was the Smart Tags feature, so we decided to include that in our onboarding.

What NomNom gives you out of the box is great. But once you start customising it with your own Smart Tags it becomes a very valuable tool.

— Murat Mutlu, Marvel Co-Founder

We stuck to our 3-step tour that went well throughout testing but only called out one feature per onboarding stage. And we removed integration from the tour altogether.

Our welcome overlay: user and business needs combined.
Step 1 of 3 — users are shown one key feature and given clear next steps

Outcome

We tested our final prototype (https://goo.gl/7QvJjP) and found users’ confidence in the product increased, as well as the understanding of the value. They knew why they should integrate their own data and how to do it. Those that wanted to integrate straight away were given that choice which in turn met business goals.

Final testing of our prototype.

We had made a bold move to pivot our design at such a late stage but testing validated our decision.

As a team we’d succeeded in providing users like Andy and Zhang with more education about NomNom and how it could help them see all their customer feedback in one place; redesigned the integration page to make it more intuitive to integrate data sources; and provided NomNom with much-needed user testing data to make a scaleable onboarding experience.

Next Steps

During our testing we did get some feedback that we wanted to explore in future versions:

Testers like Andy expressed a desire for a “play” environment, like a sandbox while testers like Zhang said they’d hope for tooltips throughout the product and opportunity for additional short tours. We also found that some from larger organisations cited a desire for reassurance on the accuracy of the Sentiment algorithm. If that was possible to share or at least try to reassure, we would have loved to address that for NomNom’s users.