Inside the Development Process of Our My Analytics App

Before we at KISSmetrics embark on anything, we first make sure we are solving a problem for people. KISSmetrics is in business to give people actionable data and insights they can use to make decisions. We are here to make sure our customers have access to the information they need.

In the development of the My Analytics app, we used the same approach of solving problems. The problem wasn’t that there weren’t any Google Analytics iPhone apps. (In fact, there are around 30 apps available.) The problem was that there was a gap. Some apps were too simple and limiting while others were too complicated.

So, as analytics enthusiasts ourselves, we wanted to give back and make an app that hit a happy medium. My Analytics gives you the data you need, yet avoids the complications of trying to cram every Google Analytics feature into an app.

In this post, you’ll get an insider’s look at our product development process. We’ll get into the original vision for the app, how we promoted it, how we got feedback, and how we iterated. You’ll learn how we created the app and maybe get a few takeaways for yourself.

Before we get into the details, I first want to introduce you to a few integral people behind the app. They’ll be mentioned frequently in this post through quotes, and I relied heavily on them to put this post together. Here are the five key people who were involved in the app:

Will Rust – Developer behind the app

Ian Main – Creative Director at KISSmetrics and designer behind My Analytics

Lars Lofgren – Marketer behind My Analytics and a key player in talking to users and getting feedback

Hiten Shah – KISSmetrics Co-Founder who assisted in customer development interviews

Jason Evanish – Product Manager for My Analytics who helped form customer development questions and conducted interviews.

For a background on structuring customer development interviews, check out his post.

The Original Vision

We saw the gap. We wanted to build an app and give back to the analytics community. People have supported us immensely through our blog and by using KISSmetrics so we wanted to say thanks.

-Lars Lofgren

Once we confirmed the product hypothesis based on a dozen interviews with Google Analytics and KISSmetrics customers, we set about defining the primary key tasks for the app.

Such key tasks were:

  • Quickly see an overview of the health status of your sites
  • Be able to compare metrics across appropriate dates
  • Get a general overview of your metrics in one place
  • Quickly act on results by emailing data to people on your team

I asked Will Rust to pinpoint the main use case for My Analytics. Rust said, From the point where I got involved, which was pretty early on, we knew that the app was going to be more about helping the user answer the question “How are things going?” rather than just “Where are things at?” and to be able to do that quickly on the go or in a meeting. We just needed to find the right way to do that.”

Let’s get into the details and explain the process of developing the My Analytics app.

How We Communicated the Vision and Early Progress to Our Team

In the early conception of My Analytics, this was sent to the KISSmetrics team. It explains our beginning interviews with users, the feedback they gave us, and what key tasks they were looking to accomplish with a Google Analytics app. It also gets a little into the product development process:

How We Got Out Word about My Analytics

We had the original vision for the app. In short, create a Google Analytics iPhone app that lets users compare and track goals across relevant time frames. Users can view metrics such as visits, unique visitors, page views, goals, ecommerce transactions, and ecommerce revenue on the go.

So how did we get people to sign up for early access to the app?

We used a resource which already was getting a lot of traffic – our blog. We used CTAs to spread the word and send people to our landing page:

MAA landing page one

Many of us added links to the landing page in our email signatures. Just these simple steps brought us 3,257 opt-ins after 2 months.

How did we distribute our app when it wasn’t in the App Store or available publicly?

We used a platform called HockeyApp to distribute our early access versions of My Analytics.

Our early testing was done internally and with a dozen other people we know personally.

The Emails We Used to Invite People

As mentioned, we had 3,257 people who signed up for our email list from the My Analytics page. We sent a number of emails to users before our launch, but we’ll feature only three of them here that helped us kick things off and get the ball rolling. These three emails helped us get lots of feedback so we could focus on iterating instead of figuring out how to get more feedback.

For our emails, we used Intercom. Will Rust said, “Intercom helped us narrow our list to people in San Francisco. From those, we randomly emailed about 30 and invited them to come into the office to check out the app. I believe around 8-10 actually made it into the office, each separately.”

