How Do You Design Your Web App After Reaching MVP?

At Rackless, we feel the best design involves both software development and user experience. Those 2 components will get you 80% of the way to achieving good design for your Minimal Viable Product. To get the rest of the way there, use tools like Figma to collaborate with your software developer to emulate other websites and apps you admire.

How did Rackless’ FAQ Become Rich Results SEO Ready?

In working with TheHopeLine.com, Rackless' internal software developers worked to develop an innovative approach to implementing Google's FAQ Rich Results SEO Schema for this FAQ section. TheHopeLine and other clients at Rackless now use this innovative approach.

CTO vs CIO: What’s The Difference?

The Chief Technology Officer leads the software development efforts for a company. The Chief Information Officer is responsible for purchasing software and designing the corporate systems and processes used.

CIO vs IT Director: How Are They Different?

Often a company uses the title IT Director when the company either doesn't develop software and a title with the word Officer isn't politically acceptable. The title Chief Information Officer is used to signal the person speaks on behalf for the company regarding strategy with shareholders, board members, media and more.

Where are Rackless’ Software Developers Located?

Rackless' software developers are distributed between 3 primary locations: India, North America and South America. With recruiting software developers around the globe, Rackless clients can staff their software development team across three 8-hour shifts. This allows them to achieve an almost 24 hours/day software development cycle.

What Is A Minimum Viable Product (MVP)?

The term Minimum Viable Product was developed by Eric Ries in his book Lean Startup. Eric defines MVP as follows: A minimum viable product (MVP) is the "version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort."

What are the Most Popular Programming Languages?

The most popular programming languages can be broken down into 4 categories: website frontend, web-based application backend, mobile app development and embedded systems. JavaScript, HTML and CSS are the most popular website frontend programming languages. For web-based application backend, JavaScript, Python, PHP, C# and Ruby are the most popular programming languages. JavaScript, Kotlin, Java, C# and Swift are the most popular programming languages used for mobile app development. For embedded systems, popular programming languages are C, C++, Python, Java, Rust, Ada, JavaScript, B+, Go, C#, Lua, Assembly and Forth.

If You Build It, Will They Come?

In building software or starting any new endeavor, you may face taunts of lunacy just like Ray faced in the movie Field of Dreams. Jeff Bezos has shared that he uses the Regret Minimization Framework in helping him make decisions like whether to build or not to build. Rather than focus on whether they will come, trust in knowing that if you 'don't' build it, they, most definitely, won't come.

Should We Use A Software Framework?

Software frameworks help product owners, entrepreneurs, and executives get their software apps up and running quickly. Why? Because a software framework is a collection of code maintained by expert software developers that serve as the foundation for your own software.

Laravel, Rails, or Express.js: Which Framework’s Better?

We recommend Laravel over Ruby on Rails (Ruby) and Express.js (JavaScript/Node.js). We chose Laravel ourselves for our own internal software project, recently after comparing these same 3 software frameworks. In selecting Laravel, we chose to build our app using the software language PHP. PHP has the largest market share of all the web-based software languages (close to 80% of all websites use PHP). Also, Laravel is the fastest-growing software framework based on PHP making it a wise choice.

Inside The Product – Using SnagIt To Communicate Design

In today’s ‘Inside The Product’, Micky demos how Rackless team members use Snagit to communicate visually. In this case, Micky uses Snagit to communicate with our software developers a redesign he wants to apply to a page inside Rackless.app named Values.

Snagit is probably one of the most used tools at Rackless as it helps us communicate so quickly. Another similar tool is Loom. However, we use Loom for communicating via video while SnagIt is used to communicate via image.

We hope you enjoy this demo. Feel free to let us know if you have any questions and we look forward to sharing more Behind The Scenes with you in the future.

Video Transcript

Micky Thompson (00:01)

