The speaker provides insights into the UX design process adopted by a small team working on a diverse product range. Emphasizing efficiency and agility, the speaker discusses the importance of quickly conceptualizing page layouts before coding begins. They demonstrate a practical example by sketching a sign-up page for a mobile app, showcasing how even rudimentary drawings can effectively communicate design ideas. Throughout, the focus remains on practicality over perfection, highlighting the use of quick wireframing methods to save time and encourage team collaboration. The video concludes by encouraging viewers to adopt similar approaches to streamline their own UX design workflows.
Summary
Overview of Approach:
- Brief overview of the UX design approach used by the speaker's team.
- Mention of being a small team with a large product and multiple clients.
Importance of Efficiency:
- Discussion on the need to efficiently design pages before coding.
- Emphasis on agility and hitting the ground running for new features.
Approach to UX Design:
- Description of the approach used by the team for UX design.
- Mention of various tools available but focus on a quick method for designing.
Practical Example: Sign-Up Page Design:
- Demonstration of designing a sign-up page for a mobile app.
- Explanation of drawing out the page layout despite limited drawing skills.
- Explanation of elements like email, password, confirm password, and signup button.
- Mention of basic validation and API interaction considerations.
Emphasizing Efficiency and Understanding:
- Emphasis on saving time by using a quick wireframing method.
- Discussion on the importance of team understanding despite simple drawings.
- Mention of utilizing standardized design patterns and methodologies.
Podcast
Check out on Spotify.
Transcript
0:00
Hey there, hope you're doing well. In this video, I'm going to talk a little bit about the approach we take for a lot of our UX designs. As you probably know, we are a small shop, but we have a pretty big product. We have multiple clients like a web app, Monita Mobile, a mobile app, and so on and so forth.
0:17
So we have a tiny bit of time before we get started on a feature to kind of narrow down and arrive at how that page or screen should look. Of course, we are pretty agile, so we change as we go, but we want to hit the ground running from day one for every new feature we work on building.
0:38
So here's our approach. We have a few different variations to this approach, but more or less, this is what we do to actually get our pages before we start coding them. I'm going to show you how we do them. So let me record this on my device here.
0:55
That way you can actually see how I do this. Okay, let me go to this app and create a screen here. Just draw this out. Just to give you a background, I don't draw very well. "Very well" is like, what is it? A euphemism or whatever? I draw very poorly, right? So I have to manage with my tiny bit of drawing skills to do these engineering drawings. I'm using the word loosely as well, so long as I understand how this page should be constructed or built. And the folks working with me also understand because we do it together.
1:33
So having said that, let's take a very simple example, right? Let's say we are actually going to be implementing a sign-in or a sign-up page, right? Let's start with the sign-up page for instance. Very basic stuff, right? So for this, you may in the real world, definitely, as a startup, you probably don't even have to spend much time designing because there are a ton of templates out there, and it has to do basic stuff. But it's not a bad example for us to start with, right? Just to get the idea across. So let's say you're given a task for designing a sign-up page. And as a product manager, as a UX designer, you have to do this and then give it to your dev team. Here's one way you could do that in many ways, but I'm going to talk about one quick way that works for us and to focus on what the purpose of this video is, is. I'm trying to call out the difference, even though I haven't said that yet.
2:28
Between using fancy tools, which are always nice, it's always nice to use a tool. It could be Sketch. I think it's Adobe's. There are multiple sketch products out there, and one of them is Adobe's Sketch, at least the app. And then there's Omnigraffle for Mac and Creately, and there are a number of other tools that you could use to do this. But you know, a lot of them take time. And if you have to be precise in terms of the pixelation and the gap between the buttons and everything else, and you're pretty, what do I say, anal about it, then maybe you do want to use that tool.
3:05
But you know, for most of this, at least a version of it that you can draw out works quite well. And that's what I want to show you here. Even as someone who does not draw very well, how can we possibly do this so we can save a ton of time not having to actually drag and drop these boxes and make them look pretty and whatnot, right?
3:27
Anyways, so let me show you. OK, there I go. So let's say I just create this. This is in landscape mode. It gives me a little bit of room to draw. I'm just going to say this is literally the sign-up page on native mobile, right? This is just to tell me that this is not for mobile web or the web product. So let's say sign-up on mobile. I'm going to choose a different color here. OK.
4:11
This is my idea, my idea of the screen itself. And then I'm going to say that is going to be, we'll choose a slightly different color. We want to ask the user to enter their email, right?
4:50
OK, that's not enough room so I'm going to keep this open, right? OK, let's go back here. And then we're going to say we're going to have a button here that says, we just choose a slightly different color that says sign, right?
5:19
Now let's just make this simple enough.
5:34
OK, so let's call this essentially page number 1, right? Maybe this is our first page. So here we have something very simple. It says email address, password, confirm password, and then sign up, right?
5:51
We get the point here. We obviously need some branding that needs to happen here. I don't recall what ours looks like, so maybe I could say add our logo somewhere here and then that gives you an idea as to what gives the developer an idea as to what this basic page should actually look like.
6:34
But even to do that if I have to use Sketch or something else to create these wireframes, it actually takes a significant amount of time. And now this is a very basic page, remember that. But as this can get complex, the pages and screens can get complex, they have to have multiple variations. You know we have to kind of analyze the user experience as to what works well, what doesn't work well it tends to take that amount of time.
6:57
So let's continue with this. Now that we have that, so we're going to say email address, I'm going to say do regex validation.
7:36
Now you could do this on the UI or the API or on both ends, but we at least want to account for something. And also dummy emails. For instance, there's plenty of test emails that you could be using. We don't want users to sign up using those domains essentially, right?
8:09
So that's those are some of them. And then let's come here, to password needs to be 8 characters or more. It needs to have maybe a special character plus a number for instance.
8:33
So those are some of our checks. And then three needs to match. Those two emails need to match, right? So some of those checks and then the last, last but not least sign up making API request.
8:59
And maybe you want to disable the button if your API's could take a second or two for the sign up to complete. So that completes the action. Right now you basically say that this is the page for mobile. You go implement it. Now you notice that this is just a wireframe. We're not talking colors, even though I used
a variety of different colors here.
9:16
That's no reflection. So the dev, maybe he's going to take an initial stab at it. There's plenty of examples, you know, you look up. We're not reinventing the wheel here. A lot of these initial pages, even the ones that are unique to your business, there will be aspects of those pages where you want to stick to some standardized methodologies and design patterns from a user experience standpoint.
9:37
So the whole video is like maybe shy of 10 minutes. So we are done with a page, a mobile UX design. Right now we can actually take a screenshot of this. What I generally do is I would take a screenshot of this and then if I were to use Invision for instance, and to communicate the navigation, right or maneuvering between pages.
10:05
I'll just take these screenshots and Invision and Justice wire them up. So that takes literally no time because now we have to wire the sign up action, so to speak. So what you would do, I'll probably do a subsequent video to show that you just say that the sign up action will take you to a next page.
10:21
Maybe it throws an error, something is not right, or it, you know, takes you to the landing page, to the secure landing pages. So anyways, that's hopefully that gives you an idea. I can probably dig deeper in my subsequent videos, but here is one way you could do quick UX designs, right?
10:40
So as long as your team understands your handwriting and the way you draw, as poorly as it might be, you should still be alright. Thanks for watching.
Top comments (0)