Screenshot: Figma mockups

Project Deliverables: Figma Mockups for Underdog Devs website redesign

Figma mockups for custom CMS including Mentee Spotlight, Admin Dashboard, User Admin, Blog Details, and Blog List

Recently, I had the pleasure of working on a website redesign project for Underdog Devs as a mentee in Project Underdog. We were a small team of about 4 mentees and I volunteered to work on mockups for the backend. I teaching myself Figma, a cloud-based UX/UI design app, with the help of many YouTube vids and creators, most prominently Mizko. Michael’s Design System Fundamentals series was very instrumental in my understanding of creating a set of reusable, configurable design components with a consistent look and feel.

Over the course of about 6 weeks (skipping a week during the Christmas holidays) I contributed significantly to the UI interface redesign of the Underdog Devs main website including:

  • Improving the Trello board by creating labels and adding powerups to track ticket numbers
  • Building a coherent design system in Figma based on current fonts, colors, and shape styles
  • Reverse engineering existing website layout and UI into reusable, configurable Figma components
  • Creating new page templates with atomic design modules (molecules, organisms, etc)

Screenshot of previous design concepts before I joined the project:

Screenshot showing Trello tag numbers

Graphic of Components Page


Graphic of Styles Page

Graphic of all 4 templates I created

The team loved my designs and overall I had a really good experience contributing to this project.

I used my agile project management knowledge to hand off the project before leaving after receiving a full-time job offer as a web developer for a Christian broadcasting company.

Date Published: 2023-01-27
Date Updated:

Eric Hepperle

Eric loves to write code, play guitar, and help businesses solve challenges with code and design.
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x