Mobile App UI/UX

Upfire — React Native Mobile App

Upfire is an accountability app that anyone can use to help achieve their goals.

RoleWeb Designer
ServicesPrototyping, Figma, Mockup, Wireframing
TimelineFixed-scope engagement
01 — Overview

Project overview

Upfire is a React Native accountability app: users set a personal goal, choose real friends as "supporters" to back them, and report their outcome with proof when the deadline arrives. Our team designed the complete mobile experience, from onboarding and goal creation through supporter invites, reminders, outcome reporting, and a subscription paywall that unlocks running more than one active goal at a time.

02 — The Challenge

The challenge

Most goal-tracking apps fail for the same reason New Year's resolutions do: nobody else knows you made them, so there's no real cost to quietly giving up. The product had to make a goal feel like a commitment made to real people, not just a private checklist item — turning goal creation into a guided flow that captures not just what the goal is, but why it matters, how it will be proven, and who's watching, while keeping every step light enough to finish on a phone in a couple of minutes.

03 — The Approach

The approach

  • Developed wireframes and prototypes for the full goal-setting and reminder flow
  • Designed the supporter invitation and progress-sharing screens
  • Integrated feedback throughout and handled design documentation for handoff
04 — User Journey

How someone actually sets a goal

After signing up, a user is walked through a single, linear goal-creation workflow rather than one long form:

  • What and why — the user states what they want to achieve and why it matters to them, with in-context tips on picking a goal that's specific and realistic rather than vague.
  • Describe it for others — a short description written for the people who'll be asked to support the goal, since the goal itself may be public.
  • Timing — a start date and a due date, set directly on a calendar picker.
  • Validation and proof — the user defines upfront how they'll prove the goal was achieved, so "done" has a clear, agreed-upon meaning before they start.
  • Choose supporters — friends are added by searching contacts or inviting by SMS; each supporter gets notified and can follow the goal's progress.
  • Reminders — the user picks which days and times they want to be nudged about the goal.
  • Review and confirm — a final summary screen before the goal goes live.

From there, the goal lives on a card showing its status — Achieved, Almost, or Miss — supporters can view progress and leave private comments, and at the deadline the user reports their outcome with an attached photo or screenshot as proof, with the option to post the result to their social accounts.

05 — Key Features

What the app actually does

  • Structured goal creation. Rather than a single free-text box, a goal is built from separate, guided fields — objective, motivation, public description, dates, and proof criteria — so every goal has the same clear shape.
  • Social accountability by design. Supporters are added directly from a user's phone contacts or by SMS invite, and the app is built around the idea that a goal with real people watching is more likely to stick.
  • Outcome tracking with visible status. Every goal card shows a live status — Achieved, Almost, or Miss — giving both the user and their supporters an honest, at-a-glance record.
  • Proof-based reporting. At the deadline, the user reports their outcome with an attached photo or screenshot, keeping the accountability loop evidence-based rather than just a checkbox.
  • Configurable reminders. Users choose which days and times they want to be nudged, rather than getting a one-size-fits-all notification schedule.
  • Social sharing. A finished goal's outcome can be posted directly to the user's social accounts.
  • Subscription membership. A paid plan (shown with a 14-day trial and a monthly price) unlocks running more than a set number of active goals at once — the free tier is capped, the subscription removes the cap.
06 — Platform & Technology

A note on the technical stack

Upfire was built as a React Native app, giving it a single codebase across iOS and Android — that much is confirmed by the project itself, not guessed from a screenshot. Beyond the framework, here's what's actually verifiable from the interface: contact-list access for supporter invites, SMS-based invite links, push notification permissions for the reminder system, photo and screenshot attachment for proof-of-outcome, social account sharing on goal completion, and an in-app subscription and billing flow with a trial period. Those are the functional building blocks we can speak to with confidence, rather than naming a specific backend or payment provider we can't confirm from the interface alone.

07 — Key Screens

Key screens designed

08 — The Outcome

Final result

A clear, guided path from goal-setting to accountability, with reminders and supporter check-ins built into every step of the experience.