Alon Netzer alonetzer.digital
The online newspaper of Kibbutz Netzer Sereni: brand, editorial UX and the full build.
Read the case study
Projects
Magiha magiha.co.il
An AI-assisted Hebrew proofreading service: product design, UI system and frontend.
Read the case study
The 3D House interactive
An explorable Three.js home where every room holds a piece of my work. Click to walk in.
Small stuff I've done lately print & identity
Business cards, stationery and other quick pieces from the studio.
Portfolio case study · Web design & product
A kibbutz newspaper, rebuilt as a living community platform
Design, UX and build for the weekly newsletter of Kibbutz Netzer Sereni. Hebrew, right-to-left, read mostly on phones by residents of every age.
- Base44 · React + hosted data
- Public site + admin console
- alonetzer.digital ↗
Home
A front page, not a feed
The layout borrows newspaper hierarchy so the community reads it like the paper they already know.
Desktop · 1440 px
Mobile · 390 px
One lead story, full width
A large photo and a 50 px headline give the page a clear entry point. Editors can pin any article as the lead.
“Flashes” as a red ticker
Short alerts sit in a dated side column with red time stamps, so urgent items never compete with features.
Tunable typography
Headline, subtitle, flash and date sizes are settings, not code. Editors adjust hierarchy without a redeploy.
Playful brand, serious grid
The mascot and lime stripe carry warmth; underneath, a strict two-column grid keeps reading calm.
Sections and articles
Color-coded rooms
Each section owns a tint and an icon, so readers know where they are before reading a word.
Management
Community
Stage
Article · desktop
Article · mobile
Section header as a signal
A soft gradient band with the section name in heavy Rubik replaces a generic page title.
Art direction per device
Each article stores a desktop and a mobile lead image with its own focal point, so faces are never cropped on phones.
Mobile first
One thumb, one green button
Most residents open the newsletter from a WhatsApp link on their phone, so the phone layout was designed first.
Home
Menu overlay
Flash feed
A three-target bottom bar
Home, a big lime menu button in thumb reach, and the Members Club. Nothing hides in a hamburger corner.
Native-feeling details
Pull-to-refresh, a red flash timeline with date pills, tap-through cards, and push notifications for new content.
Admin console
A newsroom CMS for volunteer editors
Editors are community members, not developers. The console hides complexity behind nine plain tabs.
Content management · desktop
Content · mobile
Dashboard tabs & who sees them
- Content
- Flashes
- Users
- Mailing
- Archive
- Members Club
- Vroodim
- Analytics
- Settings
content editors too main editor only
Block-based editor & publishing controls
Text, image, row, button and file blocks; desktop and mobile lead images with focal points; drafts, scheduling, pinning, residents-only access and preview.
Why it works
Three lenses on the same decisions
Visually
- One display face, Rubik, at heavy weights gives Hebrew headlines a newspaper voice.
- Colour arrives only as meaning: section tints, red for urgent, pink for joy.
Conceptually
- Not a blog: a front page, sections, a ticker and an archive, mirroring the printed paper.
- Community rituals live inside the newspaper instead of scattered WhatsApp groups.
Usably
- Thumb-reach navigation and a full-screen menu on mobile; classic top nav on desktop.
- Accessibility widget, open-access mode, and resident-only gating for sensitive items.
Vroodim
Members Club
Portfolio case study · Product design
An AI proofreading, rewriting and summarizing studio for Hebrew writers
Product design, UX and full build on Base44 with a Gemini backend. The home page is the tool: paste, send, get a corrected text and a report.
- Product design
- UX / RTL
- Base44 build
- Admin & CMS
- magiha.co.il ↗
The workspace · mobile
The proofreading workspace
Three panels, read right to left
Source text, corrected text and the correction report, in Hebrew reading order. Salmon means “this text has been edited”; the muted cream input stays quiet.
Desktop · 1440 px
Mobile
Report as a table
Before, after, and the rule that was applied, each linked to the Academy of the Hebrew Language. The ✕ reverts one correction and updates the text.
Colour = data
Four tabs, four kinds of feedback, each with its own colour: report in teal, headlines in navy, rephrasing in plum, summary in orange.
Mobile: stack, don’t shrink
Corrected text first, report below, a sticky + button for a new check and a “show original” toggle instead of a third column.
Visual language
Warm paper, one bold accent
A cream canvas that feels like marking a printed page, with burnt orange reserved for the primary action.
Colour as meaning · hover a stripe, click to copy
Four tabs, four kinds of feedback, each with its own colour. Everything else stays cream and white so the orange action is never in doubt.
Components & type
Pill buttons with a soft drop shadow are the only elements that float, so the eye lands on actions. White cards with a hairline border; text areas in a deeper cream read as a sheet on a desk. Heebo / Inter, right-aligned, generous line height. The logo, a magnifying glass wearing reading glasses, doubles as favicon and PWA icon.
Pricing hero
Google-enabled login
Shadow Writer
A second product in the same shell
Switching modes flips the entire theme to dark violet, so the user always knows which engine is working.
The brief
Four rewrites
Mobile
A brief, not a prompt
Three plain questions (who reads it, what for, how long) plus optional house rules. The user never writes a prompt.
Sliders with words, not numbers
Humour, formality and humanity run 1 to 5, but the labels speak: “WhatsApp to a friend” up to “royal letter”.
Four options, each explained
The model returns four rewrites as tabs, each with “what makes this version different”. One tap sends the pick back to proofreading.
Mobile-first and accessible by design
Designed at phone width first, then widened
Accessibility is a feature, not a plugin: preferences apply before the page paints, so nobody sees a flash of the default layout.
Context-aware menu
Accessibility widget
Consent, once
Context-aware menu
Guests see Login and Register; members see Profile. Shadow Writer keeps its icon so it is recognisable in both.
Accessibility widget (Alt+A)
Text size, line spacing, contrast, readable font, link and heading highlights, big cursor, stop animations. Saved locally. Israeli standard 5568 and WCAG 2.0 AA.
Consent before the first send
Six plain sentences explain that AI processes the text and that the user keeps the rights. Shown once. A dedicated “paste text” button removes the long-press dance on mobile.
Admin
Run the business in the same system
A ten-section console with the brand palette inverted: orange rail, cream workspace, white cards. The owner never learns a second interface.
Content CMS · desktop
Mobile admin
Ten sections, one interface
- Overviewfour KPI cards with trend chips
- Content CMSevery fixed string, with reset to default
- Bot settingslaunch mode, instructions, data files
- Growth tools“did you know” facts, codes, inbox
- People & datausers, saved texts, message triage
The journey
From first check to paid plan: one calm journey
Every conversion moment keeps the same visual rules: one orange action, everything else stays quiet.
- Land on the toolno sign-up wall; value within seconds
- Consent, onceplain-language terms on the first send only
- Results you can keepcopy, download .doc, share a public page
- Register when it helpsemail or Google, one card on a soft backdrop
- Upgrade with no surprisesthe total shows before any field
Checkout
Pricing
Register
Why it converts
The order summary is the only orange block on the checkout page, so price and action are read as one unit.
Honest plans
Plan cards on mobile keep the recommended plan first and the free plan honest, in the largest type on the site. The FAQ answers how long it is free and what happens after.
Services
Tools I use
Let's collab!
Let's turn your idea into reality — from motion and art direction to the systems and UI behind it.