The UX process, as I follow it in
my own practice and as I will teach it to you this course sequence,
follows five main phases.
Here they are: strategy, outline of scope,
sitemap, wireframes, and visual mockups.
We will cover each of these phases in detail,
roughly one phase per week.
You will gain experience and a deeper understanding of each phase by practicing what you
learn while working on a project that will span the duration of this course.
I will introduce the project at the end of this week's lectures.
For now, let me give you a quick overview of each phase.` I will illustrate
the deliveries for each phase with
examples from a web design project that I have worked on.
A few years ago my company,
Yay Brigade was tasked to redesign the website for
the Pasadena Conservatory of Music and I'll use this project's process as an example.
One last note though,
I have to give some credit to an influential book called
The Elements of user experience by Jesse James Garrett.
I was exposed to a lot of the concepts that I'm teaching in
this course for the first time while reading this book many years ago.
In fact, the book has been one of the top influential texts for the web design community.
Our process starts with a strategy phase.
Here, we're asking a lot of fundamental questions,
like what are our goals,
who are our users,
what are their needs.
Here are some pages from
a large strategy document that we prepared for the Pasadena Conservatory.
You see that we defined objectives for the site and determined who our users are.
We also performed an exercise to figure out what voice
our website would use if it was a human being.
The strategy phase also includes a visual research.
So we looked closely at a lot of websites of
other music schools and educational and nonprofit organizations.
The next phase is to create an outline of scope.
This is basically a list of content and functionality that needs to be included
in the site to fulfill the goals set up in the strategy phase.
Next up is the sitemap.
Here the content and functionality from
the previous phase is structured into a cohesive whole.
Here we also determine the navigational structure of the site and we'll make
sure to use precise labels for the navigation categories.
Speaking of labeling things,
for the Pasadena Conservatory site we spent a lot of time
discussing the terms for children and for adults.
We knew that it was important to have separate landing pages for
younger and older students but we also realized that
using the term children is not ideal for teenagers.
But we didn't want to create
three different landing pages for children, teens and adults.
Another solution we contemplated was to name the first section for
children and teens but that seemed too clunky.
In the end we decided to stick with children and adults
which, though not perfect, seemed to be the best compromise.
The fourth phase is about creating wireframes.
Here our focus shifts from the site as a whole to individual webpages.
Wireframes are a simple sketches of the structural makeup of a web page.
You can see here, for example,
wireframes for the homepage on the left and the for children landing page on the right.
And each of these pages was mocked up to address small and large screens.
Here are wireframes to show how we imagine
the navigation menus to work on big and small screens.
You'll notice that higher level concerns such as which typefaces we will
use and which images and which colors are not addressed here at all.
You can think about wireframes kind of like architectural blueprints.
They show what goes where without getting hung up on final design details.
Then lastly we have the visual and mockup phase.
Now it's finally time to determine the visual identity of the website.
For graphic designers, this is obviously the funnest part of the process.
You get to think about colors and typefaces you'll figure out how images are treated.
Maybe you create textures or icons or illustrations.
You can see here that we worked on the visual mockups for
the Pasadena Conservatory in Adobe Illustrator.
I like their tool since it's easy to create
multiple art boards to investigate different design options.
Other designers like the application sketch or others use Photoshop or Adobe XD.
So that's it.
These five steps will form the structure of our process in this course sequence.
You will learn about these steps in the following weeks and you will
use them for the class project I will assign soon.
Hopefully, you will use these tools in
your web design work after you complete the course.