Looking at my first big UI project after completing half of a bootcamp

I’m a photographer transitioning into design, and the length of a half of a bootcamp, of course, is not enough time to notice all big and small errors in an old project. But it’s enough time to acknowledge that I had no idea what I was doing and, more importantly, to learn from my mistakes.

Let me paint you a picture of what I was working on.

I was asked to create an analytics page for ToDoBot clients. ToDoBot is an app that integrates into Slack and helps teams create tasks and projects and keep track of them. This analytics page would be a paid feature and show the team all the data on the dashboard: the bigger picture of their work and progress.

I saw right away that making this dashboard would be a challenge for me, but I accepted because I love “How I Met Your Mother.”

I watched Figma tutorials on Youtube, read a couple of books and a ton of articles, and gave it my best try.

And then, after my Bootcamp at Memorisely started, we had a design crit session with experienced designers. I got some feedback on my work, and I saw what chaos I’ve created. But I didn’t rush to fix anything.

We studied a design cycle (conducting research with existing users -> designing a solution -> doing usability tests), and I returned to my analytics page only after I had learned about the whole process. I wanted to have a bigger understanding before editing the small things.

And here are my main (and not so small, I’d say) mistakes:

1. Lack of structure

I made color styles but didn’t bother to make it for typography; that’s why, at one point, I ended up with different font sizes here:

How and why it happened, I have no clue 😄.

The cards on the dashboard all have a shadow that I’ve applied manually. I didn’t know I could create a style for it and speed up my work.

I also named everything very randomly in my Figma file and sometimes didn’t even frame elements, making it difficult to move or edit them.

And now I see how crucial it is to organize and structure everything: styles, frames, names of styles and frames, etc.

I noticed for myself how fast and easy work could be when I have systems and constraints for the whole project and its parts.

2. Not using auto layout

Look at this crap, for example 😄:

Do you know why they look so random? It’s because I made these tags manually with words and rectangles 🤦‍♀️. Instead, I should have written the word first, framed it with auto layout (that sweet, sweet Shift+A combo), rounded the corners of the frame, and then filled it with color.

Because if I did the latter, I would’ve created what I wanted: a tag, the size of which depends on the length of the word.

When using the auto layout, it starts small. If I keep applying it, a wonderful thing happens. A single tag becomes a list of tags, a list of tags gets combined with other elements and becomes a card, and then a couple of cards become a page. So every page is now a structure with a lot of smaller organized structures inside. It’s a system now.

Shift+A makes it so fast to get everything organized, aligned, and neat-looking.

My life has changed since I learned how and when to use an auto layout. It’s solid proof to me that magic does exist.

3. Not making Variants of Components

I watched and recreated this Figma tutorial, but it didn’t help me understand when to make variants. That’s why I created these things:

My thinking was in the right direction. I created different versions of elements and named them as such. But they were separate objects, not different states of one.

Now, how should a developer, designer, or anyone else from my team work with what I’ve made? What if I’ve created dozens and dozens of components like that? It would be a nightmare for everyone.

After the lecture on the variants in the bootcamp and after using the switch or dropdown menu in the Figma design panel to change the state of a component, I saw that I missed an opportunity to make my workflow faster, more efficient, and better structured.

Because one component can have a significant number of variants, it can be a small and mighty system that is very easy to implement.

Of course, there are more things to fix here, like incontinent distances between objects and weird-looking details. I need to spend more time on this project to make it work and look better.

But my new projects all begin with design systems for everything: colors, typography, effects, and grids. Both auto-layout (which creates a system) and variants of components (which are a system) are a huge part of my process now, not something I use partially.

These three things have completely changed my design because they influence my projects’ looks and structure, skin and bones. They speed up the workflow so much! It would be nice to actually know how many hours I’ve saved, thanks to them 😄.

I think it’s a massive takeaway after just a half of the bootcamp.