Design

User flow, Wireframes, and Designs

This episode highlights some of the most exciting parts of project roadmapping: seeing your app come to life through the user flow, wireframes, and designs! We discuss how each step informs the next and the design choices we made for Encapsule. Full Transcript Below: Alexandra: Thank you for joining us …


This episode highlights some of the most exciting parts of project roadmapping: seeing your app come to life through the user flow, wireframes, and designs! We discuss how each step informs the next and the design choices we made for Encapsule.

Full Transcript Below:

Alexandra:

Thank you for joining us once again on our Project Roadmapping Mock Project Roadmap mini series thing that we’re doing around here on the Encapsule app. If you haven’t seen the first two episodes, go check those out. But today is episode three. We’re talking all about user flow, wire frames, high-fidelity designs. It’s the really exciting part, I think, of the project road mapping process. You really get to see it come to life. So let’s take a look.

Alexandra:

Okay. So then let’s move on to the user flow. So this is something that we really like to make for our clients. And again, not every project is going to need this in depth of project roadmapping. We did all the wire frames and a ton of designs and a full prototype and blah, blah, blah. And we absolutely can’t do that for any of our clients who would need that, but some may just need a couple of wire frames and a user flow to get started. So maybe Aaron, do you want to walk us through this? Because you actually made this user flow for us.

Aaron:

Yeah, sure. So yeah, basically we took from those user personas their key pathways that they need to achieve the goals that they want the app to do for them. And we, using those, created this diagram of the user flow and how they would move through the app. And one of the things we were emphasizing here is not what screens they’ll visit, but what tasks they’ll do.

Alexandra:

Yeah.

Aaron:

This is supposed to be kind of design screens agnostic. This is just the flow of tasks that they need to do, and from this we’ll generate screens.

Alexandra:

Yeah. I think that’s a really important distinction. Because, again, even me coming in as the mock client, I was ready to go out there and wire frame some stuff from the start and you had to keep pulling me back and saying like, “No, let’s actually talk about what they need to do before we figure out what the screen should look like and where the button should go,” and blah, blah, blah. And it’s just so easy to jump into that and it’s really important to take that step back.

Aaron:

Right.

Alexandra:

So the user flow basically shows from sign up to getting to your capsule overview, where you get to see all of your colors and the items that are missing from your closet or the things that you have duplicates of. That’s what the user flow is showing, those key decision points as we move along. And then we made a butt-ton of wire frames.

Andrew:

Can we just talk about what a wireframe is?

Alexandra:

Yeah, absolutely. What is a wireframe?

Aaron:

So a wireframe is generally a low fidelity black and white screen showing you just where different UI elements are going to go. Kind of their relation to each other on the page, but not necessarily what the end product would look like or what a specific component will look like. Just kind of blocking out the page, showing you what the general layout will be.

Alexandra:

Yeah.

Aaron:

And again, to Andrew’s earlier point, we do this because it’s much easier to change these really simple drawings than it is if I fully designed a screen and then we want to change it.

Alexandra:

Yeah.

Andrew:

So it feels like something that really is just kind of a primer for your imagination. Right? It’s not something that’s super time consuming, it’s not super detailed. It’s kind of like, “Oh yeah, this would sort of be what the feel would be if I were the customer. I’ve got these big bubbles here and there’s a menu and kind of the bottom navigation thing.”

Alexandra:

Yeah. And even us working sort of at this level, we made some pretty significant changes to the order in which the user would encounter certain screens. And again, we kept coming back to the question, “How can we reduce the friction?” Because this is kind of a big process to spin up and how can we like take that back and take that back? And the wire frames helped us to do that immensely.

Aaron:

Yeah.

Andrew:

Yeah.

Alexandra:

Okay, the style tile. So Aaron, what’s a style tile?

Aaron:

So style tile is essentially a one-page snapshot view of all the graphics and colors and topography of an app or website. And in this case we have all the main typographic elements, what font we’re using, our palette, supporting palette. We also pulled out some key words that are descriptors of the general look and feel of the app and then some key UI elements pulled out on the bottom just to give an at a glance look of what is this app supposed to feel like.

Alexandra:

Yeah.

Aaron:

It’s something that’s easy to pass around to stakeholders.

Alexandra:

Yeah.

Andrew:

It almost reminds me of what you see in the app store when they’ve got the screenshots and you just sort of get a feel for like, “Oh, this is the experience I’m going to have.”

Aaron:

Right, yeah.

Alexandra:

And then this is really helpful too because it shortens up the design cycle. If you decide you need to add more screens or something like that, you can hand the style tile plus the wire frame to a developer and they could get you to the end design. It allows us to do a few high fidelity designs, but not every screen has to be fully designed out if you have a style tile or a style guide.

Aaron:

And I could speak to that too because some of our other clients that we don’t do roadmapping for, they have already created these style tiles and they’ll just hand it to me as a designer and I can work. It really bootstraps the whole design process because I get this starting template. And yeah, it’s really helpful.

Alexandra:

Yeah. What’s the difference between a style tile and a style guide?

Aaron:

I think a style guide is generally more comprehensive. It could be several pages and it goes really in depth on, “If you have this button, here’s all the variations of this button.”

Alexandra:

Got it.

Aaron:

“If it’s on this background, use these variations.” And it’s goes through every component. So yeah, it’s more comprehensive while this is meant to be one page, view it all in one glance kind of thing.

Alexandra:

Very cool. And then so obviously once we set our style, then we move into making high-fidelity designs. Which again, Aaron you did a beautiful job on this. So what were some of your inspirations going into this and how did you sort of make these designs?

Aaron:

Right. So we’ve walked through all the process so far. And so at this point, most of it is done. We have our wire frames locked in, we have our user flow, and so I’m really just fine tuning it at this point. Adding color, adding the fonts, looked at a lot of the competitors. The fonts that are generally used in the fashion space are really elegant and simple. The UI is kind of black and white, besides the colors, because you don’t want to distract from the colors of the actual wardrobe. So it’s a very simplified, elegant look and feel to it.

Alexandra:

And then we had a lot of debate on these designs right here, which is when people are sort of interacting with the items in their closet and checking things off. I mean, there’s all these little components and you came up with a design that was in two columns on the screen. And both Andrew and I were concerned about it and we thought, “Oh, is this going to be too small?” So how did we resolve that problem?

Aaron:

So yeah, there was some back and forth there. And I think one of the things that kind of solidified this two column view was I was able to pull it up on an actual phone, which is always critical when designing. It looks one way on a screen, and even if you drag your monitor or drag your window to look like it’s that size, it’s still a different story than pulling it up on your phone and seeing like, “Oh, okay. It does work, font size readable, and there’s enough space and it’s easy on the eyes.

Alexandra:

Yeah.

Aaron:

Yeah.

Alexandra:

So our designer was vindicated. Turns out he knows what he is doing.

Alexandra:

I hope you enjoyed that episode all about the design process for project roadmapping and how that fits into project roadmapping overall. If you have any questions, leave them in the comment section down below. For the next episode, we’re actually going to take a look at the prototype that we built, talk about user stories, milestones, and then next steps. What do you do with your project roadmap once we finish that for you?

Similar posts

Get notified about the latest in Tech

Be the first to know about new tech from the experts at Bixly!