As Rust stated, we invited a few locals to our San Francisco office. This was all done before we released it to remote users. Rust explains how the users internally tested it:

“We provided an iPod touch with the early version of our app. (At that point, we weren’t deploying to devices outside of the office.) We observed their use of the app, noted any features that seemed to be hard to find or figure out quickly, asked them for their opinion and what they might want to see added to the app. These interviews gave us our first hint that swiping to change date ranges wasn’t easy to pick up quickly and that people wanted more metrics (goals).

“Outside of asking friends to check it out, this was the extent of our 1-on-1 user testing.”

This first email was sent to all members on our mailing list. Essentially, it was a mass invite, because we needed around 50 people to test the app and give us feedback on it.

Email One:

“Subject: More Invites for My Analytics are Going Out Soon

“Hey (name)!

“We just started sending out some invites for My Analytics to a very small list of people (like teeny weeny small). Mostly internal team members and such.

“Our early access users have already sent us some amazing feedback. We’ve got a list of improvements that we’re cranking through as fast as we can. Even if you’re not one of the first to get an invite, you’ll get a much better product when you do. ;)

“Now it’s time for us to send out another batch of invites.

“I don’t know about you but I can’t stand waiting. And it just so happens that we’ll be sending another batch of invites in the very near future. If you want access to the My Analytics app as soon as possible, reply to this email and let me know. I’ll see if I can sneak your name into the list. :)

“BUT I have one condition.

“I can’t bump you to the front of the line unless you really want access. I don’t mean kinda-sorta want access. I mean REALLY OMG GIVE ME GIVE ME want access. So if that’s you, hit me up.

(signature)”

As you can see, we notified those who wanted to get in the front of the line that they would need to reply to the email and tell us they wanted the app right away.

This email garnered 330 responses, a 10% response rate. As mentioned, we needed only 50 or so people to start testing the app at that point, so we had to roll out invites in stages because we got so many replies. We initially gave 89 of the 330 access to the app.

When we had the next version of the app ready for more feedback, Lofgren invited another 236 people.

Email Two:

“Subject: You’ve been added to the next batch of invites for My Analytics!

“Congrats!

“When the next batch of invites go out for My Analytics, one of them will have your name on it. :)

Now, our goal is to help you keep tabs on how you’re doing when you’re away from your desk.

And I want to give you an overview of what to expect in the coming weeks as we work through this.

“Here’s how it’ll all go down:

  1. In the next week or so, you’ll get another email with your invite.
  2. Using your iPhone, you’ll need to click on the link in that email. This will give you access to the app.
  3. You NEED to allow push notifications from us. We’re not going to spam you, this is how we notify you about updates. We’ll use the normal update process once we’re in the App Store.

“I know you’re really, really excited about using the app. And for giving you an invite to our Early Access list, I do need one thing from you. Each time we push an update, I need at least one piece of feedback from you.

“Remember: each update = 1 piece of feedback.

“If you’re super swamped with work and won’t have time for this, let me know and I’ll move you to another batch of invites.

“Hope you’re ready. ;)”

A few days after this email was sent, Lofgren sent this email that included the actual invite with the link to download.

Email Three:

“Subject: Your invite for My Analytics has arrived!

“The time is now! Woohoo!

“Here we go.

“When you install the app, don’t forget to allow push notifications. Otherwise, you won’t get updates from us. That’ll make me a sad panda.

“And remember the deal we have: each update = one piece of feedback from you. The best way to send us feedback is within the app itself.

“Click this link with your iPhone to get My Analytics. Go go go!

“Enjoy!”

By the time of App Store launch, we had 7,000 people on our email list. We achieved this number by using the resources we already had – a big Twitter following, Facebook fans, blog readers, and our email signatures.

How We Got Feedback from People

We got feedback on My Analytics through a few channels:

  • We embedded an email modal view to get feedback from users. (Thanks to the guys over at Rover for the suggestion.) We made it very simple for users to give their feedback. They just loaded up the My Analytics app:

my analytics homepage

And they tapped on the action button:

my analytics action button email modal view

And they emailed us their feedback:

