Home/Projects/SubRead: Design, Brand, and Code in 3 Weeks
Book a callSay Hello
sub-read

SubRead: Design, Brand, and Code in 3 Weeks

What started as 3 app mockups for a landing page turned into a full product design, a brand identity, and a coded waitlist site — all for the same client, back to back, in under a month.

On this case study

Team:
OJOng JerryFounder
Result: Two back-to-back contracts, 43 total hours, two 5-star reviews and a founder who said the landing page "wowed initial users."
Duration: Jul 17 – Aug 7, 2025
Type: Mobile App
Role: Lead Product Designer · Brand Designer · Frontend Developer

Tools

Overview

The brief was simple: three Figma mockups, optimized for a landing page, fixed price. Ong Jerry a Singapore-based founder building a mobile news aggregator for knowledge workers, wanted enough visual material to start validating the idea publicly. He wasn't asking for a full product. He was asking for a pitch. By the time the first contract closed, he had a complete app UI. By the time the second one closed, he had a live, coded waitlist site with form submissions, animations, dark mode, and multi-language support. What started as a $199 mockup job became two consecutive 5-star engagements totaling 43 hours and $1,032 driven entirely by the quality of the work on contract one.

The Problem

Knowledge workers who spend $200–500 a year on premium news subscriptions. the Financial Times, the Wall Street Journal, the New York Times, Substack newsletters. read them across five different apps, each with its own interface, its own notification system, and its own idea of what "reader mode" means. The experience is fragmented by design, because publishers want you inside their ecosystem. SubRead's premise was to break that: one feed, one reader, your subscriptions. all of it unified.

The design problem on top of that: even when a browser's reader mode cleans up an article, the experience is inconsistent across sites. different fonts, different layouts, different levels of ad intrusion. SubRead needed to feel like a product that had solved this at every layer: feed, article, and subscription management.

Goals & Success Metrics

The first contract had one concrete deliverable: 3 production-quality Figma screens good enough to anchor a landing page and convince early users the product was real. The second contract extended that to a fully designed and implemented waitlist site. responsive, animated, with a working form pipeline to Formspree.

Across both engagements the goals were:

  1. Make the app feel premium and mature. the target user pays $200–500/year for news and expects a reading experience that matches that commitment
  2. Design a reader mode system flexible enough to handle real-world content variation. articles with no images, articles with banner images, articles with paywalls
  3. Build a landing page that earned signups, not just looked good. a multi-step form that reduced friction upfront and surfaced subscription preference data for the founder
  4. Ship everything fast. Jerry moved quickly and expected the same in return

Success was clear: live screens by the deadline, a working site in the repository, and early users saying the product felt real.

Research & Discovery

There was no formal research phase. Jerry had already done his. What he brought to the brief was a clear competitive picture: Google Discover for the feed model, Apple's Reader Mode for the article experience, and Readwise, Notion, and Matter as the aesthetic references. The task was to absorb those references and produce something that felt inspired by all of them without looking like any one of them.

Two early discoveries from the Figma work shaped every decision that followed. First: image fallback handling was non-trivial. News feeds can't guarantee every article has a square thumbnail. Designing for the default case and ignoring the edge cases would have meant a feed that looked broken for a third of real content. Three fallback states were designed upfront, square image, banner/rectangular image, no image, so the feed stayed visually coherent regardless of source. Second: the reader mode licensing question. Jerry flagged early that SubRead doesn't technically have the rights to reformat publisher content. it's loading a web browser on the user's behalf. The reader mode needed to feel like a feature, not a workaround. The solution was a clean Web / Reader toggle at the top of the article view, making the choice explicit and putting control in the user's hands.

Design Process & Iterations

The first screen I shared was a bold serif headline feed. expressive, editorial, and immediately flagged by Jerry as too slow to scan. The right call. Premium news readers move fast. The font direction shifted to a clean sans-serif for headlines with a serif option available as a reader preference, legibility first, personality second.

