This course is focused on the early user experience (UX) challenges of research, planning, setting goals, understanding the user, structuring content, and developing interactive sequences. While the concepts covered will translate to many kinds of interactive media (apps, digital kiosks, games), our primary focus will be on designing contemporary, responsive websites. In this course you will complete the first half of a large scale project—developing a comprehensive plan for a complex website—by defining the strategy and scope of the site, as well as developing its information architecture and overall structure. Along the way we will also discuss: - Different job descriptions in the web design industry and where UX and UI skills fall within this spectrum - The difference between native apps and websites - The difference of agile vs. waterfall approaches - User personas and site personas - User testing The work and knowledge in this course continues in the last course in the UI/UX Design Specialization, Web Design: Wireframes to Prototypes, where you will tackle—finally—wireframes, visual mockups, and clickable prototypes. This is the third course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.
Interview with Melissa Kuo
Loading...
来自 California Institute of the Arts 的课程
Web Design: Strategy and Information Architecture
58 个评分
从本节课中
What is in and What is Out: Outlining Scope
By now you should have a pretty clear idea what your projects will be about and who your target audience is. This week we will talk about how to take the user and client needs that you have established and create a set of content and functionality requirements from them. In other words, you’re transforming your overarching goals from last week into specific requirements for your site.
与讲师见面
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
I feel, am I like just a complete white ghost?
Well, it's maybe okay.
All right. Today, we are chatting with Melissa Kuo.
Melissa and I met at CalArts,
where I was her teacher.
I think, Melissa, you took a UX class with me twice.
Yes.
Also a coding class.
Yes.
Cool! That's what I thought.
You too also took an independent study with me, and there,
you designed an idea for an app where you
combined different cloud storage apps under one roof.
Right. Yes.
I don't remember the name of the app.
It was called Storm.
Storm, right.
Lots of clouds.
That was a great project.
What I also found always fascinating about you Melissa was that you served
on the student council at CalArts - a senator for the arts school.
So you're quite the people person,
maybe with a political future, I don't know.
I hope not but thank you.
Melissa, you went on to be hired as an interaction designer by Google,
right out at school when you graduated in 2014.
I actually, yeah.
After internship at Wieden and Kennedy.
Okay, so first student internship during the summer and then you are okay.
And but you've worked at Google since,
and a lot of our conversation will probably center around your work at Google.
Sure.
So, let's jump right in.
So, what I'm interested about finding out is,
if you could tell us a little bit about the path that you took to become a UX designer.
Sure. So, I guess I'll start.
So as you mentioned I studied graphic design at CalArts.
And CalArts at that time was kind of more focused on print design I would say,
on traditional graphic design.
So it was a lot of designing posters,
and book covers, and things like that.
But at the same time that I was in college,
I think a lot of new devices we're coming out.
The iPhone became more popular,
iPad became more popular all these screen-based things.
Web design was kind of growing rapidly.
I kind of focused on that in my summer internship after the third year in college.
I went to a startup in SF called Inkling and worked, interned on their branding side team,
and they also had a product design team separately which I thought was really cool.
I really loved that experience kind of working with,
in a company with like engineers,
and product managers kind of working on something that people were using,
like downloading something that can help people.
So kind of from that experience,
I participated in my first hackathon
which at that time I thought that people were actually like hacking things like
accessing into things or something but it actually just kind of building things
together in teams and I really enjoyed
that part of designing something and starting to code it.
So, and that summer we also had a lot of intern open houses around the bay.
So, I got to visit companies like LinkedIn and Facebook
and hear about their product design teams and got really interested in it.
So that's why in my fourth year,
I decided to really focus on more UX design.
And so I reached out to you,
and you helped me a ton with trying to go towards this path because everyone else is
kind of going more towards more traditional graphic design like studios and agencies,
but I knew that I wanted to work more in tech.
So, yeah, and I love your advanced web design class,
that's why I took it twice.
I just needed all I could get.
When you got to Google,
were you surprised by how different UX
was being handled at Google than you might have expected it,
or did you seem to kind of flow into it?
That's a good question. I think I didn't know what
to expect because this is my first full time job,
and then, all I can compare it to is being in an early stage startup where I was the only
one and a medium-sized startup where maybe as a team of five to ten people.
So I would say,
it's just interesting that Google kind of feels like
a bunch of startups within one company and
that all these different teams work in say these groups of like five to 10 or 15 people.
On like this many people on Gmail,
this many people on search, maps.
I guess, what's interesting is then,
there's a lot of collaboration between those products too which is cool.
I know that we can't talk about any specific projects in detail,
but can you tell us what projects you have worked on?
I'm not sure if I...
I mean what products in the universe?
Products in general, Google Search.
Most of my work is on that and I did a couple 20% projects.
So, I did something couple of years ago for inbox. Okay.
. And that's the 20% is Google
asked you to spend 20% of your time on something of your own choosing?
Yeah, sorry I can explain.
20% time is kind of more up to the individual person,
but you're allowed to spend 20% of your time working on whatever you want,
pretty much so like a passion project and that's actually
how I think Gmail was born with just a couple of engineers.
Thinking like "Oh, maybe this could be cool,
like what if we could search email or have more space in your email.
Yeah, and I know that that's something that is
quite unique about how Google is setup as a company too, right?
Yeah.
Can you tell us maybe a little bit about
the specific way that Google approaches UX challenges?
I know you do a lot of work with design sprints. You lead them.
You just came back from Berlin doing the design sprint for the company.
Maybe tell us a little bit of what that means.
Sure. So a design sprint is kind of
a five phase framework that is a tongue twister.
But it's a process that we can use to identify problems
and come together as a team of like PMs and product managers,
engineers, and designers, and researchers,
like all these different roles,
and make sure that we are aligned and kind of come up quickly with various solutions.
It was kind of a diverging and converging kind of
process to help us reach a solution at the end that we can test.
The goal is to create a prototype that we can actually bring users
in and test our prototype with the users to get some quick feedback.
And that way, we can kind of shortcut the whole process of spending months,
maybe even years coding something,
and then launching it and finding out that it wasn't even what users wanted.
So, it's like a rapid prototyping process
to get something in front of the users as quick as possible.
Yeah. And typically, the original creator is like Jake Knapp.
They did it for Google Ventures with startups in five days.
So that's kind of the popular way,
but within Google to kind of clear out people's calendars for five days.
Is like extremely hard.
So, that's pretty rare,
and so we tend to condense it to two or three day sprints more often.
Okay.
My light is out.
That seems good because it's that time of the day.
So, it's two to three days is usually how long a design sprint last?
Yes.
And what are the different roles again of people that are part of the team?
So, it's the same kind of people that would work on a project.
So that's the product manager - sorry,
let me turn on the lights, product manager,
engineers and designers, and researchers and if you are lucky like ideally,
you should also have a stakeholder so maybe someone who is
pretty high level who can kind of be
the decider and say this is the way that we should move forward.
Yeah, but you end up with a workable prototype, right?
Is that something that is coded on like a wire frame level or what does that mean?
Typically, it can range depending on what you're working on.
For us, we usually just code,
I mean we don't code sorry.
We prototype in something like principal,
and so it's just like a high-fidelity mock.
Some things are functional for example.
We can scroll through a carousel,
or maybe somethings are tapable but it's not fully functioning.
So, somewhat of a clickable prototype.
Yeah.
So, could you maybe describe,
I think it's kind of interesting,
describe what a typical day at Google looks like if there is such a day?
When you get up, when you go in.
Yeah, it is a little hard to say what's
a typical day but I will try to give you an average day.
So, so far, it's kind of flexible work hours,
so they kind of trust you to work and get your work done.
I would say I try to work the 40 hours that I'm paid for.
So, I tend to come in around 9:30 AM,
between 9:30 AM and 10:00 AM,
and start the day with some breakfast. My favorite is...
Google breakfast.
Yeah.
We have a coffee truck with toast that is great.
Spend my morning checking email,
even though I know the productivity tips say not to do that.
Yeah, and quite a lot of my days now are filled with a lot of meetings,
and these are meetings with our project team,
so checking in maybe I'll show some new mocks that I did
to the PM and maybe researcher and writer who are on the team.
And the PM is the product manager?
Product Manager, yeah. Maybe I have meetings with the larger team,
like with a whole bunch of engineers who are in the room and
it's a progress on the whole project check-in.
We have one-on-one meetings with like,
say my manager or other teammates just to check in also.
Then, besides that, some work time.
So, most of my time then would be
just sitting in front of my computer and working in Sketch,
the tool Sketch, designing box.
That would be the end of my day.
So then, yeah, leave around six or seven, yeah.
Cool. So, no all-nighters like in school.
I'm so glad there's no more all-nighters.
Okay. So, you already mentioned a few,
can you tell us what software tools that you are using?
I know you've mentioned Principle a second ago and Sketch.
So, what is the software suites that you draw on on a regular basis?
Yeah. Everyone, I would say mostly uses Sketch nowadays.
Okay. What do you do with Sketch?
What I do with Sketch?
Yeah, like what is it good for?
Okay, I feel like you can use Sketch for
both lo-fi and hi-fi mocks for the projects that I'm on,
I tend to be able to easily jump to more the visual side
of the design rather than just
like the old kind of wireframing where you would just put like a gray box or something,
now, it's so easy to actually fill it with something,
with real content to make it look more realistic.
So, you're saying that you jump over low fidelity wireframes completely or?
Not completely. So, I tend to still use just pen and paper for kind of
sketching wireframes and then mocks.
Mocks, you mean mock-ups, right?
Yeah, mock-ups.
Yeah. Then those are done in Sketch.
Then, so how does Illustrator or Photoshop work into,
that's something that's just yesterday's news?
I would say some people,
very few people, but some people still hold on to Photoshop.
I would say for people who are just learning how to do UX could just jump right into
Sketch because Photoshop is better for things like editing photos.
Everything I think is a lot easier and more intuitive in
Sketch and so it's not too hard to pick up.
Yeah.
Illustrator, I would say a visual designer will still use
Illustrator to design like icons or illustrations and things like that.
For me, I usually don't need to use Illustrator anymore.
Because you're not on the illustration team let's say,
you don't do the Google of the day logo redraws?
Yeah.
Yeah, it's interesting. I don't use Sketch in my own work and
I certainly don't use Photoshop for UX design, for mock-ups.
That was a great tool.
I guess you're too young to have cut
up Photoshop mock-ups and place them into HTML tables, but that was-
Oh, wow.
-the late 90s where you just like you wanted to use a special typeface and stuff.
You put it in Photoshop,
make a GIF file of it and then paste it into your design and the code.
Obviously, all of those things are not luckily behind us.
But I think Illustrator might be
a decent tool for mock-ups if you don't use Sketch, right?
Not everyone has access to Sketch but they might have access to the Adobe Suites.
You were talking about Principle so prototyping,
I know that there's also a tool called InVision and Adobe XD,
obviously, but then Principle seems to be similar to that?
Similar to what?
To InVision where you can create a clickable mock-up.
Similar. Principle, you can also kind of do more with animations like with timeline,
so I think you have a little bit more control in getting it a bit more detailed.
But InVision is good for quick prototyping,
that's more like click-through, like hotspots.
Yeah. Is that something that you guys are using as well?
It's actually not, because it is Cloud-based I think,
and so these Cloud-based tools have to go through
some security audit and still ongoing.
I see.
There are people who are requesting to
use it because they've used it in previous companies.
I think it's a very popular one,
but so far we're still waiting to get that approved.
Another question. Essential skills for designers working in UI and UX,
what do you think, what do you need to know in order to make it at Google let's say,
or any other UX job?
I would say, well,
in terms of preparing your portfolio for applying to jobs like this,
the most important thing is showing your process and that I am
speaking more from the UX design, interaction design perspective.
Which is great.
Because what companies care about and what Google
cares about is how you think and how you solve the problems.
So, I think considering
how you tell the story of your project and framing what the problem was,
who your users were,
any research that you did,
documenting everything from the rough Sketches
and your wireframes to different kind of iterations of your design,
and until you finally reach
your final good-looking UI and even talking about the takeaways.
Maybe you did some research and you learn
something or what you would do if you had more time.
Interesting. So, considering what's not
working maybe a 100 percent and what you would do differently,
maybe, being critical?
Right.
So, just showing a really clear well-documented process,
and telling the story in a way that's easy for anyone to understand.
Think about your user for your actual portfolio
is probably going to be a lot of recruiters who are looking at it.
So, yeah.
Just being conscious of how you tell your story that way.
Other skills, so, very cliche one,
but just empathy for the user and you can't just design for yourself,
and I think that's something that I felt was more
common if you were just to do traditional graphic design,
which is not to say that you're just designing for yourself.
But in a place like Google,
which has so many users to consider,
you can't just think like,
"Well, this works for me."
Like, that should be good enough,
or "This works for my friends, that's good enough."
You have to consider
internationalization in terms of other languages that countries speak,
right to left languages,
they consider different Internet speeds and things like that,
whether people are more often going to be using mobile versus desktop.
Accessibility, so thinking about blind users,
deaf users, all of this,
Google cares about a lot because we do want to try to design for everyone,
which sounds so silly because like in design school,
you always feel like you're never going to design for everyone,
that's not possible, so pick someone.
This is really funny, I just had that realization
because when you ask people about their target audience,
a lot of students will say, "Well,
it's really about for everyone, right?"
Yes.
Then you'll have to say, "Well,
it's maybe not true, right?
It's probably for a certain age or socio-economic part of the,
or certain location even, right?"
But then when you're working on Google search, it's a dilemma.
You basically design for every single person,
at least that's on the Internet.
The few people that are using Bing as their search engine.
But that's quite a different design challenge than most, I suppose.
Another skill that I should mention is just communication.
Presentation skills are pretty important
because you will be in a lot of meetings where you do have to say,
"Present your designs or talk about why you did something this way",
and even presenting to higher level leadership.
So to be able to clearly communicate your rationale is important, and again,
I think that storytelling is so important when you're interviewing. Yeah.
Storytelling, that's really interesting to put yourself into or like
create a narrative for your presentations.
Yes.
So, I have a question about the teams at Google,
could we a kind of segment,
a little bit of what kind of job descriptions
you have at Google which I think will just say
a lot about the interactive web design industry as a whole.
You call yourself an interaction designer, right?
What other designers are there?
There are visual designers who you can equate that to UI designers or graphic designers.
But your job description is a interaction designer, right?
Yes.
That's different from them?
Yes.
What's the difference?
So, visual designers will be focusing more on the final look of something,
so they'll be working with typography, color, icons,
space, texture, whatever, to make sure the final UI is perfectly polished,
and be able to send the specs and assets to the engineers.
Or on teams that it's more specialized,
they might just be focusing more on creating beautiful illustrations for
a product or things like material design where they are creating a visual design system.
So that's that, and then interaction designers which is what I
do is equated to UX designer in other companies.
Thinking more about the user flow,
the whole process from making sure that's the right problem to
solve and coming up with
different iterations and the general structure and layout of the design,
but often you'll find teams here that are just hybrids.
So, designers with both visual and interaction design skills who do the whole process,
so my team is like that.
Even though my title is interaction designer,
I still do everything,
including the final UI.
So you're also, because you're a trained graphic designer as well.
Right.
Are there people on the opposite end that
don't have a graphic design background at all and they do is wireframes,
so all they do is sitemaps or strategy studies or user segmentation,
that kind of early parts of the UX process?
So there are people who don't have
a graphic design background who are interaction designers.
So, I feel like often the popular major now is the HCI human computer interaction.
But I would say,
to work at Google,
you still do have to have a decent level of intuition with aesthetics, and so,
I find it is very rare that they
would have no visual design background at all or experience.
Breaching into the engineering,
are there people at Google that will,
the "unicorn people" that will be designing and then jumping into the code entering,
banging out some code or does that happen or
is there a divide between the visual people and the coders?
Yes, I'd say there's a spectrum.
So from visual design to engineer there's, so,
visual design and then you go to interaction designer and
then there's a role called UX engineer.
I think those are the true unicorns who
have a good sense of design and they are very comfortable coding,
and so, they are often working on things
like high-fidelity prototypes which are
more realistic where I can actually use real data.
So that's UX engineer and that has two lenses.
One is more design focused and one is more engineering focused,
and then that gets into front end engineer and
the back end engineer on the other side of the spectrum.
We do also have motion designers,
but that is different from what you might traditionally think of motion design.
So, it's not so much like motion studios designing commercials and things like that,
but more UI motion. So things like-
Micro motions?
Oh, I said UI?
Yes, no, but I'm wondering.
Is that what it's called?
No, no, no-.
-I'm making it up.
I'm saying like how does, when you click on this thing and it's either that,
what is the motion of it vanishing,
like that stuff, not like 30 minute spots.
Yeah, yeah.
More so kind of transitions,
animations, how a product logo might animate when you open an app. Things like that.
All right, then one last question for you, Melissa.
Do you see any emerging technologies or
tools that might change how you work at Google or how designers approach UX,
and I don't know,
looking to the next years, five years?
Yes.
I don't know, or is there something that you're excited about?
I think if we're talking about technology,
there are software tools that we use.
What I see right now though,
right now, it's 2018, right?
You see a lot of different prototyping tools and there's sketch,
and then other kinds of tools that are more into making it into code,
and I'm seeing more of a convergence in the future.
There's probably going to be a winner,
right now, like everyone uses everything,
but you start to see some companies coming up with
more integrated products where you can design and prototype in the same tool,
or animate and encode in the same tool.
It's more of a you can just like-
It's coming full circle.
Yeah. But things like that,
that might make our lives easier,
and that we don't have to jump from tool to tool,
but maybe one day they'll be one, all-inclusive one.
So that could be interesting, not sure where it'll go.
I think another thing that's emerging is,
I wonder how things like machine learning will affect our field.
You can see hints of it.
I think a couple of years ago,
there was a site, and basically it would
say they use artificial intelligence to design your website.
They just, like you don't need a web design anymore,
and I think that idea is interesting and worrisome for our jobs.
So yeah,
but it can also open up interesting opportunities with AI and that kind of technology,
like what could we do with that is also interesting as a designer.
Things like zero UI, conversational UI,
where things like smart speakers are getting more popular and there's not a screen on it,
but you still have to design those kind of interactions.
It's a lot of user experience,
a lot of design,
just the visual pulled out of it.
Yeah.
Kind of very much reduced.
Right. Yes.
Interesting. Alright Melissa thank you so much for your time.
This was a very interesting conversation.
I wish you well.
Thank you.
Thank you.
Yeah. Thanks Roman.
