A business-facing data analytics web app that provides consumer insights from billions of anonymous email transactions data
The idea was born almost as early as the MailTime app, because of the volume and granularity of email receipts. When aggregated, email data can provide valuable insights into people’s purchase behavior, interests, spending power, etc.
The project started in 2017 and the team started with in-app purchase (IAP) data.
My Role
I was in charge of the UI and visual design, including data visualization and building a component library. I worked with 4 engineers on this project.
Project Status
The demo was built for prospective clients and paid clients. Official website: Measurable.ai
Timeline:
Data metrics and wire-framing - 2017
Color palettes, charts, basic UI- 2017
Component Library and re-design - 2018
Why In-App Purchase (IAP)?
In-app purchase email receipts from Apple App Store has the most consistent format. They are the easiest to extract and analyze.
A lot of app analytics platforms do not have detailed information on IAP. For example, on average how much does a player spend in the popular game King of Glory? What the most popular IAP item in the game Pokemon Go?
IAP data has a market. Clients have expressed interests in our upcoming release and requested specific metrics from our data.
Design Principles
To facilitate my design decisions, I came up with the following principles.
Consistency
Rule of thumb. A consistent UI lowers the cognitive barriers for the users, ties the entire product together and is easier for development.
Clarity
For data visualization, clarity is the key. Colors that represent different data series need to be easy to recognize. The UI should be clean and clear because each page has much information and many elements.
Flexibility
The design of data visualization should accommodate single and multiple series. The design overall should be responsive because the data charts will be viewed on desktop and tablet.
Colors & Fonts
The choice of colors follows the rule of clarity. Read my medium blog on how the palette was created.
The fonts are all Lato. It has great readability for texts. Most importantly, all numbers have the same width in Lato and it makes the comparisons of numbers easy and clear.
Iterations
Header Area
The iteration of the header area reflects product decisions the team has made along the way. The current design facilitates the typical user flow: choosing context - adding apps - select dates - select region.
Moving the context switcher to the top - We plan to add more categories/context to the app in the future, such as e-commerce. Under different category/context, the layout of the page might change accordingly.
Adding “Top Charts” - For people who are interested in IAP data, we find that they also want to see top charts (and news). Such information helps with understanding the data charts.
Change of the “Customize” button - The latest design made it look more like a button, based on internal feedback on the design.
Adding a region selector - As we gathered more data, it is possible for users to narrow the comparisons down to a specific region.
Charts
Retention Chart
Wireframe vs. Final
Retention usually drops to a lower percentage in a short time. For a better comparison, the final chart design uses uneven grids.
User Overlap
Wireframe vs. Final
The strength of Measurable AI is the comparisons. When there are more to compare, a Venn diagram would be difficult to generate. Therefore, the final design is a heat map. Users can easily identify the largest overlap.
Summary Table
Wireframe vs. Final
A summary table has a lot of numbers. To make information more scannable and identify what numbers are larger, I added bars next to the percentage.
Component Library
Below is a sample of the component library that I created.
The actual component library has 7 pages of UI elements, including buttons, drop-downs, input fields, tabs, etc. For the charts, there are 6 types of charts used in this product, and each has 1 to 4 styles to better present the data.
Our team decided to use Material Design’s styles and the engineering team is using Material-UI for the front end.
The library was created in Sketch and handed off to our engineering team via Zeplin.
Why we need a component library:
There are many pages with repetitive elements. Building a component library will save me, the designer, a lot of time. It is also more efficient for the engineering team.
We are building the public beta now and a lot of features will be added or changed. With a solid component library, iteration on product design will also be more efficient.
See the final hi-fi design in PDF.
Interactions
Powerful Date Picker
I designed the date picker to be quite flexible. Users can easily choose a date range by using the pre-set, rewinding the calendar or typing the dates.
Hovering for Details
Hovering over the chart will trigger two types of information, a general overview or a specific data point.
Because some charts have many lines or data series, it is also helpful if the user can turn the data on and off.
Changing Data Granularity
For some charts, the user can change the data granularity between week, month and quarter.
Streaming Real-time
We are adding more features to the product, such as insights on ride-sharing. Here is a real-time mapping design for ride-sharing data.
Real-time heat map
Real-time line chart
The Logo
I also designed the logo for Measurable AI. The idea is to combine “data“ and the classic envelope of MailTime’s logo. There have been a lot of discussions and proposals before the team decided on the final design.
Watch Demo Video
