Miro, My Hero

In this article, I will go over my pre-production process for developing new React projects. If you would like to follow along you can do so by installing Miro onto your device and registering for a free account.
For this article, I will be designing a single page application (SPA). The method changes slightly with the size and composition of a project.
For instance, you’ll notice that I list our dependencies and try to convey the flow of data. Representing and designing the backend visually is different. For a small app, a simple way to do this would be to include notes for the model and the controller on each view.
The view will be what you’re drawing out and the notes under that view should include the data it will require to display information to the user and what needs to happen to get that data there (whether from the backend or an application programming interface (API)).
After you have all your views drawn out with notes, you can then create a general sketch of how your data will flow. I tend to use a tree model to clearly show the data hierarchy but that would likely be overbearing on larger projects. Anyway, let me cut to the chase.
In this article, I will review the design I made for my personal site.
So first things first, I’m going to make an account on Miro. This will allow me to create a project right in my browser or download the app for my desktop, and both apps are identical from what I can tell.
Once the app is open, it will greet me with a popup showing me many of the available templates I can start my project off with.

One day I’ll be using fancy charts but for now I ‘X’ out of them

I’m not going to select any of these templates. Since I am not making a chart or planning any sort of collaboration I’d rather just start from scratch.
Once I’ve exited the popup window, the first thing I will do is rename my project by clicking the project name in the upper left-hand corner of the screen.

What Is your project called, what is it about, and even a space for a logo

So for me, that’s the initial setup.
Before I go further, let me breakdown the tools I will be using in case you wanted to follow along because I know new apps quickly become daunting, especially when you have a bunch of other things on your plate like actually working on the app.

There are a lot of really cool tools that are centered around collaboration but we won’t need those just yet

1. This is the selection tool. When it is blue it is on and, when it isn’t highlighted, it is off. When it is on, it allows you to select elements by clicking on them making editable elements editable again incase you need to make a quick adjustment. When it is off, it is replaced by a grabber tool. This allows you to click and hold to move the workspace around which frees up some room for you to work in. I usually just leave the selection tool on since I’m working with a trackpad.
2. This is the text tool. It will add and edit text where ever you click when this tool is selected.
3. This is the shape tool. It will prompt you to select a shape when you click it. Once you’ve selected a shape, you can click anywhere on your workspace to add an editable version of that shape (as in you can resize it to whatever you need).
4. This is the line tool. It will prompt you to select a version of a line when you click it. I primarily use it for drawing arrows. So when I select the arrow I can click anywhere on my workspace to add an editable arrow.
5. Undo and redo buttons. The most important tool.

My general workflow will be to create a new shape by clicking the shape button each time I need a unique shape or to copy a shape I already made if I need an identical shape, which is an easy way to make everything look consistent and neat. Otherwise, every box would be slightly off and every arrow a different length.
I will generally sketch each component that contains other components and leave general notes about that component. Then I will sketch the components within the general sketch in more detail leaving more detailed notes below that component, and so on.
Having said that, I’m going to sketch out fully what I want the home page of this app to look like. Since this is a SPA, this is the only page. And then after that, I will have an idea of what components are in my project and I can break those out into their own sketches and notes.

Keep it simple

So nothing too crazy here, let me breakdown what I did here:

1. Created a large rectangle with the shape tool. This rectangle which I dubbed App will contain all the other components (similar to how the code will be organized).
2. Created a smaller rectangle inside of App which I dubbed Profile Card.
3. Created a smaller circle inside of Profile Card which I dubbed Profile Pic.
4. Created a smaller rectangle inside of Profile Card which I dubbed Icon bar.
5. Left notes just about both Personal Profile and ProfileCard at the bottom. Since it’s a SPA, Personal Profile and App are basically the same concepts

