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