iTunes sales decoded
Case Study
Sales and Trends
Sales and Trends provides next-day App Store sales and unit data so that you can measure the performance of your free or paid iOS, macOS, tvOS, and visionOS apps, as well as any associated in-app purchases. Data in Sales and Trends is recorded when a customer initiates a transaction on the App Store. Sales data for iMessage apps and sticker packs is included in the data for the containing iOS app.
View top apps or in-app purchases and their contribution to your overall business.
If you offer auto-renewable subscriptions, view subscriptions data on the summary, retention, state, and event pages to gain quick insight into the performance of your subscription business.
View units, proceeds, sales and pre-orders with options to filter data by selected time period, app, subscription, and country or region.
Download and view reports in order to further analyze the performance of your app or subscriptions.
Functional requirements
Data displayed as an intersection of measures (Units and Proceeds) by Dimensions (Content, Territory, Platform, Category, Content Type, Transaction Type, CMB, and Version) that can be filtered by data points within all dimensions and a date range in an area or bar chart
A virtual tour to explain how to manipulate the dashboard to display the report you need.
Terminology tooltipsChart tooltips
Type-ahead dropdowns for long filter lists
A data slider to slide a set date range to another time or expand or contract the range from either end
Tabular data for each chart
Downloadable reports to various file formats
Quick access to a day report
Custom territory group management
Saved reports management
My contribution to the first, internal iteration of Sales and Trends
We used a Waterfall methodology for the design phase of the project. We made sure that all of the functional and visual design was approved by all stakeholders before handing off the designs to development. To design all of the required features took a few months. With today’s design, communication, and documentation tools, it would have taken a quarter of the time it took back then.
We used an Agile methodology during the development phase of the project. I worked as the sole Lead UX Designer and CSS/LESS Developer alongside Product Owners, Project Managers, Frontend Engineers, Middleware Engineers, and Backend Engineers to ensure that everything was built to design specifications. To speed things along and get the final app to be pixel perfect, I wrote some of the CSS. I had periodic check-ins with the Product Owners to ensure make sure we were all aligned and to discuss new feature requests and enhancements that we could incorporate using Agile.
Internal goes public
Once the Marketing, Finance, and C-Suite teams experienced the delight of using Sales and Trends, they wanted to spread the awesomeness to the rest of the world on iTunes Connect with a new, enhanced version that adopted the new Apple aesthetic.
Requirements for the second version of Sales and Trends included
Localization for multiple countries
A new visual look based on iOS 7
Designing the public dashboard
The idea of a design system was a fledgling idea at the time and Apple didn’t have one for iTunes apps. The thought was that Apple design was obvious. Just inspect an Apple product and if you are a good designer, you will be able to tell how to make another one. So I inspected the other iTunes Connect web apps for text styles, colors, icons, spacing, etc. in the browser and created new designs based on that research. I worked with one other Designer in the iTunes Tools group to refine my designs to ensure they were ready for development. We had a few whiteboarding sessions that informed my mockups in Omnigraffle.
From design waterfall to development agile
Design was done using a waterfall approach. No development could start until all designs were approved.
Once development started, we transitioned to an agile approach.
Localization introduced challenges with content that was designed for English. Many languages use longer words and phrases to mean the same thing. Those longer text strings needed to fit. When needed, we added ellipses to end of a string with a tooltip to display the full word or phrase.
A visual redesign often doesn’t seem like a big deal, but in the case of iOS 6 to 7, it was huge. That was the point in history when Apple shifted away from skeuomorphism, with icons that were little 3-dimensional representations of things, to icons that were monochrome combinations of lines and solid shapes. The font changed from Myriad Pro to Helvetica Neue, which was thin to match the icons. The change reinforced Apple’s vision for software and hardware to feel as light as air. Apple products are meant to be useful and un-intrusive, as if they were there all along. The interface for Sales and Trends faded into the background to allow the data itself to take center stage.
Same as before, I designed and contributed CSS for the final, first, public version of Sales and Trends for iTunes Connect.
The features
Date slider
The date slider control was a novel bit of interaction magic that I had introduced in the first version of the app. You could get a rough date range using the date picker, but the date slider gave you a more visual interaction with entering a date range.
The lighter chart to the left or right of the selected date range gave the users a sneak preview of what lay beyond.
I’ll use the example below to explain.
Notice that the area left and right of the selected date range is lighter. If you wanted to explore the peak in the area chart to the left of the selected date range (earlier), all you had to do was click and drag the selected area to the left, over the peak. The chart and data table would automatically update with the newly selected date range.
If you wanted to change the length of time, you could grab one of the date slider handles and drag it in either direction, including beyond the range displayed in the date slider viewport.
In version 2.0, we updated the slider handle icons to circles and we changed the way we indicated if there was more data to the left or right of the date slider. If no data existed before or after the timeline on the screen, the border on the date slider stopped at the top of the slider (example below shows no data beyond January 31). If there was data extending in either direction on the timeline, the border on the edge of the timeline extended a bit above (example below shows data before October 28). It was a subtle way to communicate how far you could stretch the slider handles. We tested the feature extensively to
make sure it worked
make sure it made sense to our users
Tour
This screen illustrates Step 2 in the tour to introduce users to the product features.
Data table
The Sales and Trends data table styling introduced clean, flat, table styling that had not been seen before at Apple.
Date picker and Filters
Filters could be added by adding or removing pills. Standard dates could be selected with a minimum of two clicks. Custom date ranges could be selected with a maximum of five clicks.
Saving a report
Any view of the dashboard could be saved as a custom report that you could load up instantly for presentation.
Export report data
Report data could be exported to CSV, XLS, or Clipboard.
Save custom territory groups for filtering
Many users reported on the same, unique groups of territories month after month. I designed the Manage By Territory feature to save users untold hours by allowing them to save sets of territories they could select as one filter.
Apple documentation
Want to learn more about the Sales and Trends? Read the documentation App Owners reference for their reporting needs.
Overview of reporting tools on the Apple Developer website.
Sales, trends, and reports on the iTunes Connect Resources and Help website.
Be sure to watch the short video illustrating the Sales and Trends features with voice-over from someone who may or may not be Craig Federighi.