Skip to content

Instantly share code, notes, and snippets.

@mikedijkstra

mikedijkstra/totalizer_design.md

Last active August 29, 2015 14:06
Show Gist options
  • Save mikedijkstra/2f99b59f1703143db56a to your computer and use it in GitHub Desktop.
Save mikedijkstra/2f99b59f1703143db56a to your computer and use it in GitHub Desktop.
Download ZIP
Totalizer Design Tasks
Raw
totalizer_design.md

Dashboard

Dashboard

Key elements

  • Header navigation
  • Metric modules (see below)

Growth Metric Module

Growth Metric Module

Key elements

  • Icon
  • Title
  • Chart: 30 Day line graph
  • Total Users
  • Today (Amount with change)
  • Last 7 Days (Amount with change)
  • Last 30 Days (Amount with change)
  • Last 30 Day Growth Rate (Amount with change)
  • Hover state for Today, Last 7, Last 30, Last 30 Day Growth Rate to see % change

Blank slate

Growth Metric Module Blank Slate

Syncing

When the user sets up their metric for the first time, in the background we go and get all their data and sync it. The front-end will poll for the data and when it's done will show it.

Growth Metric Syncing

Sign up

Sign up

(In the real version, this won't have the navigation at the top.)

with validation

Sign up validation

Data source

This can look a little overwhelming. Most people will be able to get the details from Heroku, but we somehow need to make the form look less overwhelming. Maybe it's inlining elements to tighten it up. The port can have a default value as usually it's always 5432.

Data source

Data source

with connection error message

Data source error

Metric

I've hidden a few fields to simplify the form, that way if you need more customisation you can click the links and the fields slide down.

Growth metric

With optional fields expanded

Growth metric expanded

With connection error

Metric error

Icons

Some of these will be covered in other tasks, but I just want to make sure I've got all the icons I need around the place.

  • Growth
  • Activation
  • Engagement
  • Retention
  • Revenue
  • Application/Project
  • Datasource
  • Metric

Homepage

Once we know what charts look like this can be done. All the content is in, just needs to be made more awesome!

totalizer.io

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment