UX Awareness and Process

If you’re looking for best practices and new ways to determine and utilize the quality of experience in your applications, this expert webcast is for you.

Transcript

[00:00:00.000]
colleague Russell height Russell thanks

[00:00:01.920]
for being here q Russell is a UX

[00:00:04.230]
designer and he’s going to share his you

[00:00:05.970]
have ux expertise with us today just a

[00:00:08.970]
reminder before we get started we’ve

[00:00:10.320]
left some time after the presentation

[00:00:12.210]
portion to answer your questions so feel

[00:00:14.969]
free to post any questions on the

[00:00:18.390]
webinar tool and we’ll take care of the

[00:00:19.980]
sea and also just to note this webinar

[00:00:24.300]
is being recorded so if you miss

[00:00:27.210]
anything you’ll be able to review the

[00:00:28.680]
recording will also share a link to a

[00:00:31.980]
PDF which has some more detailed info so

[00:00:34.980]
we’ll get those two after the event so

[00:00:37.079]
that’s it for me yeah thank you what’s

[00:00:41.100]
up thanks everyone for joining us today

[00:00:43.760]
so today we’re going to be just talking

[00:00:45.750]
about UX and awareness and process so

[00:00:50.969]
we’re going to cover UX and how it

[00:00:54.510]
impacts various industries

[00:01:00.220]
clarifying the length

[00:01:04.989]
lage na so

[00:01:10.880]
if I have experienced all these

[00:01:16.609]
companies at some point whether it be

[00:01:20.390]
helping a Ryan uber or listen to Spotify

[00:01:22.859]
and we also know them but another thing

[00:01:27.840]
that all these companies have in common

[00:01:29.909]
is that they’re great use of design and

[00:01:33.929]
ux we associate how we feel about these

[00:01:38.869]
different companies based on what our

[00:01:42.270]
experience has been maybe booking a room

[00:01:45.390]
on Airbnb and how easy it is to throw

[00:01:49.349]
your files of all on dropbox that

[00:01:52.530]
feeling is a direct correlation to ux

[00:01:58.009]
but you might be asking yourself how is

[00:02:01.020]
this relevant to me if i’m developing

[00:02:03.719]
applications that are for internal use

[00:02:06.509]
only the bottom line is that every

[00:02:09.780]
application for the most

[00:02:13.130]
part and we as I just mentioned we all

[00:02:16.730]
have used those applicant Netflix so we

[00:02:22.480]
expect a certain level of understanding

[00:02:26.210]
and ease of use the other thing too is

[00:02:29.390]
that you ex can impact an increase your

[00:02:34.070]
ROI so

[00:02:38.840]
let me go through a couple example

[00:02:45.850]
both of what i mean by that

[00:02:49.080]
the software and you um if it’s maybe

[00:02:52.770]
like customer facing you less people are

[00:02:57.780]
going to turn on with what’s easy to use

[00:03:00.860]
but also on the development side you

[00:03:03.840]
flex can help the planning process which

[00:03:06.000]
we’ll get into later and dramatically

[00:03:09.330]
decrease the amount of functionality you

[00:03:10.950]
need to to deploy your application it

[00:03:15.360]
also reduces the amount of frustration

[00:03:17.880]
you might feel because

[00:03:20.490]
you have to not only just make if you do

[00:03:23.550]
hit it there it clearly explains why you

[00:03:26.730]
have the error and what you need to do

[00:03:28.320]
to continue

[00:03:31.850]
so next up I’m going to go through the

[00:03:35.720]
different the lingo and terminology of

[00:03:37.700]
UX I’m sure you’ve heard all sorts of

[00:03:40.880]
things ui/ux user interface usability

[00:03:45.140]
all these

[00:03:50.640]
turn terms that one and chips to each

[00:03:56.530]
other

[00:04:00.270]
first off a lot of times people when I

[00:04:03.390]
tell them that I’m a UX designer that

[00:04:06.540]
they immediately assume so you you

[00:04:08.850]
change change the colors of thing and

[00:04:12.320]
that is true I I often do make things

[00:04:15.180]
pretty but it’s really just the very

[00:04:18.690]
first step of the whole UX umbrella so

[00:04:22.830]
styling is actually be processed we use

[00:04:26.660]
through a language called CSS which

[00:04:29.970]
stands for cascading style sheets and

[00:04:32.430]
it’s changed to cup colors so if I want

[00:04:36.540]
to make a button blue I will change the

[00:04:39.030]
color in CSS to be blue next we have

[00:04:43.830]
steaming seaming is the process of

[00:04:47.700]
taking a company’s visual identity so

[00:04:52.830]
that’s you know your logo your cup whea

[00:04:56.640]
path uh turns your print much all of

[00:05:02.340]
that is analyzed

[00:05:04.550]
kind of compile to to fit into your

[00:05:09.370]
application so that it still feels like

[00:05:11.750]
an app that fits with your brand so

[00:05:16.420]
seeming is taking that and translating

[00:05:19.070]
that so that you can then style

[00:05:24.370]
alright and this needs styling theming

[00:05:26.919]
can you I design all relate to what we

[00:05:28.840]
see and this is like is as you can see

[00:05:32.800]
it’s only perhaps halfway there and UI

[00:05:36.070]
design is specifically where we place

[00:05:39.310]
different objects on the page just to

[00:05:43.810]
know Oh too kind of orientate you so

[00:05:47.650]
you’re like well clearly by this

[00:05:49.240]
navigational on the top I’m on this page

[00:05:52.419]
and I’d like to go to this page sleep at

[00:05:55.389]
placement is of those objects of is UI

[00:05:58.090]
design next we start to get into more of

[00:06:03.580]
UX design with usability design this has

[00:06:07.419]
to do with me maybe making an appt more

[00:06:09.669]
accessible to the people using it so if

[00:06:13.330]
an application is built for the elderly

[00:06:16.080]
that’s going to look very different and

[00:06:19.360]
feel very different for someone then

[00:06:23.380]
someone that is like four year old so

[00:06:26.470]
our requirements are different based on

[00:06:28.240]
the different user groups and that

[00:06:29.729]
design

[00:06:32.360]
next we have interaction design

[00:06:34.719]
usability design I kind of think of it

[00:06:37.340]
as a human side of things interaction

[00:06:40.610]
design is more of how the specific

[00:06:44.840]
object works so for example something

[00:06:47.419]
we’ve all experienced a button on a

[00:06:49.909]
website if you hover over that button

[00:06:51.949]
maybe it changes color if it moves a

[00:06:55.039]
little bit that’s to let you know that

[00:06:58.039]
that’s a button and that’s something to

[00:06:59.689]
click and kind of understand that it’s

[00:07:03.110]
going to take you somewhere and that

[00:07:05.090]
interaction design and so any

[00:07:06.889]
functionality that you want to give some

[00:07:09.050]
subtle clues we use interaction design

[00:07:12.319]
to achieve that

[00:07:16.710]
and lastly we have UX design UX design

[00:07:20.450]
can be said is all the things I’ve with

[00:07:23.750]
lifted prior but it also has to do with

[00:07:28.680]
the experience and the emotional time

[00:07:31.170]
how we feel about something so we’ve all

[00:07:35.010]
you know booked a flight at one point or

[00:07:37.200]
another in our lives and if you’re going

[00:07:41.730]
through the process of booking that

[00:07:42.930]
flight and everything upfront or are you

[00:07:46.560]
click a fly step 600 bucks and then you

[00:07:50.010]
go to the checkout and now it’s 700 you

[00:07:53.340]
if you’re going to be upset you’re like

[00:07:54.570]
what why does this cost as much I

[00:07:56.400]
thought it was this much that’s the

[00:07:58.020]
example of very bored UX design because

[00:08:01.380]
they’re not telling you everything you

[00:08:02.790]
need to know so that you feel feel happy

[00:08:05.670]
about their brand or about the process

[00:08:08.490]
in general so not enough shell is all

[00:08:12.720]
the different layers of UX and UI design

[00:08:17.070]
and how they all work together

[00:08:20.510]
so next I’m going to walk through the

[00:08:24.080]
different steps of implementing those

[00:08:28.520]
terms that I just mentioned and what

[00:08:31.130]
stages of the process they come into

[00:08:34.340]
play so here’s a loop you know process

[00:08:39.290]
visa aren’t I kind of group them each of

[00:08:43.580]
the black phrases are different slides I

[00:08:46.220]
just wanted to kind of give an outline

[00:08:48.920]
as to what’s going to come after what

[00:08:51.710]
and it’s definitely not set in stone

[00:08:54.020]
like you could easily have low Phi or

[00:08:57.080]
medium fidelity wireframes in your

[00:08:59.420]
project preparation or vice versa or you

[00:09:02.600]
could do you usability testing after

[00:09:05.360]
each sprint this is just more of an

[00:09:07.970]
outline to kind of get you prepared

[00:09:10.250]
what’s coming next so the first step in

[00:09:15.940]
a process is before your you started

[00:09:20.810]
your project you and maybe if you’re the

[00:09:23.420]
product owner or maybe it’s during the

[00:09:26.540]
project kickoff you need to define

[00:09:28.850]
several things first off are the

[00:09:32.960]
usergroups usergroups are who will be

[00:09:36.350]
using this application in mendax we kind

[00:09:39.140]
of already have something along these

[00:09:40.910]
lines and that’s the user roles and that

[00:09:43.100]
kind of dictates what are the different

[00:09:45.080]
security levels and who can see what

[00:09:49.090]
user groups touches on that but it also

[00:09:51.830]
kind of extends outward to who the end

[00:09:55.070]
user is so back to the you know

[00:09:58.250]
grandparents versus kids they really

[00:10:01.910]
define you know what they need to see

[00:10:04.040]
maybe someone older need something

[00:10:06.320]
bigger buttons so it’s easier to use

[00:10:10.280]
that make sure the text is large enough

[00:10:12.490]
whereas someone you know younger can

[00:10:15.830]
read much smaller text and would like to

[00:10:18.740]
see like flying animations and things

[00:10:20.360]
like that so those are two very

[00:10:22.550]
different applications based on who the

[00:10:25.040]
users are and if you’re from familiar

[00:10:28.670]
with more UX processes and stuff like

[00:10:31.400]
that outside of this you would know that

[00:10:34.339]
user groups in a way are similar to

[00:10:35.660]
personas which are like descriptions of

[00:10:39.639]
fake descriptions of like bios of people

[00:10:42.819]
that you use to better understand and

[00:10:46.309]
relate back to your user flows next you

[00:10:49.850]
have after you’ve defined the user

[00:10:51.470]
groups you need to define what those

[00:10:55.339]
users need to do and those are in the

[00:10:58.670]
form come in the form of user objectives

[00:11:00.949]
and that’s pretty much it you have to

[00:11:04.069]
come at what users do web things so for

[00:11:09.259]
if you have three different user groups

[00:11:10.970]
you might have some crossover maybe the

[00:11:14.589]
customer and the manager have to need to

[00:11:18.350]
see the same screen and do the same

[00:11:20.029]
objective but the admin only needs to

[00:11:22.519]
see maybe just the statistics of what

[00:11:26.149]
everybody is doing so that they don’t

[00:11:27.350]
need to see Oh steps so it’s a matter of

[00:11:29.749]
for each user group you need to define

[00:11:34.269]
each of their objectives what their

[00:11:36.439]
goals in the application are

[00:11:40.340]
you also have you want to define user

[00:11:43.650]
friction um I think user friction is

[00:11:46.830]
generally assumed in digital

[00:11:50.040]
applications as no friction easy as

[00:11:53.580]
possible um but I think with all things

[00:11:57.750]
design designs about considering what

[00:12:01.440]
you’re doing thinking about considering

[00:12:02.940]
every option and friction is one of

[00:12:05.430]
those so for example this image I’m sure

[00:12:08.070]
we’ve all been to ikea they make us walk

[00:12:10.470]
like a mile or so before we can purchase

[00:12:13.140]
anything and it’s a very successful

[00:12:16.830]
business model and it can kind of give

[00:12:20.100]
this a sense hey maybe i need that or

[00:12:21.900]
this and so it’s a very flies in the

[00:12:25.830]
face of what most people think you

[00:12:28.230]
should just present someone exactly what

[00:12:30.660]
they need so it’s just something to

[00:12:33.420]
consider along the way so after you’ve

[00:12:38.580]
defined your user groups your objectives

[00:12:41.970]
and how much friction how easy it is to

[00:12:45.300]
do accomplish a task you want to plot

[00:12:50.370]
out those big pieces of functionality

[00:12:53.250]
those objectives through user flows and

[00:12:57.020]
so first you want to match each object

[00:13:01.380]
user objective to a business goal so

[00:13:04.440]
then you can see what the value of this

[00:13:06.390]
application is and kind of helps

[00:13:07.890]
quantify that and then the user flow

[00:13:11.160]
process is one where you you can draw it

[00:13:14.160]
out or in the case of the image on the

[00:13:18.120]
right side my slide you can do it with

[00:13:21.240]
like Google drawing or something where

[00:13:23.520]
you can iterate up on it it can be

[00:13:27.260]
doesn’t require to have any expertise in

[00:13:30.180]
anything you can just learn and do some

[00:13:32.250]
there’s plenty of web applications out

[00:13:34.110]
there that can help you with this sort

[00:13:35.850]
of thing but you basically map out step

[00:13:39.330]
by step what you need to do in order to

[00:13:42.860]
achieve get to the objective point so

[00:13:46.320]
what this one is shopping cart so for

[00:13:49.320]
each step has you know different boxes

[00:13:52.080]
like a

[00:13:53.080]
act and then you have a diamond which

[00:13:55.180]
you know is for those of you with the

[00:13:58.170]
that are minix developers can kind of be

[00:14:02.380]
familiar as kind of a you know question

[00:14:04.720]
so yes or no and then if yes this is

[00:14:06.850]
what you do if no here’s what you do and

[00:14:08.680]
it’s just kind of an exercise so you

[00:14:11.290]
understand the scope of your

[00:14:13.930]
functionality and kind of starts to lay

[00:14:16.750]
the groundwork of the roadmap for your

[00:14:20.650]
application and one other thing user

[00:14:24.250]
flows is really like the first iteration

[00:14:26.170]
on defining these things and you can

[00:14:29.770]
iterate within the user flow until you

[00:14:33.550]
get to a point where you’re pretty

[00:14:34.420]
comfortable with and once you’re

[00:14:35.590]
comfortable with that you would progress

[00:14:37.480]
to creating a site map and ethics for

[00:14:42.460]
those of you using agile so type map is

[00:14:47.590]
basically taking all those user flows

[00:14:50.950]
and seeing what what pages they have in

[00:14:53.710]
common so instead of defining a site map

[00:14:55.480]
beforehand when you think you need this

[00:14:57.370]
and you thinking is that you really know

[00:14:58.840]
okay these different layers of

[00:15:01.270]
functionality I need a home page i need

[00:15:03.640]
a dashboard I need to check out and the

[00:15:06.580]
site map can show you how those

[00:15:07.840]
different pages are connected and then

[00:15:10.780]
as far as epics go you can from those

[00:15:13.900]
user flows you can kind of get some

[00:15:15.610]
large epics as well as if you know you

[00:15:18.130]
can break those down into two user flows

[00:15:20.230]
or user stories excuse me the next we

[00:15:24.370]
have wireframing there’s actually three

[00:15:27.250]
stages of wire framing and if I refer

[00:15:32.140]
back to the slide that have the loose

[00:15:34.780]
process usually low fidelity wireframing

[00:15:38.050]
you want to do before project it started

[00:15:40.660]
but maybe your project has a lot of

[00:15:42.660]
vacuum integration so you could easily

[00:15:45.850]
do this in an initial sprint but you

[00:15:50.500]
really should shouldn’t get into the

[00:15:53.050]
page layouts of your application until

[00:15:55.630]
you have some at least low fidelity

[00:15:58.450]
wireframes completed and this

[00:16:01.139]
basically takes is like the initial step

[00:16:04.799]
of you I so it’s basically mapping out

[00:16:09.959]
in a visual sense and kind of

[00:16:12.769]
prioritizing functionalities for each

[00:16:16.139]
for each page and this gives you a white

[00:16:19.559]
kind of sentence you can go through the

[00:16:21.569]
site map and basically wireframe out

[00:16:24.179]
each out each page and so you get a

[00:16:27.179]
sense that maybe maybe we don’t need a

[00:16:29.999]
navigation maybe we can easily just

[00:16:33.029]
there’s like one primary objective

[00:16:35.160]
openness button to button button to page

[00:16:37.199]
to page and so so this is like second

[00:16:42.029]
level of iteration on top of your user

[00:16:43.829]
flows so you get a local if maybe this

[00:16:46.019]
doesn’t quite work maybe this should be

[00:16:47.309]
more prominent and functionality wise

[00:16:48.779]
than something else next step you have

[00:16:52.139]
medium fidelity wireframing and so this

[00:16:55.769]
is one more stepped on line that you’re

[00:16:58.139]
iterating on your ideas you you had some

[00:17:01.290]
rough idea of what you want it to look

[00:17:03.419]
like in your low fidelity medium

[00:17:06.510]
fidelity is done typically in grayscale

[00:17:10.279]
and the reason for that is because we

[00:17:13.470]
all tend to get lost with color we like

[00:17:16.139]
color and we get attracted to it so

[00:17:18.269]
things lose priority when we put colors

[00:17:21.480]
on things so this is to help rein in the

[00:17:25.529]
focus on

[00:17:29.110]
where things are placed and their

[00:17:31.220]
priority within the application so you

[00:17:36.440]
can easily do this in you can make a

[00:17:39.770]
series of JPEGs and to a PDF or you’re

[00:17:43.790]
familiar with envision that kind of

[00:17:46.370]
takes that to the next level where you

[00:17:47.750]
can throw it up on envision and actually

[00:17:50.810]
pseudo click areas as if they were

[00:17:53.450]
actual buttons to get you to that so you

[00:17:55.490]
feel more of what the flow is going to

[00:17:57.620]
be like if it were an actual application

[00:18:01.450]
and lastly you have high fidelity

[00:18:04.029]
wireframes and this is more the full-on

[00:18:07.690]
polished design of an application and

[00:18:10.299]
how it will ultimately look like within

[00:18:13.769]
after you’ve developed it alert and so

[00:18:16.750]
this is where we can see like color

[00:18:18.580]
relations and making sure we’re hitting

[00:18:20.590]
like branding and typography and all

[00:18:24.700]
those elements that are make your brand

[00:18:28.240]
yours and we like to limit this to only

[00:18:35.380]
two to three or depending on a size your

[00:18:38.320]
application may be like core areas of

[00:18:41.110]
functionality that are gonna require a

[00:18:43.600]
little more finessing we only like to do

[00:18:50.450]
high-fidelity wiring on a limited number

[00:18:52.820]
of things because this can be very time

[00:18:54.650]
consuming to make if you have you know

[00:18:58.640]
40 screens to do this for every single

[00:19:02.690]
screen is a lot of time and honestly you

[00:19:08.810]
can take a look at the screen on the

[00:19:11.570]
right and see okay well I can see my

[00:19:14.770]
that h1 going to be this font and this

[00:19:19.310]
large headers for this section is going

[00:19:23.330]
to look like this and you can see

[00:19:24.530]
actually this size and this size are

[00:19:26.630]
actually the same size that’s just what

[00:19:28.070]
background it’s a little different so

[00:19:29.510]
you can already start to lay out what

[00:19:30.620]
the theming and styling required for an

[00:19:34.010]
application is from literally one screen

[00:19:36.610]
and if as you go through the process and

[00:19:40.460]
you get to a piece of functionality that

[00:19:42.350]
you didn’t wire frame out you can easily

[00:19:45.350]
go back and rework it if it’s not

[00:19:47.750]
looking the way you want it to within a

[00:19:49.970]
modeler the other reason why we limited

[00:19:53.180]
to the number screens is we want to keep

[00:19:55.670]
that feed going that the thing that

[00:19:58.160]
mimics offers is ability to develop so

[00:20:01.700]
quickly uf shouldn’t be holding that

[00:20:05.480]
back so we’ve done a lot of the

[00:20:09.800]
pre-planning of the application we are

[00:20:13.730]
starting to build the application and

[00:20:17.890]
create pages and layouts this theme

[00:20:23.990]
creation and silent is done

[00:20:27.190]
I would say you do this part of the u.s.

[00:20:30.250]
process the most so this is really the

[00:20:32.860]
implementation of taking in all that

[00:20:35.500]
hard work that we put into creating user

[00:20:38.560]
flows and really refining what the

[00:20:41.050]
application is doing and then

[00:20:43.980]
implementing it and making sure that the

[00:20:47.620]
content that’s going to be pulled in

[00:20:49.770]
looks good and and works well so this is

[00:20:54.310]
done you know the theme is created when

[00:20:57.010]
we did the high fidelity wireframes and

[00:20:59.340]
styling for our for an application is

[00:21:04.770]
both the CSS framework that we have and

[00:21:08.860]
using CSS but you can’t just use CSFs

[00:21:12.880]
you have to also work in the min decks

[00:21:15.820]
page layouts and use CSS classes to call

[00:21:22.240]
the CSS framework so you have to be

[00:21:23.830]
working in tandem so if you’re doing the

[00:21:28.060]
development or someone on your team soon

[00:21:29.470]
development on the front end side of

[00:21:33.100]
things you have to be both in the CSS as

[00:21:35.680]
well as within the page layouts

[00:21:38.260]
themselves

[00:21:41.040]
so as we go through the Sprint’s of our

[00:21:44.340]
agile process we want to make sure that

[00:21:48.140]
design is being kept abreast of every

[00:21:53.640]
step of the way so if Miss it away

[00:21:58.170]
through the project someone says hey we

[00:22:02.070]
we actually need this functionality or

[00:22:04.400]
something else or something change where

[00:22:06.330]
this is not working the way we want it

[00:22:08.550]
to when you need to change how it works

[00:22:10.100]
design needs to be kept in line with

[00:22:13.050]
everyone else so we have to make sure

[00:22:15.780]
that design and user experience is

[00:22:19.590]
always being of help throughout the

[00:22:20.910]
process of creating the application and

[00:22:23.460]
so there’s a design QA that’s held in

[00:22:25.950]
conjunction with every sprint review and

[00:22:29.090]
then you can also do some making sure

[00:22:33.300]
your CSS code is clean and easy to use

[00:22:35.790]
you can also during the design QA

[00:22:41.110]
you know check for consistency among

[00:22:44.200]
maybe icons or page layouts being used

[00:22:48.970]
components used just so that you know if

[00:22:51.130]
there’s a couple people different people

[00:22:52.630]
develop in and they’re touching the page

[00:22:55.780]
layouts making sure everyone’s on the

[00:22:57.880]
same track and this this is also where

[00:23:00.429]
you would create new user stories from

[00:23:03.070]
next front in relation to you x nu I

[00:23:08.730]
so last step along our journey is

[00:23:12.230]
usability testing and usability testing

[00:23:16.890]
is should be done I mean you can do it

[00:23:20.250]
as as frequently as you like us between

[00:23:23.780]
you can do it internally between sprints

[00:23:27.150]
or but we really recommend also doing it

[00:23:30.470]
between a police’s because usability is

[00:23:35.970]
a way to check to see if the designs and

[00:23:39.059]
user flows that we’ve mapped out truly

[00:23:42.840]
work for our users so we would get

[00:23:48.509]
well who are actually going to use the

[00:23:49.589]
application so in the case of a lot of

[00:23:52.679]
mimics applications we’re in a unique

[00:23:54.029]
situation and that instead of having to

[00:23:57.419]
go a random selection of people a lot

[00:24:00.479]
sometimes it’s going to be your

[00:24:02.639]
employees that are actually using these

[00:24:04.259]
tools so just have them try the

[00:24:07.559]
application and it’s important heard

[00:24:12.209]
some stories where people will actually

[00:24:15.380]
show their their prospective users how

[00:24:20.360]
to use the tool and then be like okay go

[00:24:23.030]
ahead and then gather that oh this

[00:24:24.770]
should be this and this should be that

[00:24:26.000]
you don’t want to do that you want to

[00:24:28.400]
make it as if someone has never seen

[00:24:32.420]
this before and give them a task so I

[00:24:35.060]
need you to purchase this item and then

[00:24:38.750]
record what they’re doing so then you

[00:24:41.900]
can see how long it takes them you can

[00:24:44.210]
get from first step to the second step

[00:24:46.490]
and find these different items and

[00:24:47.990]
actually asked them to maybe talk to

[00:24:51.410]
what they’re doing as they do it so you

[00:24:53.390]
get a sense for their thought process so

[00:24:56.480]
this is a really useful so from that all

[00:24:58.670]
that data can be collected and then you

[00:25:00.830]
can turn that information into new user

[00:25:03.650]
stories and figure out new ways to to

[00:25:06.710]
better serve who these applications are

[00:25:09.350]
actually for four people so that is

[00:25:15.250]
ability UX in a nutshell and how what

[00:25:22.310]
the different lingo czar and terminology

[00:25:24.980]
that goes with it as well as broad

[00:25:27.380]
overview of a step two step process of

[00:25:29.920]
of UX and vindax great thanks Russell

[00:25:34.720]
that was great really helpful

[00:25:36.770]
presentation as I mentioned we left some

[00:25:39.500]
time for QA so I’m go ahead and just

[00:25:43.280]
type in any questions that you have I

[00:25:45.470]
wanted to point out this note we have

[00:25:47.600]
here on this final slide especially for

[00:25:50.840]
our friends who are joining today from

[00:25:52.160]
the Netherlands our Rotterdam office is

[00:25:54.860]
working with a partner online Department

[00:25:56.360]
on a meetup event on this topic of UX

[00:25:59.960]
and that’s going to be held on March

[00:26:01.640]
23rd so we’ll leave this flight up if

[00:26:04.250]
you want the URL or you can find more

[00:26:06.320]
information on our developer site which

[00:26:08.390]
is developer diamond XCOM and Russell

[00:26:11.960]
and I have invited our colleague Adam

[00:26:13.520]
fothergill to join us for this Q&A

[00:26:16.730]
portion of the webinar Adam thanks for

[00:26:18.830]
being here Adams Adams a consultant on

[00:26:22.430]
our professional services team so we we

[00:26:24.770]
know he’ll be helpful in fielding some

[00:26:26.450]
of your questions here

[00:26:27.630]
so let’s go ahead and get started

[00:26:29.760]
wrestle I’ll hand it back to you you can

[00:26:32.490]
go through these questions all right so

[00:26:36.090]
I have a question unit says how do i

[00:26:38.130]
integrate UX in a project that is

[00:26:40.860]
already in development or about to be

[00:26:42.990]
released so I would suggest using

[00:26:47.880]
usability testing to achieve that so

[00:26:50.610]
that way you can see how people actually

[00:26:52.500]
respond to the application and because

[00:26:55.140]
we may have hunches as to why something

[00:26:57.540]
that’s not working well but if we can

[00:26:59.490]
actually show it to the people that

[00:27:00.960]
actually going to be using the

[00:27:05.220]
application we should do that and then

[00:27:07.200]
from there we can gather what’s not

[00:27:09.780]
working well and go back to creating

[00:27:12.660]
user flows to target that functionality

[00:27:15.390]
that we want to rework and then take

[00:27:18.090]
that and do another sprint or two to

[00:27:21.560]
work that into your project as it stands

[00:27:30.940]
you

[00:27:35.389]
see a question will we make the slides

[00:27:37.339]
available yes the slides will be

[00:27:38.989]
available after the webinar will also be

[00:27:41.089]
a PDF that touches on more the things I

[00:27:44.359]
spoke about that may not be on the

[00:27:46.429]
slides themselves

[00:27:52.370]
you

[00:27:57.010]
so I think one about tool in mimics do

[00:28:02.929]
you still use do paper prototyping if

[00:28:06.559]
yes can you give an example how it to

[00:28:11.630]
use it to be effective so for example

[00:28:15.620]
the user flows that I spoke on our

[00:28:21.400]
something where I find it to be really

[00:28:23.750]
effective if you just wipe board that

[00:28:25.580]
you actually for the user flows

[00:28:30.770]
you actually probably want to do that in

[00:28:32.780]
collaboration with the product owner as

[00:28:34.940]
well someone so someone from a business

[00:28:37.340]
side as well as someone from the

[00:28:39.080]
development side so you should have all

[00:28:42.130]
areas on of expertise all together so

[00:28:46.100]
that the business goals can be reached

[00:28:48.230]
and met and feel like they’ve been

[00:28:50.540]
satisfied satisfied as well as

[00:28:52.240]
development and what they need and then

[00:28:55.040]
has the UX expert you can bring to the

[00:28:58.130]
table what’s user needs and so I would

[00:29:01.730]
recommend actually doing that on a

[00:29:03.890]
whiteboard or on a piece of paper kind

[00:29:06.080]
of mapping out what you see how you

[00:29:07.550]
think step by step is and that’s really

[00:29:10.610]
a first iteration of prototyping because

[00:29:12.770]
you’re figuring out functionality and

[00:29:14.570]
seeing how it work and then even lo-fi

[00:29:18.050]
wireframes you can do it by hand I find

[00:29:21.380]
that’s a lot quicker and effective than

[00:29:25.580]
trying to like go into Photoshop or

[00:29:28.430]
something and in doing that that takes a

[00:29:30.950]
lot more time than just doing my paper

[00:29:32.270]
on it my favorite

[00:29:38.790]
you

[00:29:42.350]
you

[00:29:46.909]
you

[00:29:49.570]
okay so there’s a question does mimics

[00:29:51.910]
have support for SAS or other CSF

[00:29:54.520]
scripting tool actually the UX there’s a

[00:30:00.820]
framework we use the UI framework which

[00:30:03.400]
you can find under if you search if you

[00:30:08.640]
look up you x-men dexcom we have a

[00:30:13.180]
framework argument place that is based

[00:30:14.890]
on bootstrap as a baseline but then have

[00:30:19.110]
blown out all of our various widgets and

[00:30:22.900]
all their styling hooks and all that

[00:30:25.690]
stuff is all compiled through SF it’s

[00:30:28.750]
based on its on saph um and so you can

[00:30:32.440]
actually if you go there you can play

[00:30:36.010]
with these different themes we already

[00:30:37.240]
have we also have a tool where you can

[00:30:39.660]
select you know the primary color the

[00:30:44.730]
maybe the header color the bee nail

[00:30:48.310]
color and all these things and switch

[00:30:49.930]
around me these colors and it will

[00:30:52.510]
automatically create a theme for you so

[00:30:57.400]
but violet you know you don’t just stop

[00:31:00.130]
there you can easily download that or

[00:31:02.290]
download one of the scene aims and open

[00:31:05.560]
it up and add your own partials and do

[00:31:09.460]
whatever you need to do that you want to

[00:31:11.320]
integrate for with sass so someone else

[00:31:15.940]
you mentioned

[00:31:19.710]
giffey icon I’m not familiar with gippy

[00:31:23.950]
icon but I as you know I some surgeon

[00:31:27.250]
five-run to where you use um glyph akong

[00:31:32.350]
as our icon but you can use any kind of

[00:31:36.790]
icon fonts pretty easily in fruits ass

[00:31:42.630]
so you basically need to have if you are

[00:31:46.210]
familiar with like awesome icons they

[00:31:48.250]
have a whole CSS you can kind of use

[00:31:50.200]
that as a baseline template and you

[00:31:54.230]
oh yeah so if you want to use a pro

[00:31:59.780]
version of lift cons you have to get the

[00:32:01.220]
font file you have to get the CSS file

[00:32:03.020]
that makes the Declaration of each class

[00:32:06.140]
name and then call it through as a class

[00:32:10.790]
through through the modeler

[00:32:22.230]
so Adam ha is here to help me out with

[00:32:24.960]
from second question there’s less yeah

[00:32:26.570]
so we have one question on adding

[00:32:30.570]
JavaScript so you can use odd there’s a

[00:32:34.380]
handful of files webinars that we’ve

[00:32:36.780]
published before on creating your own

[00:32:39.059]
custom widgets and those are all written

[00:32:40.919]
in JavaScript so if you want to add any

[00:32:43.980]
kind of JavaScript files there you can

[00:32:45.980]
reference those webinars posts are up on

[00:32:48.570]
the developer site as well well thank

[00:32:52.320]
you as far as the there’s a question

[00:32:56.580]
about is there documentation online

[00:32:58.169]
about mimics a framework based on

[00:33:00.090]
bootstrap and you can find that at ux

[00:33:04.940]
min dicks calm and that has everything

[00:33:08.640]
you’ll need to know about all that stuff

[00:33:19.380]
you

[00:33:23.650]
you

[00:33:33.520]
okay we got it question here about can’t

[00:33:36.920]
I just dial my application in line

[00:33:39.290]
within the modeler why should i use a

[00:33:42.380]
theme and classes it’s a very good

[00:33:45.260]
question um that so in line for those

[00:33:51.890]
who you are super savvy on CSS

[00:33:57.560]
is basically it will add the class or

[00:34:02.120]
the styling directly on the HTML tag and

[00:34:06.640]
it seems like when you first start an

[00:34:09.350]
application that’s that’s super easy I

[00:34:11.840]
just throw it in there but what if you

[00:34:14.120]
have a header that you want to look a

[00:34:16.220]
certain way but that header is in 30

[00:34:19.370]
different places do you really want to

[00:34:22.870]
put that in 30 please replaces with the

[00:34:25.730]
class you can just take those styles put

[00:34:27.560]
it in a class and put the class on there

[00:34:29.900]
and then if later on a hey your boss

[00:34:32.270]
says no that’s too bold we need to make

[00:34:34.760]
make it and make it green all you have

[00:34:37.940]
to do is go into your CSS and change

[00:34:40.780]
that color of that header to green and

[00:34:44.180]
it happens all throughout and that’s

[00:34:46.130]
really power of CSS CSS stands for

[00:34:48.920]
cascading style sheets and it will not

[00:34:52.130]
affect what it would do a cascade

[00:34:53.450]
throughout all the different places

[00:34:55.310]
that’s implemented

[00:35:05.050]
you

[00:35:18.099]
you

[00:35:19.590]
so there’s a question here about do you

[00:35:21.960]
think index has a frank as a framework

[00:35:24.800]
impacts how you do user testing EG the

[00:35:28.620]
framework has already undergone testing

[00:35:31.430]
so you don’t have to test as much as if

[00:35:34.830]
it or something built from the ground up

[00:35:37.380]
i would disagree with that just because

[00:35:42.540]
you may have elements

[00:35:47.280]
the UI framework kind of has each

[00:35:50.520]
element designed by itself how if you

[00:35:57.390]
have three different widgets together

[00:36:00.020]
who you know you’ve got to make sure

[00:36:02.670]
that their relationship makes sense

[00:36:04.950]
where their place and all that sort of

[00:36:07.530]
things so you still have to do usability

[00:36:09.840]
testing in regards to that and i would

[00:36:14.430]
add on to that there are definitely

[00:36:16.230]
things that the motte the platform takes

[00:36:18.930]
care of for you but when you’re

[00:36:21.660]
switching versions or if you’ve changed

[00:36:24.000]
any kind of piece of micro flow or logic

[00:36:26.250]
even outside of the usability you always

[00:36:31.080]
want to go back and double-check that

[00:36:32.250]
because if you’ve upgraded a widget to a

[00:36:34.260]
different version it may not be

[00:36:35.520]
compatible with something else that

[00:36:36.990]
you’ve got going on so it definitely

[00:36:40.350]
lightens the technical testing that you

[00:36:42.930]
need to do but from a user acceptance

[00:36:44.850]
kind of workflow testing I definitely

[00:36:47.720]
advise doing complete testing there

[00:36:54.170]
so I think that’s we’re going to wrap up

[00:36:57.300]
here and I’m gonna ask back over and

[00:36:58.920]
listen great um Russell thank you for an

[00:37:01.500]
awesome presentation today and had them

[00:37:03.480]
thanks for joining us for the Q&A

[00:37:05.190]
portion as I mentioned this has been

[00:37:08.220]
recorded to will send you a link to the

[00:37:09.840]
recording and we’re also going to send

[00:37:11.490]
you a link to the PDF that Russell

[00:37:14.640]
mentioned which has some more detail

[00:37:16.110]
thanks to everyone for joining us and

[00:37:18.270]
have a great weekend

UX Awareness and Process

UX Awareness and Process

Transcript