Hi, my name’s Micky at Rackless. And today we’re going to go behind the scenes and we’re going to look at a software product we use named Snagit. Snagit we use to take screenshots of our desktop and from there we can manipulate those screenshots and send them to the developer, so that way, in essence, a picture’s worth a thousand words. So by editing a screenshot and sending it to the developer, we don’t have to write out long conversations or tickets to our software developer. We can just send them the screenshot and communicate what we anticipate the change to result in. So let’s jump in. I have a webpage today that I want to change, and I’m going to use Snagit to communicate the changes I want to send to the developer to end up implementing it for me. So we’ll jump right in and take a look at that.

Micky Thompson (00:53)

So here’s the design currently of rackless.app. And I’m going to take you to the page that does not utilize this design because we haven’t applied it yet to this page. So it’s a System page. So you have to type it in to get there. It’s only used by our Administrators. And so here, I’m going to come into ‘Values’ and we’ll see here, this page has not yet had the fields, or the edit, or the other things applied to it. This is one, we, this is a page we built when we first started designing rackless.app and we didn’t really have a design. And since we follow the Minimal Viable Product and no one actually sees this page from the public we’ve been okay with this, but now I’ve decided I want to go ahead and get this page standardized with the rest of our site. So I am going to use Snagit to communicate to the software developer, the change that I want to implement. So let me take you I’ve taken a screenshot of this page and what we’re going to do is I’m going to show you me adding a comment to communicate to the developer the first step we want to do.

Micky Thompson (02:04)

Okay. So I have my software.TimeDoctor jumped in my way. So I have a screenshot here, of this page inside Snagit that I just took. And all I did was use a shortcut to take a screenshot of the whole page and it ends up here in Snagit. So what I can do now is I can come over here and I have a favorite of this little callout that I can add right here. And I want to just communicate that ‘we want to redesign this page to match our other pages on Rackless.app.’

Micky Thompson (02:41)

Oftentimes I’ll put three dots, which just means this is going to continue on in some other screenshots. Okay. So now I’ve duplicated that screenshot because I want to take, I want to take this white background and I want to pull it down over it. And this is an example of me using Snagit to I’m going to hit the down arrow and it will make that just basically a white background and I can pull it down. I’m not sure what it’s doing there. I’m not getting the effect I want. I’m not sure, maybe, we had something over it when I do. I just flattened that. Maybe go ahead and grab I’ll grab from the bottom. And then the arrow just to get it kind of solid. Then I’ll just override that and go ahead and select flatten. What that does is give me kind of a clean slate here for the values page to go.

Micky Thompson (03:42)

Okay. So I’ve taken another screenshot here of a detailed conversation because what I want is I want the field name and some of the field content from it. I’m going to go ahead and try to emulate this so I can put it on the other page. Okay. So here, what I’ve done is I’ve taken a screenshot. Well, I’ve added some text to the screenshot and I want to copy this font color that appears over here like a summary. I’m just going to go and grab something close to it. Sometimes recording these videos makes the. Alright, so that gave me a pretty close. The size doesn’t match a little bit. So I’m gonna lower this size. Let’s try 15. Yeah, that’s getting closer. I also notice this is all capital letters so I’m gonna go Total Developers. Those look a little bit big, we’re going to try 14, yep, that’s getting us close. We’ll go ahead and put this on the other page. I’ll go ahead and put this right here.

Micky Thompson (04:46)

We’re right here. Okay. Now what I’m going to do is we’re going to copy this text right here. We’re going ahead and give that a try. So here, I’m going to say the page has 57. So we’re going to type in 57 here. And actually that looks pretty good. So we’ll go ahead and cut that. We’ll put that over here. We have 57. I liked to use that a little bit bigger. The developer’s going to match this perfectly because they’re going to see what the font is on the other pages. So there’ll be able to get this for us.

Micky Thompson (05:23)

Notice some um, this is where I messed up earlier and we’ll get rid of this. Not sure why it did that to me, sometimes when you’re shooting these videos, the computer doesn’t want to play along sometimes just because it’s got too many things going on. We’ll go ahead and try to close that up. Flatten it, alright, so now we have ‘Developers’ here. Those ‘developers’ don’t look any different than say that, so I may do, I’m going to make this regular. There we go. All right and I’ll go ahead and add the other ones really quickly. Okay. So what I’ve done here is I’ve added the text here, it’s going to be a little hard to see, but I’ve added here just to kind of get the alignment, right for each one of these. And what I’m going to do is take these, I am gonna cut this, and we’re going to come over here.

