x

UI/UX DESIGN

SWDUX301 DESIGN UI/UX

Competence

RQF 3 Lear
Level: ning
100
Credit 10
s:
Secto ICT & MULTIMEDIA
r:
Trade SOFTWARE DEVELOPMENT
:
Module Type: Specific
Curriculum: ICTSWD3001- TVET Certificate III in Software Development
Copyright: © Rwanda TVET Board, 2022

Issue Date: June 2022

1200
Purpose This module describes the skills, knowledge and attitude required to
statemen design UI/UX for software and web applications.
t At the end of this module, the students will be able to Analyse User
Experience through defining User journey the trainees will be able to
design software Mockup.
Delivery Training delivery 100 Assessment Total
modality
% 100%
Theoretical content 20% 30%
Practical work:
Group 30% Formative
project 50%
assessment 70%
and
80%
prese
Individual 50%
project
/
Summative Assessment 50%

Elements of Competency and Performance

Criteria
Elements of Performance criteria
competence

1. Analyze user 1.1 UX Research is properly performed

experience based on user requirement and project
goals
1.2 Brand identity is properly analyzed
based on project branding assets

1.3 Tasks are properly defined based

on research
findings
1.4 End user pain points are
appropriately identified based on
research findings
2. Define the user 2.1 User story is properly defined based
on user
requirements
2.2 User personas are properly defined
based on user stories
 2.3 User journey is properly mapped
based on user stories

2.4 UX brief is properly prepared based

research
findings
3.Design Mockup 3.1 Design tools are properly identified
based on project requirement

3.2 Wireframe is concisely designed

based on user stories

3.3 Mockup is properly designed in line

with client
needs, project requirements, user
needs & brand
3.4 Prototype is properly presented
based on designed mockup

Course content
Learning outcomes At the end of the module the learner will
be
able to:

1. Analyse User Experience

2. Define the User
Learning outcome 1: Analyse User 3. Design
Learning Mockup
hours: 30
Experience
Indicative content

● Definition of Key Concepts

ü User experience
ü User experience research
ü Research Findings
● Description of UX Research
ü UX Research Methods and Approaches
ü Benefits of UX Research
 ü UX Researcher role and Responsibilities
ü Types of UX Data

Quantitative UX Data

Qualitative UX Data
ü Steps of UX Analysis

Identification of user issues

Organization of UX data

Looking for recurring issues

Prioritization of fixes

Sharing of findings and

recommendations

Building and testing new features

● Analysis of Brand Identity
ü Definition

Brand

Brand Identity
ü Identification of brand design principles
ü Identification of Brand Personas
ü Identification of Brand Competition
● Definition of Tasks
ü Understand product specifications and user psychology
ü Interpret data and qualitative feedback
ü Create user stories, personas, and storyboards
ü Define the right interaction model and evaluate its
success
ü Develop wireframes and prototypes around customer
needs
ü Find creative ways to solve UX problems (e.g. usability,
findability)
ü Work with UI designers to implement attractive designs
ü Communicate design ideas and prototypes to developers
 ü Levels of end user pain points

Interaction-level pain point

Journey-level pain point

Relationship-level pain point

Resources required for the learning outcome

Equipment Computer
Projector
White-Board

Materials Markers
Internet
Papers
Pencils
Pens

Tools Figma
Trello
Adobe XD

Facilitation Demonstration and simulation

techniques Individual and group work
Trainer guided
Group discussion
Formative Written assessment
assessment Presentation
methods /(CAT) Product assessment

Learning outcome 2: Define the user Learning hours: 30

Indicative content
● Definition of key terms
ü User story
ü User personas
ü User journey
ü UX brief (UX project brief)
● Creation of user story
ü Characteristics of user story
ü Benefits of user stories
ü Create user story
● Identification of user personas
ü Importance of user personas
ü Characteristics of user personas
ü User personas in design process

Understand (Empathize, Define)

Explore (Ideate, Prototype)

Materialize (Test, Implement)

ü Steps of creating user personas
● Creation of user journey
ü Types of user journey map

UX journey map

Sales journey map

Customer experience journey map

ü Elements of a user journey map

Persona

Scenario

Stages of the journey

User actions

User emotions and thoughts

 Opportunities

Internal ownership
ü Create user journey map
● Perform UX Research
Resources required for the indicative content

Equipment Computer
Projector
White-Board

Materials Markers
Internet
Papers
Pens

Tools Figma
Trello
Adobe XD

Facilitation Demonstration and simulation

techniques Individual and group work
Practical exercise
Trainer guided
Group discussion
Formative Written assessment
assessment Performance assessment
methods /(CAT) Product based assessment
Learning outcome 3: Design Mock-up Learning hours: 40

Indicative content

● Description of Key Concepts

ü User interface
ü User experience
ü Importance of UX/UI design the software development
ü Important principles of user experience design

Clarity

Consistency

User control

Comfort

Ease of Use