So as you can see, nothing too complicated here. Basically created a bunch of shapes and labels. Starting basic and breaking a project down really helps the visualization process for me. If you try to include all the details of every component on every page things quickly become overwhelming and that’s not how you want you and your team to feel each time they look at this blueprint. Instead, you want to organize your plan by levels of complexity, so that the only complexity that is generally visible is the complexity that is sought after. Basically, if you look at the plan to see how a component should be placed relative to other components because you are working on the CSS, you should be able to look at this general view we just made and not have to look through a page of notes about this view when it can be explained per component.
I don’t know, that’s just how I feel. It also helps me visualize design conflicts later on in the design process. If you have a design conflict here and you have all the notes on every component, you will have to go to the notes on each component and change them instead of just needing to change the notes to the exact component the conflict is related to. I think this will have carry over to your development workflow also.
Next, I’m going to break out all the components contained in App for a more detailed view. To do this I am going to select the component, copy it, and then paste it to the side.

Copy the work you’ve done already to make everything look measured and consistent

To make sure I select all the elements, text included, I held ctrl while I clicked on the elements, and once they were all selected, I copied them and pasted them. Then I dragged the new collection of selected elements to where I wanted it to be. See Profile Card.

You can copy multiple items, paste them in preselected, then drag them over

Now I’ll add details to all my components. Oh, and before I forget, if you want to make a bullet point just type a ‘-’ and hit space.

It’s about the component in question, not the components contained within

Now all my components are drawn out with the respective notes for each one which should contain the details of the overall component they are under (as opposed to also containing the details of the other components within that component).
From here I will list out the dependencies and technologies I think I’ll need for the project that way I can just install them all at project start and also remember that I am using them without checking my package manager.

I tab for subcategories

Then I will draw up what I think the initial file structure of my React app will look like based on the components I’ve drawn up.

Again, I tab to indicate contents of the parent

Based on the components I sketched out I would have created ProfilePic.js and ProfilePicStyles.js but since I already created this project I am basing it on the decision I made to just include ProfilePic.js into ProfileCard.js.
After I’ve sketched out what I think my initial file structure will be I will do the same for my import structure. This I will use a tree to better show the data hierarchy.

ProfileCard and globalStyles will be imported into App

Lastly, I will lay out the user stories for this project (what a user of this app should be able to do with this app). I will separate the user stories into two lists.
The first list will be the goals, written as user stories, needed to get the app into production. This is known as the Minimum Viable Project (MVP) and should only include the bare minimum features and feature development. You should be asking yourself how basic can you possibly make the app to get it into production as quickly as possible.
The second list will be the goals, written as user stories, to expand the app from its MVP status. These will be known as your stretch goals. This is your wishlist, every feature you imagined this app to have from the onset.

This is usually where you run into ideological conflicts in your planning

You’ll notice that none of the stretch goal components are sketched on my workspace. I did this on purpose because this plan is just meant to represent what the MVP should look like and should be used to get the project off the ground, to make it easier for teams to collaborate before there is an actual project, and so that everyone is working off the same reference material. Also, the stretch goals could change what the MVP might look like and that would add multiple layers of complexity to a project you are just trying to get off of the ground. I can always add to this later on or just copy it and alter the copy to represent how the project might change with a couple of features added to it and work on a couple of features at a time. Or I can just sketch out each feature in their own workspaces, which would be much more scalable, especially to a project which has already been through multiple iterations.
At this point I consider this to be a complete first draft.

The size of your project will increase exponentially with complexity which should be paired down for MVP

To save it I will click on the export icon at the top between the project title and the undo button (looks like a belly-up bracket with an arrow coming out of it). It will say we need to create a frame for the project and it will give us multiple selections. I usually pick 16:9 and then expand it to include our entire workspace. Then I will click the export button again at the top. I like to save my project as a PDF, it’s just easier to work with inside of Visual Studio Code (VSC). It will only let us save as low-quality because we are using a free account but that works just fine. Then boom, it’s downloaded and you can move it to your actual project file, open it in VSC, and begin coding along to your blueprint.
Now, this planning is not something I have learned, but rather something I have just developed to keep myself consistent and to help me visualize my project. It often leads me to see the flaws in my design process before I even get started and when I do get started, I often find little flaws in my planning which will cause me to go back to my workspace, make the design change, and then update the PDF I have in my project file.
Having said that, I hope you find this helpful and I thank you for your time and consideration. This is one of my favorite parts of a project as it allows me to create something expediently that in actual development might takes months to see.