Micky Thompson (06:22)

This other one, paste them on here just kind of get them in line right here. All right, that’s perfect. Okay. One of the things I noticed too is this page doesn’t have this header as this does. So I’m gonna remove this header. I’m going to do that, it just copies this one and moves it over. Let’s see if I can do that in real-time for you, like this, copy it, come over here, put it over here. There we go. That’s how you do it. Let’s see if I can get it to align where it’s supposed to be. I’ll go ahead and flatten this. And then what I can do is I can try to grab this and move it up so that it meets it. And don’t worry, I’ll bring that text back that just lost. The only reason it’s lost is that it’s kinda gotten, flattened this.

Micky Thompson (07:16)

I can see my text came back. Not sure why I’m getting that little area right there, let’s see, oh, I see, maybe, then when I can do. I erase it that way, but I can set my background color to match. What that will do, it will make it go away. Okay. And bring these edges back in that got moved on me. Not too worried about perfection. So see, over here, this got a little bit messed up, but that’s completely fine. This right here got a little bit messed up. Just based on the way that it was. I can take this and then I’ll show you some tricks that I do and pull that up and that’ll make it a little bit straighter, flatten that, take this, take this, take this, they moved on me. Once you get familiar with Snagit, these things could come real easy

Micky Thompson (08:07)

So, what I’m gonna do is if I can get that lined up perfectly and it does look good. Okay. Another thing I need to do. Oh, you know what? I need a place to put the edit button. So, what am I to do is find a place, to do that. I’ll be right back. I’ll see if I can find one. Okay. So I’ve come to the conversations page because I like the way that these menus are displayed here. So what I’m gonna do is emulate the way this refreshing + create is done here. I’m going to add it. So I’m going to take a screenshot and I’ll show you real fast how we take screenshots. We hit command+p on this computer because I’m on a Mac, and I think I programmed it to command+p, I’m gonna take a quick screenshot of this and what this will do is this will bring it over and Snagit for me.

Micky Thompson (08:49)

I can go ahead and just lower this down a little bit, get rid of some of the backgrounds. So it doesn’t bleed over into my page when I copy it into it. Alright, I got that copy. We’ll come back over here. So what I want to do is put that right here in the middle, so right about here, but in order to put that there need to pull this back down again. So you see, we’re always constantly doing changes and manipulating back and forth, but the goal isn’t perfection, the goal is just to communicate to the software developer what it is we’re trying to achieve. Okay. So what I’ve done is I’ve been able to get this close right here. What I want to do is fill in the spaces over here on the side. I’ll use this technique that I used earlier, just to kind of fill in that space. That’s why the developers are not confused by any of this spacing, fill this one in, too. If I need to, I can always zoom in and get closer so I can see a little bit clearer. That looks actually good. I grabbed this one over here and slide it over a little bit.

Micky Thompson (09:57)

And then I can right-click and flatten it so that it doesn’t get grabbed again by accident. Okay. So then this one I can flatten and we’ll see that text come back. So that text is right there, that one, sometimes it will move on ya

Micky Thompson (10:15)

And you can just undo and pull it back. So right now, what I’ve done is I’ve put the text here. So I’ve now got a menu up here that I can work with. All I’m gonna do here is take this one and we’ll get rid of that little arrow. Snagit does a good job of getting rid of things like that. I’m gonna go ahead and flatten this one too. And then this way, what I’m going to do is I’m gonna remove this refresh and create. I’m going to add an ‘edit.’ I’ll be right back. So what I’ve brought up for you here is another product we use called FontAwesome. I realized with the edit button, I want an icon. We’ve never used an icon with edit before, but I want to go ahead and test it on this page. So I just went to FontAwesome

Micky Thompson (10:51)

