Mastering the Design Process

Build & Live Phases

Paul Boag

Paul Boag

Boagworld
Mastering the Design Process

Check out a free preview of the full Mastering the Design Process course

The "Build & Live Phases" Lesson is part of the full, Mastering the Design Process course featured in this preview video. Here's what you'd learn in this lesson:

Paul briefly walks through the build and live phases of the design process and the minimum requirements for each. The build phase is where a design is turned into a fully functional website, and the live phase is monitoring the website's user behavior.

Preview
Close

Transcript from the "Build & Live Phases" Lesson

[00:00:00]
>> Quickly wanna mention build, I don't wanna get into it in a huge amount of detail, because it's a little bit beyond the scope of what we're covering. But the build stage is where the website is turned into a functional website, right? It's where the design is finalized, you make it fully responsive, everything works, it operate at scale.

[00:00:16]
It's better to completely finalize the design in the browser. So there is a design elements still going on here, I would argue, right? I see people spend hours mocking up every form of button, every form error message, and everything else. When really, that's a lot easier to just do in the browser sitting alongside the developer than it is to do it all in Figma.

[00:00:41]
So I think involving the designer at this stage is still essential and still something you should do. How do you do that? Well, obviously, you're working on the fully responsive design at that stage. You're looking at all the buttons and form states, all that kind of stuff. You're looking at your error messages.

[00:00:58]
This is where you get into things like design systems, animation to enhance the design. And again, you can do some last minute usability testing at this stage. But again, that's all a lot of stuff. You might not have the time or capability to do that. So the minimum here is, look, you've gotta work with the developer to work out button states and how forms work and error messages.

[00:01:25]
And I'm sorry that I know that there are some pure developers listening to this that don't do design, but we can't be allowing developers to make these kinds of design decisions. It's a train wreck, right? When your error messages read some code that nobody understands, you know that developer has been involved.

[00:01:49]
Just saying, sorry to offend. Okay, so that's the minimum. And then finally, live, well, that's one we're talking about this perception that a project ends, right? We've redesigned the website, we're done. And then in five years, the website is piling, steaming massive BS, because it hasn't been maintained, it hasn't been looked after.

[00:02:13]
So that's why from the very beginning, I talk about the life stage. Once the website is launched, how are we gonna maintain it, how are we gonna improve it, how are we gonna optimize it, how are we gonna maximize conversion, etc? And really, until a website goes live, even if you've done usability testing, user research, you've really only got a theoretical knowledge of how users are gonna respond to it.

[00:02:35]
So the live phase allows you a chance to observe user behavior and that kind of stuff. And that's where you're looking at analytics, you're looking at session recordings, heat maps, AB testing, usability testing. As an absolute minimum, I would recommend you have up and running on a website, a tool called Microsoft Clarity.

[00:02:54]
Microsoft Clarity is a great free tool that it's a bit like Hotjar. It lets you watch sessions back. It lets you see where people are getting frustrated on a website, where they're making mistakes. It gives you loads of really great insights, and you just check that, see where people are going wrong and fix it.

[00:03:12]
But we'll come on to more of that kind of stuff later.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now