Product Lifecycle

My design process for creating this website

  • Step 1: Why This Website?
  • I wanted to showcase my DevRel skills while using languages and tools that are new to me. I thought it'd be a creative way to put myself out there.

  • Step 2: List Requirements
    • Show my Top 5 favorite blog posts
    • Write a new post about APIs and make it easy to understand
    • Create a roadmap to plan my future in DevRel and where I see myself
    • Have fun and learn new things!

  • Step 3: UX Design
  • Before development, I wanted to form the layout for my site and create wireframes.

    Wireframe 1

    Wireframe Overview of this site

    Wireframe 2

    Homepage

    Wireframe 3

    API Post

    Wireframe 4

    Top 5 Blog Posts

    Wireframe 5

    Design Process

  • Step 4: Content
  • Before posting my content, I created an outline & rough draft (just like writing something for school). I use Notion, and wrote them down in my Notion notebook

  • Step 5: Features & Flavor
    • Global
      • Google Analytics so I can track my traffic.
      • Try viewing things on mobile and check out the 🍔 menu.
      • What happens when you hover over my Twitter handle?
    • Homepage
      • Hover over the "Welcome" title, then click it for a surprise!
      • Hover over the Cards to see a subtle animation.
    • About Page
      • Check out how many hours I spend coding this website. It updates in real time based on my VSCode usage.
      • Hover over my quote and see if anything goes off.
    • What Are APIs?
      • Click on the Request Food button for an interactive.
    • My Top 5 Page
      • Look at the fancy gradient borders of each blog post (which are embedded in the page).
    • My Roadmap
      • Play around with the Kanban board, but your changes won't be saved.
    • This Page
      • Why not click on the colorful images (way down below) for a fun time?
      • While you're down there, see those arrows? They are virtually hand-drawn.

  • Step 6: Iterate
  • I always take an iterative approach to software development. I strongly believe in creating a prototype, then building on incrementally. When doing this, it's important to document progress and make everything easy to understand.

    Clean Commits & Incremental Pushes

    GitHub Commits

    Clear, concise, and beautiful commit messages.

    Incremental Progress

    Here, we can see how this site was built over time.

    Initial Homepage
    Small Changes HomepageRight arrow
    Left arrowGetting Better Homepage
    More Features HomepageRight arrow
    Left arrowFinal Homepage