Behind the Scenes: Designing Flowiz Icons
The Flowiz app icon went through dozens of iterations before we landed on the final design. Here’s the journey.
The Brief
We needed an icon that:
- Represents flow and productivity
- Appeals to users with ADHD
- Works at small sizes
- Feels calm, not overwhelming
Early Concepts
Attempt 1: Abstract Brain
Too literal. Users associated it with medical/clinical apps.
Attempt 2: Checkmark Overload
Too many checkmarks felt anxiety-inducing rather than calming.
Attempt 3: Flowing Lines
Abstract flowing lines representing mental flow states.
The Winning Direction
We landed on a simple, geometric shape that:
- Suggests forward motion and progress
- Remains recognizable at 58x58 pixels
- Has a calm, balanced composition
- Uses a soothing blue-green palette
Color Psychology
| Color | Emotion |
|---|---|
| #87A96B (Sage green) | Calm, growth |
| #6B89A9 (Muted blue) | Trust, stability |
| #F5F5F5 (Off-white) | Clarity, space |
Size Testing
We tested the icon at every iOS size:
App Store: 1024x1024
iPhone: 180x180, 120x120, 87x87, 80x80, 60x60, 58x58, 40x40
iPad: 167x167, 152x152, 76x76
Apple Watch: 48x48, 44x44, 40x40, 24x24
Variants
We created multiple variants:
- Default: Full color
- Dark: For dark mode devices
- Tinted: Adapts to user’s chosen tint
- Clear: Minimal outline version
Video Process
Watch our design process in this short documentary:
Lessons Learned
- Simple scales better - Details get lost at small sizes
- Test on real devices - Simulator colors differ from real screens
- Get feedback early - Fresh eyes catch issues you miss
- Trust the process - The first idea is rarely the best
The right icon seems obvious in hindsight. Finding it takes patience.