UI/UX Case Study

The process of taking an idea from wireframing to app launch

Image for post
Image for post
Newseon App — High Fidelity Prototypes

Design Process

  • Empathize: Define client needs; conduct user interviews
  • Define: Define problem statement
  • Ideate: Create brand guidelines
  • Prototype: Finalize brand guidelines and high-fidelity mockups
  • Launch: Soft launch; iterate before a wider Product Hunt launch

Empathize

Client Needs

The client wanted to launch an MVP on Product Hunt as soon as possible in order to validate the idea and the business model. This meant limited resources, a limited budget, and a much tighter design philosophy. The list of deliverables included:

  1. A polished Brand Guidelines document
  2. High-fidelity mockups of the mobile app (should…


Part 5 covers deploying your Stripe Application to Production using Heroku

Image for post
Image for post

Subscription Payments are the bread and butter of a SaaS application; it’s how you start generating revenue. In a well-implemented system, users need to first be able to change or cancel their plans, and second, undergo a trial phase to see if they would even like to pay for premium features. Typically, it’s a hassle to set these up. In this set of guides, we will go through all the steps required to build a complete Subscription Payments system for your SaaS app.

Source Code: https://github.com/bdcorps/stripe-subscriptions-nodejs

Live at: https://saasbase-pricing-advanced.herokuapp.com/

Part 1: Adding Basic and Pro subscription plans using Stripe

Part…


Part 4 covers accessing premium content based on a subscription plan

Image for post
Image for post

Subscription Payments are the bread and butter of a SaaS application; it’s how you start generating revenue. In a well-implemented system, users need to first be able to change or cancel their plans, and second, undergo a trial phase to see if they would even like to pay for premium features. Typically, it’s a hassle to set these up. In this set of guides, we will go through all the steps required to build a complete Subscription Payments system for your SaaS app.

Source Code: https://github.com/bdcorps/stripe-subscriptions-nodejs

Live at: https://saasbase-pricing-advanced.herokuapp.com/

Part 1: Adding Basic and Pro subscription plans using Stripe

Part…


Part 2 covers keeping track of Customer Billing information using Mongo and Stripe Webhooks

Image for post
Image for post

Subscription Payments are the bread and butter of a SaaS application; it’s how you start generating revenue. In a well-implemented system, users need to first be able to change or cancel their plans, and second, undergo a trial phase to see if they would even like to pay for premium features. Typically, it’s a hassle to set these up. In this set of guides, we will go through all the steps required to build a complete Subscription Payments system for your SaaS app.

Source Code: https://github.com/bdcorps/stripe-subscriptions-nodejs

Live at: https://saasbase-pricing-advanced.herokuapp.com/

Part 1: Adding Basic and Pro subscription plans using Stripe

Part…


Part 1 covers adding Basic and Pro subscription plans using Stripe

Image for post
Image for post

Subscription Payments are the bread and butter of a SaaS application; it’s how you start generating revenue. In a well-implemented system, users need to first be able to change or cancel their plans, and second, undergo a trial phase to see if they would even like to pay for premium features. Typically, it’s a hassle to set these up. In this set of guides, we will go through all the steps required to build a complete Subscription Payments system for your SaaS app.

Source Code: https://github.com/bdcorps/stripe-subscriptions-nodejs

Live at: https://saasbase-pricing-advanced.herokuapp.com/

Part 1: Adding Basic and Pro subscription plans using Stripe

Part…


Email Marketing

Engage and nurture your users with personalized messages

Image for post
Image for post

Automated email sequences are an incredible marketing tool for any startup. An email inbox is one of the few 1:1 marketing channels at your disposal. Use it well.

The Candymail NPM package allows you to send marketing email sequences directly from your Node.js server from a single JSON file. Think of it as a docker.yaml but for email marketing.

Let’s say we are building a brand new video editor for the web and looking to delight our new users. We can set up an Onboarding email sequence that welcomes our users and slowly introduces them to the platform.

Let’s get…


An effective landing page for a car salesman

Image for post
Image for post
Photo by LinkedIn Sales Navigator on Unsplash

At Three Times, we focus on building effective web development solutions to help our customers reach their target audience effectively.

This week we helped a car salesman bring his services to a website so he can deliver a personalized and online car buying experience to his clients — all handled without them having to go into the dealership.

We also streamlined his sales process, automating 75% of the manual workload by using Google Sheets, Calendly, and Mailchimp, combined together with Zapier. Read about how we did that in Part 2! (Coming Soon)

Project Objective

  1. To build a landing page that highlights the…


Viral Growth

2B installs. 800 MAUs. Monthly engagement rate of over 70%

Let’s see how they did it.

1. Learn from competitors

The ones that failed → Learn what didn’t work and fix it

  • Dubsmash: Plagued with copyright infringement claims; music creators felt cheated. Tiktok actively strikes licensing deals with industry-leading music publishers.
  • Vine: Couldn’t find a decent advertising strategy, had to be shut down. “Tiktok for Business” offers marketers a comprehensive set of options to run successful campaigns.
  • Musical.ly: Dealt heavily with music, dancing, and lip-syncing. Tiktok allows for a wide array of expressions: cooking, investing, videogame clips, sketch videos — something for everyone.

The ones that succeeded → Learn what does work and iterate on it

  • Tinder: Vertical-only infinite scrolling
  • Dubsmash: Brandmark with creator username for easier discoverability
  • Vine: 60-second max video length
  • Instagram: Captions, not titles
  • Musical.ly

Image for post
Image for post
Photo by Markus Spiske on Unsplash

John Bogle, founder of The Vanguard Group shares his thoughts on sensible investing strategies in The Little Book of Common Sense Investing: The Only Way to Guarantee Your Fair Share of Stock Market Returns.

An absolutely fantastic read for new investors in the stock market. Here are my key takeaways.

0. Introduction

  • The winning strategy is to own all nation’s publicly held businesses — guarantees return in dividends and earnings growth.
  • Corporate Profits and GDP growth are very strongly correlated.
  • Buy S&P.

1. Parable

  • For investors as a whole, returns decrease as motion increases. Stop buying and selling so often. You’re losing on fees…


Pre-Sales Revenue

Collecting revenue before you commit to building a product is the best way to validate an idea

Collecting pre-sales revenue is the best way to validate a product idea. Stripe makes it easy to set up one-time payments on a really simple static HTML site. In this guide, we will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.

Live Demo: https://lucid-ramanujan-f21cd3.netlify.app/

Source Code: https://github.com/bdcorps/one-time-payments-html-landing-page

Let’s get started!

Create an HTML landing page

First things first, we need a landing page that speaks to our target market. That means having,

  1. Description of our product
  2. Value props as to what value the product will provide
  3. A shiny payment button so we can securely collect…

Sukhpal Saini

Builds SaaS products — http://saasbase.dev/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store