1
What we’ll discuss today
2
● Intro
● UX & UI in RH
● UX & UI in Notino
● Course requirements
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
● Communication channels
● Teamwork - final project
● Why we teach
● What is UX
Ahoj!
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
3
Karel Hala
Frontend Developer
Working on Cloud based projects.
Lego enthusiastic.
khala@redhat.com
Mária Šviriková
Interaction designer
Working on cloud based open
source projects
msviriko@redhat.com
378881@muni.cz
Lenka Sakálošová
UX researcher
Researching user experience in
ecommerce at NOTINO- web,
mobile app, cosmetics
lenka.sakalosova@notino.com
4
Introduce yourself
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
5
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Notino
● Jeden z najväčších internetových predajcov
kozmetiky a parfumov v Európe (28 zemí)
● Česká firma z Brna
● Zal. 2004 (povodne parfums.cz)
● > 3000 zamestnancov, z toho >200 na IT, + 50 na
Web & Innovation
● UX team
6
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Red Hat
● Open source technologies for enterprise
● Headquarters in Raleigh North Carolina
● Acquired by IBM in 2018
● Operating as a separate business unit
● Globally employs 13400 people
● Red Hat Czech in Brno - 1400 people
● Open leadership
7
Interaction design
Visual design
User research
UX content design
Front-end development
Red Hat User Experience
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
13
Red Hat offices
8
Countries
141
UXDers
8
Multiple web UIs - and multiple teams
Multiple frameworks
Custom component library - Patternfly
Red Hat UI
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
9
BEST CLASS EVER
Intuitive development and user experience
10
Cíle předmětu
Cíl tohoto předmětu je představení User Experience (UX) Designu a Front-end
technologií s hands-on experience na projektu s reálnými daty. Tento předmět
představí základy user-centered designu a provede studenty praktickými
technikami, kde pochopíme potřeby našeho konečného uživatele.
Tento předmět je určen pro začátečníky, kteří se chtějí dozvědět více o “user
experience” nebo “user interface”. Student pochopí, proč je důležité přemýšlet o
potřebách uživatele a pak se naučí daný intuitivní postup aplikovat na svém
projektu. Budeme tvořit prototypy a potom na jejich základě implementovat
projekt s využitím aktuálních technologií. Na projektu se bude průběžně iterovat
a výstupy se budou testovat na uživatelích. Studenti budou provedeni správným
postupem k vytvoření user-friendly uživatelského rozhraní.
Osnova
11
1. Introduction
2. Intro to UX and design thinking
3. UX research 1: User Needs
4. Wireframing and prototyping 1
5. Javascript practices - old and new
6. Wireframing and prototyping 2
7. React + Redux
8. UX feedback and Iterations (present your designs)
9. Deployment, Charting and JWT
10. UX research 2: User testing
11. Micro Frontend
12. App testing
13. Presentations and Critique
*subject to flexible change
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Communication tools
12
➔ Gitlab
https://gitlab.fi.muni.cz/qhala/dashboard-PV278
➔ Slack (preferred)
fi-muni-rejnoci.slack.com
When you log in - say hi to #general
➔ Email
khala@redhat.com
msviriko@redhat.com
lenka.sakalosova@notino.com
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
What you should have in your skillset after this class
13
● UX tools such as research, prototyping & wireframing
● Ability to conduct your own user testing
● Processes to create better user experience
● Know how to write React app and components
● Data flows in Javascript
● Basic understanding of build tools
● User testing how it works
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Final project - UX
14
UX part (50%)
● Define a problem
● Personas, Storyboard
● Sketches and prototypes
● Usability testing feedback captured and incorporated
● Creativity
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Final project - UI
15
UI part (50%)
● Landing page
● Dashboard
● Chart using some chart library
● Table - static
● Table - interactive
● Entity detail
● User detail
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Final project variables
16
Meteorological information of czech republic past 40 years
● Temperature - average, minimum, maximum
● Sun - precipitation, snow, sunshine
● Air - wind speed, air pressure, air mois
Choose interesting and relevant date or date range
● Eg: date of birth (how much sunshine was in history at this
date), temperature change in your life or someone famous
Data are not 100% clean and up to date
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Teamwork is the dreamwork
17
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
CONFIDENTIAL designator
V0000000
What is user experience?
18
The process of creating end to end
experience between user and a
product/service/system
UX Design
The difference between UX and UI
20
21
Source: https://www.cojeuxui.cz/
Like a human body
UI = lookCode = skeleton UX = organs
22
23
24
25
26
27