Neofortunity brings volunteers, nonprofit organizations, and donors together in one iOS app. I designed it from the first stakeholder interview to the final screens: research, information architecture, a full design system, and high-fidelity UI for two roles.
Screens wireframed across two roles with dead-end audit
End-to-end flows validated against information architecture
Reusable components with documented states & variants
Color tokens organized in a two-layer design system
Text contrast calculated with WCAG 2.2 formula
Neofortunity is a young 501(c)(3) focused on research and education, about a year old when I joined. The founders wanted a new way for people to learn from the organization and work with it. They also knew how most small nonprofits reach volunteers: a flyer on Instagram, a Google Form to sign up, a Saturday to run. That fills a morning but builds no relationship. People connect with the event on the flyer, not the organization behind it, so every sign-up starts from zero trust.
We agreed the iOS app had to do three things flawlessly: help volunteers find opportunities near them, let volunteers record hours and get them approved, and give donors a clear way to support the mission.
Before I drew anything, I audited an established volunteering app by hand and logged twelve findings. A view called Near Me showed events in other cities because the location setting was buried. The cancel action hid behind a vague label, two levels deeper than a high-stakes action should be. Navigation mixed verbs and nouns, so people had to stop and decode each tab. None of it was a bug. Each was a choice that made a stranger work a little harder to trust the product.
Those findings became three root problems, twelve requirements, and fourteen user stories. Every element of the information architecture had to serve at least one story, pillar, or persona need, which kept the product from growing features nobody needed.
“The volunteering app a first-time user trusts by the end of their first session.”
Status is written in words before it is shown in color. Empty states say what is true, and nothing implies more certainty or urgency than exists.
Every pairing of text and background is contrast-checked. Role, location, and the state of your data are always visible.
Touch targets, text scaling, and reduced motion are built into the foundation, so no one pays for our shortcuts with their time.
She is volunteering for the first time. Before she commits, she wants to know where to park, what to bring, and whether the shift suits a first-timer.
Unclear parking, hidden gear requirements, or arriving at a disorganized shift.
Upfront shift logistics, verified organizer lead, and a 1-tap cancellation escape hatch.
He manages events between other work, in short sessions. He needs to clear what is waiting in minutes, not at a desk.
Lost volunteer hours, manual spreadsheet logs, and desk-tethered admin tools.
Single-tap mobile hour verification queue with audit tokens and offline check-in.
Designing an operating system for non-profit field work requires choosing what NOT to build as fiercely as what to build. Rather than cargo-culting commercial engagement patterns, Neofortunity made five architectural bets that broke with incumbent standards to establish immutable credibility.
People commit to organizations they respect, not anonymous event tasks.
Traditional volunteering apps treat the nonprofit as metadata under the event title. Neofortunity elevates the organization into a first-class profile destination with mission statements, staff visibility, verified 501(c)(3) status, and past track records.
Crucially, organization profiles deliberately omit an in-app donate button. Donations support Neofortunity Inc.'s platform directly, while donors wishing to fund specific nonprofits are routed to external direct channels. This prevents legal and accounting friction.
Dedicated nonprofit profiles without in-app donor routing.
Instant per-organization in-app donation monetization.
Rationale: Protects V1 from multi-party payment regulation while keeping the trust contract pure.
After wireframing the first 28 screens, I went through them one tap at a time and asked where each button led. Several led nowhere. Create Event had no screen behind it. Neither did the roster, question management, returning an hour entry, or inviting an admin.
A volunteer or an admin would have hit a wall in their very first session. I stopped and designed seven more screens to close the critical dead ends before moving to high fidelity. It ensured visual craft was built on flows that actually connected.
A logo or a full name as the role indicator
A small organization avatar beside the word Admin.
A logo alone does not say which mode you are in, and full organization names get long on mobile headers.
A fifth tab for saved events
Four tabs.
The most common path is finding and joining an event; a fifth destination would have competed with it.
Separate tabs for events and organizations
One Discover tab with a segmented control.
Serves both discovery intents cleanly without expanding top-level navigation.
The screens look consistent because they are made of the same parts. I built the design system as architecture rather than a style guide, and I built and tested it in Figma with variables, variants, and component properties.
The palette comes from the organization's own mark: a deep aubergine and a warm gold.
The neutrals carry a faint plum undertone, so even screens with no color feel on brand.
The neutrals carry a faint plum undertone, so even screens with no color feel on brand.
Primitive tokens hold raw values. Semantic tokens give them meaning, like action/primary or role/admin, each with a light and a dark mode. Components read only the semantic layer, so one change repaints every button, badge, and tab bar.
Every text pairing was checked against the WCAG formula. White on the primary button gold measures 5.5 to 1. My first warning orange came in at 4.3 to 1, just short of AA, so I darkened it until it passed.
SF Pro carries the interface. New York, Apple's own serif, appears once per screen on the thing that deserves warmth. Translucent material appears only on floating chrome, never behind text people need to read. Motion uses four duration tokens and collapses to an instant state when Reduce Motion is on.
New tokens only arrived when a real screen needed them. When the admin tab bar's active state barely stood out, I found that the dark plum used for badges was darker than the inactive gray. I added a lighter plum for icons and left the badge color alone.
Every component carries a written rule and reason, like why a disabled button never becomes a faded gold one, so the next designer or engineer does not have to guess.
Dark mode tokens are defined but not yet contrast-verified. The system's version history says so. A reviewer should find that in the first minute, not the last.
Both roles, the donation flow, and the empty state, built from the system above. Drag or scroll to inspect the full set.
Transparent geographic browsing with verified badges and explicit distance markers.
Full operational transparency covering attire, parking, and organizer credentials prior to signup.
Direct geographic feedback without deceptive recommendations or coercive push notification gates.
Self-service exportable volunteer hours log with organizer cryptographic signatures.
Immediate donation receipt generation without gating behind account creation.
Glanceable shift tracking and attendee check-in designed for fast one-handed mobile use.
Single-tap approval queue with mandatory constructive feedback for returned entries.
First-class public presence showcasing tax-exempt status, mission, and direct contact details.
Streamlined mobile opportunity creation with mandatory logistical FAQ prompts.
Granular access controls for volunteer captains and coordinators without granting master keys.
Every problem that drove this project now has a specific, built answer.
Non-profits were treated as anonymous event tags, leaving volunteers unable to verify organizational legitimacy or safety.
Every organization gets a verified 501(c)(3) profile with leadership visibility, and every event listing links directly back to it.
Search hid the active radius filter, serving empty or deceptive feeds to volunteers crossing suburban borders.
Search radius stays anchored in the header; empty states compute exact driving miles to nearest real opportunities.
Hour tracking stalled in an opaque black box while coordinators drowned in messy, unorganized approval lists.
One synchronized loop: live volunteer status badges, a 1-by-1 admin review queue, and mandatory return notes.
Unrestricted admin permissions in community tools risked catastrophic deletion, hostile takeovers, and sole-owner lockouts.
Eight structural ownership guarantees that enforce sole-owner retention, transfer cooldowns, and immutable audit trails.
Dead ends in wireframed flows trapped organizers during multi-step event setup, causing high drop-off.
Click-path audit added seven bridge screens, draft caching, and explicit state exits before visual styling began.
My initial IA treated donation as a secondary utility tab, under-emphasizing non-profits' core financial survival.
Founder feedback shifted priorities to ship a complete 4-step donation flow with transparent fund allocation and receipts.
A feature list and a person's priorities are different documents. The donation correction taught me to ask, in the first meeting, which of these they would be most upset to lose.
Writing eight guarantees for the Owner role meant picturing how each permission could be misused before it existed. I now do that for anything that grants power.
Dark mode is documented as proposed, not finished. I would rather a reviewer hear that from me.
Watch first-time volunteers and a new admin use the app unassisted, and measure against the north star.
Registration completion, hour-log completion, time to approval, and donation completion.
Verify dark mode contrast, test with VoiceOver and the largest text sizes, and add a two-weight icon set to the tab bar.
“A fifteen-minute ranking exercise at the start would have saved a revision cycle.”
Rank priorities with the founders in the first session. I presented my understanding in the second meeting, and the biggest correction arrived there. A fifteen-minute ranking exercise at the start would have saved a revision cycle.
A note on process: AI tools were part of my workflow in places, to move faster through parts of the research and design work.
