A designer shows how to start an iOS app redesign by taking screenshots and using Flokit to annotate and organize screens. This early inventory helps communicate ideas to clients and speeds up feedback before diving into detailed design work.
I'm making this video because I. I just am starting a new project, a new design project. It's a web app design, responsive web app, and there's an iOS app to go with it. Pretty common scenario these days for startup projects where you have like an iOS component and a web component. But I always like to start with the mobile screens first, whether it's the app or the website, because I feel like it helps prioritize some of the design decisions. And I started using Flokit for, like, kind of assessing the initial designs because the product is already built. They've already actually released this in the app store. And I am going to kind of break down the entire app for one. It helps me kind of inventory all of the screens when I'm first starting out. And it helps me to, you know, figure out, like, what I'm gonna do, like, for the project. So I need to inventory all the screens. I need to give some feedback, and I also need to see how the client receives that feedback to know whether or not these are gonna be easy wins or if this is gonna be something that is gonna be a bit of a pain point. And I need to persuade them more so than I originally thought. So this is almost like a document that will help me get grounded. And I don't always produce these, but it's just really helpful to produce a document like this. It's like an easy way to do a quick deliverable to increase the perceived value that you're providing to the project. And it also just helps you, like, get your thoughts out. And it helps you understand, like, okay, how are they going to react to me proposing a navigation change or killing one of the features and merging it with something else? So, anyway, I'm going to show you this document, I'm going to walk you through it, and we're going to take a look. So, first of all, I made a lot of screenshots inside of the. In the iPhone, you know, squeezing the buttons, making screenshots. I put them on my computer. I put them on my computer using, like, Airdrop. And then I'm actually just. I'm scaling them down to 375, which is the width, which is kind of like the standard iPhone 10 size. And now I'm really just connecting the screens with Flokit. And since these are all in libraries, I can just hit a quick command. I can draw without having to draw. I can place the kind of flow for everything. And I'm using some of the annotate library pieces to show like, okay, hey, this would be nice if we did this. This would be, you know, nice if we were able to. It looks like I'm checking my phone there, just adding like notes to the entire document versus having like a huge segmented email. And so I'm kind of saying like, hey, here's a hypothesis. Like, hey, maybe this is a problem because of X and maybe here's like a recommendation. And so I'm kind of clarifying some of my design decisions while also trying to gauge what their gut reaction is going to be like, oh, does this sound like a good idea to you or am I going to get immediate pushback? So it's better to do this in text form when I don't have to spend a bunch of time designing a whole new thing for a week and then presenting it and then realizing like, oh, actually they really love the way this already worked. So this is kind of like testing the waters with the new client's design document. Just about every screen I'm annotating, making some notes about what could be better and then ways that we could make it better. Yeah, so I've just, I just put all the kind of flow pieces together and I'm using these little red annotation lines. Let's see what else. That's pretty much it. I'm just kind of fast forwarding here without getting like crazy into the specifics. That's really all it is, is just laying out the entire app and exposing everything. Because I don't know if they even had this version of this kind of exploded view. But it's just a really easy way to use Flokit and to provide this document to the client to get feedback and to get, you know, your thoughts in place. And honestly, like, I heard back from the guy after this and he was like, oh, I love the way you're thinking about all this. You know, it all sounds good to me, like, go for it. And so it was like, oh, okay, this is gonna be easier than I thought. But it's just a very simple way that you can provide this kind of documentation early on in the project, especially if it's a redesign to just get the ball rolling. Alright, that's it, that's the video. Thanks for watching and I hope to post more of these. I'm really gonna try to get started on like a consistent post basis. At least one a week. I can probably knock out a video a week. If you haven't already hit subscribe, hit like if you like it. If you want to see more stuff like this.