Accessibility
ü UX design process key phases
ü Wireframe
ü Mockup
ü Prototype
ü Distinction from wireframe, mockup and prototype
ü Information Architecture
ü Design thinking process
ü User-centered design
ü Usability
ü 3-Clicks rule
ü Feedback

● Use of Figma prototyping tool

ü Setup Figma
 ü Figma interface

Canvas

Frames

Menu

Layers

Design Panel

Pages

Inspect Panel

Options

Prototype

Assets
ü Figma Mirror
● Sketch wireframe
● Sketch mockup
ü Setting up files

Creating file

Create and edit frames

Creating pages
ü Management of layers
ü Application of contents in design

adding predefined shapes

Add custom shapes

Pen tool

Add Images

Masking

Effects and blending

Strokes
 Management of layout (Auto-layout, Grid, Row,
Columns)

Application of element alignments

ü Creation of color palettes
ü Creation of components

Reusable input components

Reusable checkbox and radios

Reusable button components

Content cards
ü Application of mockup design

Content sections

Navigation bar

Sidebar menu

Dropdown menu

Design simple online shopping platform with Items listing, cart,

checkout

Design authentication pages

Design a B2B platform

ü Test design using Figma Mirror
● Presentation of Prototype
ü Starting prototyping
ü Adding interactivity to the design
ü Present Prototype
Resources required for the indicative content

Equipment Computer
Projector
White-Board

Materials Markers
 Internet
Papers
Pens

Tools Figma
Trello
Adobe XD

Facilitation Demonstration and simulation

techniques Individual and group work
Practical exercise
Trainer guided
Group discussion
Formative Written assessment
assessment Performance assessment
methods /(CAT) Project based assessment

Integrated/Summative assessment (For specific

module)
Integrated situation

BE-WISE is an NGO with the mission of promoting education in Rwanda especially

in TVET
schools, their office is located in GASABO District and they have organized a
competition
of the innovative project for students from different TVET schools. But they have a
problem
of collecting the student’s applications from every school. They suggest having an
MIS that
will facilitate the students to apply and find more information about the
competition.

So, they want to hire a user experience (UX) designer that will create a mockup
and then
present the prototype for that MIS. As a UX designer, you are requested to create
a mockup
decisions on the student applications in order to notify the accepted and rejected
projects.
The students will be able to know whether s/he has been selected or not.

The system should be easy to use and adhere consistency in designs.

This work is supposed to be done in 8 hours.

Resources
Tools Figma

Trello

Adobe XD

Equipment Computer

Materials/ Consumables Papers

Pens

Pencils

Assessment Observation Marks

