The Design Process

A high level look at what the UX and design process looks like

Scroll down...




Before we dive too deeply into the theory and application of design on the web, it makes sense to take a high level look at what the design process looks like and where it fits into your overall workflow. The whole point of this mini-course is to give you skills you can use, and here we'll briefly look at how that works.

It may be useful to check out the End-to-End Workflow Demo Video from the previous mini-course to see it in action, though we've skimmed the early parts of the design process a bit in the video.

The goal of the design process is to make sure we're going to build the "right" website (or, as you just learned, the right "product"). That means that, before we write a single line of code, we need to figure out who our users are, what they want, and how to give it to them. More formally, it means going through three phases -- Discovery, Strategy, and Design.


Interviewing Customers

Discovery is all about figuring out who your users are and what their goals are. You'll need to think about how the users' goals align with those of the business too -- it's too easy to get stuck building a great site with no business potential.

The discovery phase is one of your responsibilities if you're an entrepreneur or possibly even as a freelancer. As a typical developer, though, you're usually working downstream of this process and so it isn't terribly important to understand more than the high level aspects of it.

Tools of the Discovery Phase

Your key asset during this phase is talking to customers. Once you've interviewed them, it's common to produce "personas" which represent typical users so you can easily refer back to real cases.

User Personas

For simpler sites, you probably won't do anything so formal as creating personas but you should still talk to your potential users and customers (especially if the user isn't you).

A Better Explanation

Read Discovery on UXApprentice (from Balsamiq) for a better and more visual explanation of this phase.


User Flows Source: Agile Modeling

Once you know your user and her goals, you need to craft a user experience which helps them effectively, efficiently and satisfactorily accomplish those goals. This is where the UX portion of things comes into play.

As a developer, this is the most important phase to understand because what you build will directly support the strategy that is derived. You need to make sure your code is helping the user achieve her goals. If you run into questions during development (which you will), having an idea of your UX strategy will really help you make appropriate trade-offs and take the correct path forward.

You'll learn more about the strategy phase in the section on User Experience.

Tools of the Strategy Phase

In this phase, you'll get into sketching the site architecture and storyboarding the user flows. You'll also make rough prototypes of the user interactions with your pages and decide the high-level page elements.

When working with simpler sites, you might skip the formal storyboarding stuff and just whiteboard or sketch out flows and interactions on paper before moving directly into creating a mockup.

A Better Explanation

Read Strategy on UXApprentice (from Balsamiq) for a better and more visual explanation of this phase.

Visual Design

Design Grid Source: Six Revisions

The design phase is where you take the site architecture and user interactions from the strategy phase and flesh them out into a real mockup that resembles the final site. That means applying fundamental design principles to create something that looks good and works well. Or at least something which doesn't look and function too poorly :)

Even as a developer, understanding how these design decisions are made will provide important context for the things you're building. As a potential freelancer or entrepreneur, you'll need to do this stuff yourself so grasping the fundamentals will be doubly important.

You'll learn about the fundamentals of design in the section on Design and how to turn them into functional mockups in the section on Mockups.

Tools of the Visual Design Phase

For this phase, your work will be geared mostly towards creating mockups. If you're working with a true design team, they will also build the visual assets for your project (e.g. images and illustrations).

Our mockup tool of choice will be Balsamiq Mockups, though there are other alternatives. You'll learn more about this tool in the section on Mockups.

A Better Explanation

Read Design on UXApprentice (from Balsamiq) for a better and more visual explanation of this phase.

From The Design Process to Production

We've talked about the Discovery, Strategy, and Visual Design phases but they're really all rolled up under the umbrella of "The Design Process", which is basically the stuff you do before you actually start building your site. To reiterate, this is stuff that you'll need to do yourself if you're an entrepreneur or maybe a freelancer but it isn't usually considered core development work. This mini-course will guide you through all the steps of the Design Process.

The "Production" phase follows the design process and that is where you finally turn all those mockups into reality. It's also the traditional domain of the developer. We'll dive much deeper into the production phase in the final two prep mini-courses ("Engineering" and "Coding") and, of course, during our professional Flex or Immersive programs which follow these prep courses.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: How This Mini-Course Will Look