Dashboard
Project overview
Client
Lone Wolf
Industry
Fitness apparel / E-commerce
Location
Global
Type
New Product (from scratch)
Platform
iOS, Android & Web admin
Stack
React Native, Shopify, React.js
Services
Product, UX/UI, Development
Status
Shipped
The Challenge
A gym brand needs more than
just a checkout.
Lone Wolf sells gym apparel, but a plain storefront gives members no reason to come back between purchases. The brand needed an app that turns everyday training into a habit - and a store into a community people belong to.
Where it broke downThree friction points
01
A store with no reason to return
A standalone shop is opened only when someone already wants to buy. There was no daily hook to keep the brand inside a member's routine.
02
No sense of community
Gym culture runs on belonging and accountability, but shopping was solitary - no pack, no leaders, no shared momentum to plug into.
03
Store, app and ops disconnected
Products, orders, community and rewards lived in separate places, with no single panel to run the whole operation from.
The Approach
From a storefront
to a daily ritual.
Shop, move, belong. We built one connected system: a React Native app on a Shopify store, a step-driven rewards loop, a member community and a React admin to run it all.
React Native + ShopifyConcept to shipped
01
DiscoveryPhase 1
Map the member's day
We looked at how gym members shop, train and stay motivated - and where a brand can earn a place in the daily routine, not just the cart.
Deliverables
- Product strategy
- User journeys
- Market research
- Feature scoping
02
Commerce & RewardsPhase 2
Wire the store to a habit loop
We connected a Shopify catalog to the app and designed The Hunt - daily step missions that pay out Fangs, an in-app currency members earn, spend and show off.
Deliverables
- Shopify integration
- Fangs currency
- Step tracking
- Cart & checkout
03
UX / UI DesignPhase 3
Design Shop, Hunt and Pack
A monochrome, high-contrast system ties shopping, step challenges and The Pack community feed into one app that unmistakably feels like the brand.
Deliverables
- Design system
- Shop UI
- Gamification UI
- Community feed
04
Build & AdminPhase 4
Ship the app and the panel
We shipped the React Native app on iOS and Android, backed by Shopify, plus a React.js admin to manage products, orders, community and rewards from one place.
Deliverables
- React Native
- React.js admin
- iOS & Android
- QA & launch
✻
Shipped to production
Design Deep-Dive
A system built
to move with you.
A stripped-back monochrome identity - white, black and smoke with a single gold reward accent - carries shopping, step challenges and community without ever feeling busy.
01Identity
02Colour
03Typography
04Components
01 - Identity
Lone Wolf - wear the wild.
A sharp, geometric wolf mark paired with a hand-brushed wordmark - premium enough for apparel, bold enough to lead a gym feed.
App mark
iOS / Android icon
02 - Colour palette
Primary
Pure White
#FFFFFF
Secondary
Core Black
#0F0F0F
Accent
Smoke
#B8B8B8
Price
Golden Sand
#C4A23E
Highlight
Graphite
#2B2B2B
03 - Typography
Aa
Type system
Roboto
One family, four weights
Wear the wildDisplay · Roboto Black
The Hunt · The PackHeading · Roboto Bold
Earn Fangs on every step and rise through the pack ranks.Body · Roboto Regular
500 steps · 50 Fangs · €44.99Numeric · Roboto Medium
04 - Components
Lone Wolf Mobile app.
The Lone Wolf app blends a full Shopify storefront with The Hunt step challenges and The Pack community - shop apparel, earn Fangs on daily steps and rise through the ranks.
The admin panel
Lone Wolf admin.
A React.js admin panel runs the whole operation - products and orders synced with Shopify, plus community moderation and Fangs rewards, all from one dashboard.
What we shipped
What we've
built.
Platform
2
Native apps
iOS & Android
Store
Shopify
Commerce engine
Catalog · cart · checkout
Rewards
Fangs
In-app currency
Earned on daily steps
Community
Pack
Member community
Leaders · feed · follows
Ops
1
React admin panel
Store · community · rewards
Next case study
Sertify →
↗Let's make something
Got an idea?
Let's build it.
Tell us what you're working on. We reply within one business day with honest pricing and a first sketch of the approach.
hi@vendaxis.com →VendAxis.