Assessable criteria allocation
Indicator
outcomes (Based on Yes No
performance
Analyze Brand Tools are 5
user identity is selected
experience properly
analyzed Brand 5
(15%) based on identity is
project defined
branding
End user User pain 5
pain points points are
are identified
appropriate
Define the ly User storyUser
is story 3
user defineproperly
based is
d requirements
user defined
(30%) User story 6
is
 Brand 5
competitions
are
User personasBrand
are 5
properly defined
personas are
identified
User journey User journey 6
is is
properly UX brief is 5
mapped prepared
based on
Design Design tools Tools are 2
Mockup are selected
properly
(55%) identified
Wirefram 5
e
concisely designed
Wireframe is
based on user
stories designed
Mockup is Figma 3
properly prototyping
designed in tool is used
line with Files are set 5
client needs,
Layers are 5
project
managed
requirement
s, user Application 5
needs & design are
brand applied
identity
Components 5
are created

Mockup 5
design is
applied
Test design 5
using Figma
Mirror is
done
Prototype is Prototype is 5
properly created
presented
 designed Interactivity 5
mockup to the
design is
added
Prototype 5
design
ipresented
Total marks 100
Percentage Weightage 100%
Minimum Passing line % (Aggregate): 70%

References:

1. Academy, F. (2022). Introduction to User Interface Design: 6 Important

Principles. Retrieved from Flux Academy - Learn How To Become a
Web Designer: https://www.flux-academy.com/blog/introduction-to-
user-interface-design-6-important-principles

2. Adobe. (2019). What Are User Personas and Why Are They Important?: Adobe
XD Ideas. Retrieved from Ideas:
https://xd.adobe.com/ideas/process/user-research/putting-personas-
to-work-in-ux-design/

3. Adobe. (2020). Information Architecture Guide for UX Architects & Designers:

Adobe XD Ideas. Retrieved from xd.adobe.com:
https://xd.adobe.com/ideas/process/information-architecture/informa
tion-ux-architect/

4. adobe.com. (2020). UX Design Process: Everything You Need to Know: Adobe

XD Ideas. Retrieved from Ideas:
https://xd.adobe.com/ideas/guides/ux-design-process-steps/

5. Camps, C. E. (2021, Sept 9). 12 UX Designer Tools You Should Be Using

(From
Beginner to Pro). Retrieved from bootcamp.cvn.columbia.edu:
https://bootcamp.cvn.columbia.edu/blog/ux-designer-tools/

6. CareerFoundry. (2021). A Beginner's Guide To Information Architecture in UX

(2022). Retrieved from careerfoundry.com:
https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-
information-architecture/

7. CareerFoundry. (2021). UX Designer Job Descriptions: What Do They Really

Mean? Retrieved from CareerFoundry:
https://careerfoundry.com/en/blog/ux-design/ux-designer-job-
descriptions-guide/
8. CommBox. (2021). The Complete Guide to Customer Pain Points.
Retrieved
from CommBox: https://www.commbox.io/the-complete-guide-to-
customer-pain-points/#:~:text=Put%20simply%2C%20customer
%20pain%20points,experience%20along%20their%20customer
%20journey

9. Coursera. (2022). Creating User Journey Maps: A Guide. Retrieved from

Coursera: https://www.coursera.org/articles/creating-user-journey-maps-a-
guide

10. Design, K. U. (2022, May 25). 10 Components of a Solid UX Design

Brief.
Retrieved from www.koruux.com:
https://www.koruux.com/blog/components-solid-ux-design-brief/

11. Design, P. (2016, May 22). Brand Identity Design: Key Principles for
Achieving
Winning Solutions. Retrieved from www.personadesign.ie:
https://www.personadesign.ie/brand-identity-design-key-principles-for-
achieving-winning-solutions/

12. Designlab. (2022). Figma 101: Introduction to Figma. Retrieved from

designlab.com: https://designlab.com/figma-101-course/introduction-
to-figma/

13. Figma. (2022). Figma Help Center. Retrieved from figma.com:

https://help.figma.com/hc/en-us

14. Group, N. N. (2022, June). Three Levels of Pain Points in Customer

Experience.
Retrieved from Nielsen Norman Group:
https://www.nngroup.com/articles/pain-points/

15. hotjar.com. (2022). UX Analysis Guide: A Strategy & Framework for

Improving
UX. Retrieved from UX Analysis Guide: A Strategy & Framework for
Improving UX: https://www.hotjar.com/ux-design/analysis/

16. Investopedia. (2022, April 13). What Is Brand Identity? Retrieved from
Investopedia: https://www.investopedia.com/terms/b/brand-
identity.asp

17. KeenEthics. (2021, March). What Is a Mockup and Why Do We Need It.
Retrieved from keenethics.com:
https://keenethics.com/blog/1521631041972-the-importance-of-
mockups
 18. lucidchart.com. (2020, February 27). Wireframes vs mockups:
Determining the
right level of fidelity for your project. Retrieved from Wireframes vs
Mockups Explained | Lucidchart Blog:
https://www.lucidchart.com/blog/wireframes-vs-mockups

19. Mopinion. (2022, April 11). Here's why UX Designers Need User Feedback...
Retrieved from mopinion.com: https://mopinion.com/why-ux-
designers-need-user-feedback/
 20. moqups.com. (2022). Design of Mockups - Moqups App. Retrieved from
Design
of Mockups - Moqups App: https://app.moqups.com/

21. Nomensa. (2022). How to write a great UX brief. Retrieved from

Nomensa:
https://www.nomensa.com/blog/how-write-great-ux-brief

22. Online, R. (2022). User Experience Design. Retrieved from

online.rmit.edu.au:
https://online.rmit.edu.au/course/sc-user-experience-design-
dtr105

23. publicadagency.com. (n.d.). How to Analyze Brand Identity: 3 Useful Real-

World
Tips. Retrieved from Public Advertising Agency:
https://publicadagency.com/how-to-analyze-brand-identity/

24. Roids, D. O. (2020). What is a User Journey Map in Software

Development?
Retrieved from Droids On Roids:
https://www.thedroidsonroids.com/blog/what-is-a-user-journey-map-in-
software-development

25. SearchSoftwareQuality. (2020). What is a User Story? Definition from

WhatIs.com. Retrieved from SearchSoftwareQuality:
https://www.techtarget.com/searchsoftwarequality/definition/use
r-story

26. seobility.net. (2022). What is a Mockup and what is it used for? - Seobility
Wiki.
Retrieved from Mockup: https://www.seobility.net/en/wiki/Mockup

27. Shopify. (2018). Brand system. In Uber, Brand system Quick Guide (pp.
1-10).
Retrieved from
https://cdn.shopify.com/s/files/1/0565/3423/7349/files/Uber_2018.pdf?
v=1630651570

28. Simplicable. (2022). 10 Types of Mockup. Retrieved from

simplicable.com:
https://simplicable.com/new/mockup

29. techtarget.com. (2021, May 03). What is UX Research and What Does
a UX
Researcher Do? Retrieved from SearchSoftwareQuality:
https://www.techtarget.com/searchsoftwarequality/definition/UX-
research
30. workable.com. (2022). UX Designer job description. Retrieved from
Recruiting
Resources: How to Recruit and Hire Better:
https://resources.workable.com/ux-designer-job-description

31. Zapier. (2022). The 6 best wireframe tools in 2022. Retrieved from
zapier.com:
https://zapier.com/blog/best-wireframe-tools/