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