my analytics email feedback

We didn’t make users categorize their feedback (i.e., Bug Report, General Comments, Idea, Technical Support, etc.). We sorted all that out ourselves and responded to every email.

We previously used a third party feedback service that was integrated into the app, but to us, it didn’t feel like the right solution.

  • As mentioned, we met with people in our office. This allowed them to see the product, and we could see how they interacted with it. We found that email brings more honest feedback. As Rust explained, “I’d say that we’ve received more honest feedback from within the app as opposed to our early 1-on-1s. It’s just easier for people to criticize via email than in person. Plus, they’re not on the spot. They get to use it for a few days and see what they really like or don’t like.”
  • We used KISSmetrics to see the average amount of time between application install and discovery of features. We also used it to see the average number of profiles and date ranges viewed per use.

The Design History of My Analytics

We went through a lot of different design iterations (and we’re still not done) throughout our time developing My Analytics. After this section, we’ll get a little into the design changes we made based on feedback.

I asked Ian Main to give me a design overview of the app. This was his response:

“Once the overall product hypothesis was confirmed based on conducting a dozen interviews with Google Analytics and KISSmetrics account holders, we set about defining what the primary key tasks were that made My Analytics the app users wanted.

“Understanding these key tasks let us progress to wireframing layouts so we visually could start to see patterns around hierarchy and task flows.”

my analytics wireframes

My Analytics wireframe layout mockups

“Creating wireframes let us rapidly design many layouts and data scenarios, as well as mix and match components and other UI elements.

“Having the wireframes side by side also allowed us to visually assess hierarchy and visual flow and determine which layouts did the best at representing the data. We could study up close or take multiple steps back from the screen and see if that layout still appeared visually strong among the others from afar.

“Once we got down to one layout, we could start to apply more detail and color to the layout. This would help us define and group specific patterns for familiarity and consistency.

“It took us quite a while to get the overall tone right. This was done by exploring many color combinations and palettes. We realized we have a connection with Google Analytics; however, if we used the Google Analytics color palette, we wouldn’t be able to expand our app to other services in the future.”

maa colors

My Analytics Photoshop layout color iterations

Step-by-Step Version and Design Evolution of My Analytics

Now we’ll get into the specific version history of My Analytics along with comments from developer Will Rust.

First Version:

Dashboard:

maa dashboard version two

Product selection:

my analytics alpha product selection

“The very first version of the app showed only one metric at a time. You would pick the profile that you wanted to view, much as it is now, but where it took you was to a dashboard view where you would change metrics and date ranges all from the same place. This worked while we had a limited number of metrics and date ranges but wasn’t going to be able to support users with 20+ goals or more than 5 or 6 date ranges.”

Second Version:

Dashboard:

“We tried to future proof the metrics menu by using a popover menu. But it seemed a little busy, the buttons were still small, and this didn’t solve the problem with changing date ranges.”

Export menu:

export menu maa

Email export:

The feedback tool (before our current email modal view):

analytics feedback

Third Version:

Dashboard (unchanged from version 2):

my analytics third version

Metric selection, where users had the ability to “favorite” a metric by tapping on a heart. Upon “favoriting” a metric, it would automatically show in the dashboard:

maa metric selection

“Then we got to the expanding table view concept that we’re using now. It just looked a little different along the way.

“But we still had the issue of handling more than 5 or 6 date ranges. Plus, the paging dots we were using (above the chart) weren’t really helping the users to understand that swiping would show them more date range options. This issue was raised several times in user feedback.”

Fourth Version:

Version 4.1 Dashboard:

maa version four dashboard

Metrics selection:

maa version four metric selection

4.2 Dashboard:

maa 4.2 dashboard

4.3 Date Selection:

maa 4.3 date selection

“Next, we tried a combination picker view for date range selection. But after using it for a few days, it was obvious that there was too much work for the user. It was big, clunky, and kinda slow to use. I don’t think that anyone outside of the company even got to see this one. But it got us to a better option.”

4.4 (Current Version) Dashboard:

Dashboard:

maa 4.4 dashboard

