SideTrck App UI/UX Design

A design prototype for a management tool to keep track of your ideas and side projects



Table of Contents

Track Your Side Projects Seamlessly with SideTrck

As developers, our minds are a constant stream of creative ideas for side projects. However, the challenge lies in keeping track of these myriad concepts. Enter SideTrck – the ultimate idea management tool designed specifically for developers!

SideTrck is not just an idea; it's a Figma design that envisions an innovative app to help users efficiently jot down ideas for side projects and navigate them effortlessly from conception to completion. The user interface (UI) of SideTrck prioritizes simplicity, organization, and user-friendly interactions to elevate the overall user experience.

Designing SideTrck

In the early stages of SideTrck's development, I initially utilized Adobe XD for design and prototyping. However, recognizing the power and community support of Figma, I seamlessly transitioned the design to a Figma project. Figma's robust features and handy extensions have significantly contributed to the app's design evolution.

My vision for SideTrck was clear – a sleek, modern app that combines ease of use with effective functionality. The design emphasizes simplicity while ensuring consistency throughout the app, all with the end goal of providing users with a pain-free organizational experience.

Home Screen

Upon launching the app, users are greeted by a clean and intuitive home screen. The design incorporates a grid layout, presenting users with a visual overview of their ongoing - or to be picked up side projects. At the top, you'll see a list of the users favorite projects, as indicated by the flame icon. This allows users to quickly access their most important projects.

You will find all projects below the list of favorites, with a tag list to quickly filter projects by tags, such as favorites, modible apps, web apps, and more.

ST Home Screen

Project Overview

Clicking on a project will take you to the project overview screen. This screen provides a detailed view of the project, including the description. There are four main tabs on the project overview screen - brainstorm, inspiartion, designs, and board.

The idea behind each tab can be summarized as follows:

  • Brainstorm: A place to organize and jot down ideas for the project
  • Inspiration: A place to store links to articles, videos, and other resources that may be useful for the project
  • Designs: A place to store design mockups and wireframes for the project
  • Board: A place to manage the project, including tasks, deadlines, and other details

ST Project Overview

Next Up?

Though SideTrck is currently just a design prototype, there is always the possibilty of bringing it to life. I am currently exploring different technologies and frameworks that I can use to build the app - and who knows? Maybe one day you'll be able to use SideTrck to manage your side projects. I know I could use it right about now!




#design #ui/ux #idea