The reader mode went through the most iterations. The first version was a clean article view. stripped of ads, consistent typography, full content. Jerry's concern: since SubRead was loading content via webview rather than reformatting it, the app needed to be transparent about that. The final system gave users two explicit modes: Web (original page, unmodified) and Reader (SubRead's clean-formatted version). Six reading themes. Original, Quiet, Paper, Bold, Calm, Focus. were built inspired by Apple's Safari Reader options, each adjustable from a unified settings panel that merged font and theme controls after Jerry correctly noted they were too related to live in separate places.

The subscription management screen came last and solved the hardest UX problem: how do you help users discover and connect sources from a catalogue of 1,000+ subscriptions without making the experience feel like searching a phone book? The answer was a floating action button to initiate adding, a search bar with category filters (Tech, Business, Entertainment), and a card-based layout showing each source's connection status at a glance. The flow itself was kept dead simple: select a source → log in via webview → land back on the subscriptions screen with the source marked as connected.

Technical Decisions

The landing page was built in Next.js + Tailwind CSS. the right stack for a site that needed to be fast, responsive, and maintainable by a developer who might not be a designer. No CMS, no page builder, no drag-and-drop constraints. The form pipeline ran through Formspree, chosen because it required zero backend work and gave Jerry immediate access to submission data without building an API.

snippet.txt

Copied!
// Multi-step form — step 2 only renders after valid email input
const [email, setEmail] = useState('');
const [showStep2, setShowStep2] = useState(false);


const handleEmailSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    setShowStep2(true);
    // Smooth scroll to subscription selector
    document.getElementById('step-2')?.scrollIntoView({ behavior: 'smooth' });
  }
};

The multi-step form structure was a deliberate UX decision: asking only for an email upfront kept the commitment bar low, then surfacing the subscription preference selector as a natural "next step" turned data collection into a moment of personalization rather than a chore. The hero section replaced static imagery with animated news app icons flowing into the main mockup. a motion metaphor that communicated the aggregation concept in the first two seconds of a visit. Dark mode, language switching, and mobile/desktop responsiveness were all shipped in the same delivery. Browser compatibility issues surfaced during Jerry's testing. iPhone Safari scroll behavior, dark mode rendering in Google's in-app browser. and were patched within 24 hours of being flagged.

Results & Impact

Contract one closed with a 5.0 review and a client who noted the work "wowed initial users." Contract two closed with another 5.0 and the observation that the landing page was "professional and yet unique to the brand. not just a cookie cutter landing page." The waitlist site went live at subread.app with working form submissions, full cross-browser compatibility, and a Figma design file handed off for future use.

The second contract existing at all was the real result. Jerry moved from a fixed-price mockup job to an hourly engagement — and then offered a third job (a future full landing page) at the close of contract two. That's the metric that matters on Upwork more than any other: a client who comes back.

The best way to win the next contract is to treat the current one like it's the only one that matters.

Lessons Learned

  1. Scope expands when the work is good. The original brief was 3 screens. It became a full app UI, a brand identity, a coded site, and an offer for more work. None of that was negotiated — it was earned. Treating a small job as a complete job is the most reliable growth strategy on a freelance platform.
  2. Edge cases are the product. The image fallback system, the web/reader toggle, the multi-step form scroll behavior on Safari. none of these were in the brief. All of them were flagged during review and fixed within a day. The willingness to handle the unsexy stuff. the broken dark mode in an in-app browser at 8pm on a Thursday. is what "committed to quality" actually looks like when someone writes it in a review.
  3. Transparency on scope creep builds trust, not tension. When the work went beyond the initial estimate, the approach was to flag it directly and let Jerry decide. Not to silently absorb the hours, not to invoice for them without warning. He approved the additional hours every time. Clear communication about time spent isn't awkward. it's professional.

What's Next

SubRead is live at subread.app in waitlist mode. The landing page is collecting subscription preference data that will shape which publishers the team integrates first. a smart way to let early users define the product roadmap. The mobile app is in development. When it ships, the Figma file and design system built during these two contracts will be the foundation it's built on. My part is done. The product is just getting started.