maa date selection 4.4

Date Selection:

my analytics version five two

“We reduced the selection of new date ranges to 3 actions. Tapping anywhere in the date range bar would bring down a 2 part menu. You select 2 related date ranges, and you’re done. I still believe we can do better than this, but you can see where we’ve come from.”

The Design Changes We Made Based on Feedback

Ian Main discusses the design evolution and how the iterations were based on user feedback:

Metric Selection

Learning what metrics people wanted determined how we built metric selection. We designed the first metric selection with a limited number of metrics. Visits, Uniques, and Page Views were the only metrics. To those, we added one more item in the metric menu called “More.” This was a feedback button that let us gauge early on what metrics people wanted. We quickly learned people wanted a greater selection of metrics to view, which also told us we needed to change the UI component that selects metrics.

The original concept focused on tapping through full screen views of each metric. Originally, you could see only one metric in detail at a time. You would have to tap the metric selection menu to view other metrics.

My Analytics early version of metric selection

In the next iteration of metric selection, instead of using a horizontal menu of metrics, we contained the metrics into a dropdown menu. This allowed us to save space in the UI and reduce the noise so people could focus on their data. Unfortunately, the dropdown menu wasn’t going to be flexible enough to support the metric selection flow people wanted.

My Analytics version containing the metric selection in a dropdown menu

After further discussion and feedback, we decided to remove metric selection entirely from the data view screen. Although we still believed fast selection was a key task, we wanted a flexible clean approach. In the next iteration, we moved the metric selection menu to an independent screen before the data details screen.

Exploring a drill-down menu that contains metrics and metric types

The final and current version went back to an inline approach. Rather than showing the whole metric detail, we minimized each metric to show only the key metric comparison data. Then on top, it could be expanded to show more detail.

This let us list out all available metrics for that profile on a single screen without taking up the whole screen real estate. We could show 4-5 metrics on a single screen and cues that more were below if scrolled.

Also, users didn’t need to tap for basic metric data. So we could focus on our original hypothesis that people wanted to load the app and see results quickly and, if desired, dive deeper into specific metrics.

Final My Analytics App version of metric selection

Date Range Selection

Another high level key task was comparing a single metric over a period of time. This component also went through dramatic changes based on feedback during the development of My Analytics.

We ended up creating a custom selection system that is fast, intuitive, and allows for expansion of more date ranges over time.

Simple process of selecting a date range with My Analytics

Icon Iteration

Interestingly, when changes are made throughout the app based on feedback, learning, and maturity, whole design aspects change with it. Here are icon designs that changed while the app was going through the iteration learning process.

My Analytics icon iteration

A Few Final Words…

What we’ve covered is a “behind the scenes” view of how My Analytics was built. Looking forward, we’ll continue much of what we’ve always done – build product, get feedback, and iterate. We use this same process every day with KISSmetrics because it’s how to build the best product. With My Analytics, we’re striving to make the best Google Analytics iPhone app available. We’d love to have you try it out, give us feedback, and tell your friends about us.

I’d also like your feedback on this post. Let me hear it in the comments!

About the Author: Zach Bulygo is a blogger for KISSmetrics, you can find him on Twitter here. You can also follow him on Google+.

  1. You guys are just so damn cool. From finding & filling a niche, to putting out great tools, to sharing with the rest of us your process. Bravo

  2. Is this app ever going to be available for android devices?

  3. Thank you so much for sharing the process, lessons learned and the final product!

  4. Excellent article. Just excellent

  5. Kissmetrics Rocks!!!!!!

    I would love too see this on my android device.

    Thanks & keep sharing.

  6. I have not tested the app yet but thanks you for this great analysis report!
    I’ve really enjoyed it
    I think you could use landscape mode on the phone to show chart better…a pattern that it is also present on iPhone default stock quotes app http://m.tuaw.com/2013/05/15/iphone-101-getting-more-out-of-apples-stocks-app-on-ios/

    What about ios7?..did you think about it during design process?

  7. Hi! How long does it take the whole process? Its a great blog post!

12 comments

Please use your real name when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →
Buffer