And looked up, excuse me, an edit icon and this is what I found. So one work this into our screenshot so the software developer knows to use a FontAwesome Edit. And this will add an icon beside that edit button. So I’m gonna go ahead and add it real fast so you can see it. Okay. So now I’ve brought this screen to a final version that I want to use and what I can do is now include this along with my conversation. What I want to do next is also show whenever we press the edit button, what the screen will look like so the developer can emulate that too. So I’ll go ahead and do that real fast. I want to show you how we’ll do that by grabbing one of these. So by grabbing this field right here that says ‘Assignee’. There’s no drop-down arrow so I don’t have to add that. I can go ahead and copy that. I’ll come over here to this page that I created by duplicating the other page and just eliminating the little red bubbles and I’ll go ahead and paste this on here. And what I can do is just put it approximately where that logo is, that it, and I’ll flatten it. And now what we can do is I can get rid of that Micky Thompson sitting right here just by doing this right here.

Micky Thompson (12:05)

Let me do flatten. And then I can pull that Rackless down into the middle of it. Maybe scoot over just a little bit, just so it gives the impression and that right there I’ll do it for Total Hours. I’ll do it for Total Developers as well. And then also add a save button and get rid of this bar up there at the top, because we don’t need it since there’s no other than saving. So I’ll do that real fast. I’ll be right back. I want to show you a real fast here, where I’ve got a little bit of this white area where I took too big, a screenshot of that field. I can easily fix that just by taking the selection tool hovering over it and then dragging that section back up by hitting the arrow, it makes it so that I can drag and expand.

Micky Thompson (12:51)

Well, there we go. And then I can right-click and flatten and that corrected that little area right there. Okay. I needed a screenshot of the Save button. So I had to go look around the app to find where the Save button is used because it’s easier to take a screenshot of an existing Save button. So in this case, I’m going to take a screenshot of this Save button right here, because, it will make it easier for me and this is a Save button on the Edit account page inside rackless.app. So I use this and so if I copy this and then come over here to the page I’m creating and do a paste, it gives me a Save button. So that way I can put it right there. And then I’m really close to having this Edit page done.

Micky Thompson (13:35)

Okay. So now I’ve started a new conversation with Isha and I’m gonna send her these changes that I want to include. So right here, I’ve written out the conversation. Dear Isha: we want to update the design of the values page. Let me go ahead and capitalize that values page to match the rest of rackless.app. Please implement the changes as shown in the screenshot below. So what I’m going to do is go ahead and attach the screenshots. So what I want is this first one right here that I added, which gives her the screenshot of what it looks like now. And I’ll go ahead and just paste this. Let me go ahead and press enter, and then paste this screenshot in. And then once I have that one, I’ll go over here and I’m still getting used to this new editor inside rackless.app. Let me go ahead and paste that and then go here. It does this, sometimes. We have to resolve this.

Micky Thompson (14:30)

This may because I’m recording, too. Let me go ahead and paste these in and I’ll pause the recording. I’ll be right back. Okay. So what I’ve done here is I’ve also added a Cancel button. So I’ve just communicated to the software developer that we want this to be the Edit page. And I’ve also made a note that we removed the menu. We have Save button as an option, and then we also introduced the Cancel button here. So the developer will understand exactly what I mean. Let me copy and paste this and put this in the conversation. Okay. So now I’ve got the ticket created. I’ve added the screenshots here. So the developer knows exactly what we want to do, and I’ve told them to get the icon from FontAwesome. I’ve shown them what the page looks like when you click on Values. And then also when you click edit, this will be the edit page with the Cancel and Save button. So we have it ready to go for the user or for the software developer to edit, and then we’ll test it and then we’ll have redesigned this page. Thank you for allowing me to demo for you, how we use Snagit internally at Rackless, and communicate to the software developer using screenshots which as they say, a picture is worth a thousand words. So by using Snagit, we can communicate to the developer quickly with the goal we want to achieve in changing some of the designs in our web app. We hope you enjoyed it today, getting behind the scenes and look forward to sharing more with you in the future. Thanks.