Greenstack — Case study | John Blanco-Slingerland
  • Brand
  • iOS app
  • Marketing website

STACKING UP SAVINGS FROM AVAILABLE DEALS

Greenstack is a mobile iPhone app that provides a simple way to save people money, by taking advantage of membership perks, combining coupons, and providing savings in places they spend the most.

Client
Greenstack
Delivered
Brand, app, website
  1. {{ st.label }}

One team, one package: brand, app and launch site

ProcessFull brand audit, updated brand strategy, app design around core problem: saving people money, and a marketing website to promote it.

  1. 01

    Brand identity

    Logo, color and type, plus a color code for each deal type that carries through the app and site.

  2. 02

    iPhone app

    UX and UI for an end-to-end product experience.

  3. 03

    Marketing website

    A responsive launch site that explains stacking, shows the app and drives downloads.

Brand identity

The mark is two offset panels, one deal stacked on another, set beside a rounded wordmark in two greens.

Each deal type gets its own color, so a stack reads at a glance in the app, on the website and in ads.

StrategyGive the behavior a name. “Stacking” became the verb the brand teaches: the mark shows one deal on another, and the deal colors make a stack readable before any copy is read.

Greenstack logo, stacked lockup
Primary lockup
Greenstack logo, horizontal lockup in white
Reversed
Greenstack logo, horizontal lockup
Horizontal
Core palette
Stack green
#2EA85F
Leaf
#8DC63F
Signal lime
#C6F24E
Night
#0A0D0B
Deal-type colors
  • Sale
  • Offer
  • Discount
  • Payment
  • Loyalty
  • Online

Together they form the stack meter, the bar that shows what each deal adds to a saving.

Typography
Aa $50.74
Archivo Expanded Headlines and savings totals
Onest Interface and body text

The app

Built around the stack meter. Stacking is combining multiple deals and offers to get the most savings.

StrategyMake the saving the hero. Every screen answers one question, “how much am I saving here?”, so the stack meter repeats across the app.

{{ s.n }} · {{ s.tab }}

{{ s.title }}

{{ s.body }}

Why{{ s.why }}

The marketing website

The launch site opens on a stack of deal cards that fans out as you scroll, then walks through what stacking is, the app, and where it works.

Keep scrolling to move through the live site, from desktop down to phone.

StrategyTeach before selling. Stacking is an unfamiliar idea, so the site shows a stack forming before it asks for a download.

Open the site ↗

Outcome

One system instead of three separate projects: a brand, an app and a launch site built on the same idea, colors and language.

Brand
Ready for the App Store, ads, pitch decks and co-marketing with partner programs.
App
Core screens designed as one system, ready for engineering and for investor and partner demos.
Website
Explains stacking and drives downloads, with sections that can be reused for merchant sign-up.
Measure
Downloads from the site, memberships added in the first session, and repeat visits.

Launching a product?

I can take a product from name and logo to app screens and a launch site, with one consistent system across all of it.

Services on this project

  • Brand & identity
  • App design
  • Website design
  • UX strategy