Dashboard

Using the Tailwind CSS framework, I created a responsive prototype of the dashboard page for a web application that allows people to sign in and manage team-based projects. The dashboard provides an overview of the teams’ projects, the ability to create new projects, and send and receive messages to and from team members. I started with a low fidelity wireframe before moving on to coding the page. I was also given the freedom to add other features to the dashboard, deciding to add a tasks section.

HTML, Tailwind, JavaScript, Adobe XD, Wireframing

A challenging part of the project was actually learning to use Tailwind itself. I was so used to using vanilla CSS that I needed to really jump into the Tailwind documentation, but I became more familiar with it as I continued to use it.

Although I spent time iterating designs for the dashboard, it was far from perfect. Looking back, there are some parts I would like to change now. The create new project button is not very user friendly, as it falls after all of the projects. On mobile, users would have to scroll for a while before reaching it. In retrospect, I would simply add a button to the top of the section, much like how the messages and tasks section appear.