Learn Icons @evansakanno

UX Design
Course_
Simple actionable lessons on
designing products people love.
Contents @evansakanno

Contents:
UX Fundamentals
UX Design Process
Workflow
Vzy Case Study








 UX Fundamentals @evansakanno

UX Fundamentals
✓ UX What & Why
✓ UX UI
✓ Design thinking
✓ Usability>Aesthetics
≠
:

 UX What & Why @evansakanno

UX is a summary
of emotions from
interacting with a
product / service.
:
 UX What & Why @evansakanno

UX Bananas are
easier to peel and
eat compared to
pineapples
:
:


 UX What & Why @evansakanno

UX People prefer dark

mode on devices
because it reduces
eye strain when
reading
:
:
 UX What & Why @evansakanno

Good UX lowers customer

acquisition & retention
costs, while increasing
productivity & revenue
:
 UX UI @evansakanno

UI how it looks
UX how it works
✓ UI is part of UX

✓ UX applies to digital & physical products

✓ UI is specific to digital products

✓ UX design is planning the user journey

✓ UI design is creating the interfaces

✓ UI conveys the UX
≠
:
:

 UX UI @evansakanno

UX first
UI next
✓ Start with research, then wireframes and prototypes

✓ Research and talk to the users to better understand the problem

✓ Great UI can’t save a product that’s confusing to navigate

✓ Use wireframes to get quick feedback before designing

≠



 UX UI @evansakanno

UX designer
responsibilities
✓ User and competitor research

✓ Interview users to understand their needs

✓ Create product flow, wireframes and prototypes

✓ Coordinate with UI designers & developers

✓ Plan information architecture and sitemaps

✓ Test usability
≠

 UX UI @evansakanno

UI designer
responsibilities
✓ Design research

✓ Implementation with developer

✓ Interface adaptation to device screen

✓ High fidelity prototyping

✓ Branding and graphic development

≠

Design Thinking @evansakanno

Design thinking is
a human-centered
approach to
solving problems
Design Thinking @evansakanno

The phases of
Design Thinking
1. Empathy: understand and be sensitive to your users

2. Define: your users’, their problem(s), and your insights

3. Ideate: generate innovative ideas beyond obvious solutions

4. Prototype: sketch or simulate solutions for the problem(s)

5. Test: your solutions, refine the prototypes, get new ideas.

 Usability Aesthetics @evansakanno

Users are influenced by the

aesthetics of an interface,
even before they evaluate
its functionality
>
 Usability Aesthetics @evansakanno

Principles of
great Usability
✓ Learnability: Users will not require instructions

✓ Efficiency: Users can complete tasks quickly

✓ Memorability: Usable even after a long time of none use.

✓ Error Prevention: Fewer mistakes users can recover from

✓ Satisfaction: It is pleasant to use the design

>

UX Design Process @evansakanno

UX Design Process
✓ UX Research
✓ User Journeys
✓ Wireframes & Prototypes
✓ User Testing

UX Design Process @evansakanno

The UX design process

covers Research, Design,
Testing and Validation with
continuous improvement
and iteration.
UX Research @evansakanno

User Research
best practices
✓ Start with user research to design with proven data

✓ Think from the perspective of your user

✓ Talk to your users. More importantly, listen and observe them

✓ Research at the beginning and at every stage

UX Research @evansakanno

User Personas &

the benefits
✓ Personas clarify your target audience to all stakeholders

✓ Personas guide your design decisions through the project

✓ Personas identifies users goals and behaviour pattern

✓ Personas remind us we are not the users

User Journeys @evansakanno

Sketching
User Journeys
1. Start from defining the user persona / actor

2. Scenario describing the situation that the journey map addresses

3. Phases of the journey specific to the scenario

4. User Actions at each journey phase

5. Opportunities to show insights gained from the journey

Idea generation @evansakanno

Tips for generating

Ideas in UX design
✓ Get inspiration from user research

✓ Know and understand your users and their needs

✓ Work in a team to get diverse opinions

✓ Dedicate substantial time to idea generation

✓ Get all parties involved together: UX, UI, Dev, Marketing, User

Wireframes & Prototypes @evansakanno

Wireframes are
sketches that create
a visual guide of the
screens and pages
in a product
Wireframes & Prototypes @evansakanno

The benefits of
wireframing
✓ Faster validation to test navigation and features

✓ Easier to make changes based on feedback

✓ Helps evaluate usability early before building

✓ Clarifies development requirements

✓ Save money on design and development

Wireframes & Prototypes @evansakanno

Prototypes are
realistic, interactive
concepts of the
screens and pages
in a product
Wireframes & Prototypes @evansakanno

The benefits of
prototyping
✓ Helps people interact with a design just like the finished product

✓ Helps evaluate usability and feasibility before functionality

✓ High fidelity prototypes can be used to pitch ideas to stakeholders

✓ Prototypes can be shared with target audience for feedback

✓ Prototypes are a bridge between designers and developers

Workflow @evansakanno

Workflow
✓ Use Figma
✓ Design↔Dev Handoff

Workflow @evansakanno

UX design tools should

be simple, collaborative,
accessible, and flexible
…So use Figma



Design↔Development @evansakanno

User interface
design guidelines 1/2
✓ Keep it simple, easy to interpret and understand

✓ Ensure consistent interfaces to increase efficiency

✓ Use legible, clear, and distinctive typography 3 fonts max)

✓ Use recognisable graphic elements and terminology

✓ Design components should focus on the current task

(

Design↔Development @evansakanno

User interface
design guidelines 2/2
✓ Use colour and contrast to direct attention

✓ Ensure page layouts aid scanning and readability.

✓ Leverage design patterns from apps people use daily

✓ Forgive. Your UI should allow and tolerate user error.

✓ Use UX writing to keep messaging simple and conversational.



Design↔Development @evansakanno

Better design↔dev
handoff tips 1/2
✓ Communicate early and constantly through the project phases

✓ Discuss the user goals per page with the developer

✓ Use Figma and slack to ease collaboration and sharing

✓ Get insights from developers on design elements 

✓ Design simple components and reuse them across your interface

Design↔Development @evansakanno

Better design↔dev
handoff tips 2/2
✓ Use a design system

✓ When in doubt, get on a call

✓ Add notes to the designs when necessary

✓ Use a design system and stick to it

✓ Use simple calculated grids

Workflow @evansakanno

Vzy Case Study

✓ Problem
✓ Solution
✓ UX Insights

Vzy Case Study @evansakanno

Problem: Professional
websites are difficult
to manage, expensive
and takes too long…
Vzy Case Study @evansakanno

Solution: Vzy helps you

create pro websites
easily on your phone,
no code!
Vzy Case Study @evansakanno

Edit Header
1

Content
2

1. Page title with back (left) and options (right)

2. Add content to header and choose style

3. Logo can be typed as text or an image

4. Menu in accordions with delete icon

4

5. Search to link existing pages or paste link

Vzy Case Study @evansakanno

Edit Header
1

Style
2

3
1. Page title with back (left) and options (right)

2. Add content to header and choose style

3. Choose header layout visually 4

4. Choose header width

5
5. Increase size of Logo and Menu

6. Mobile menu as text or hamburger icon

Vzy Case Study @evansakanno

Use spacing
for balance
Blue: 60px / 40px tap areas for any thumb size

Green: 20px spacing from edge of screen

Purple: 10px spacing between grouped components

Orange: 40px spacing between component groups

Conclusion @evansakanno

Final thoughts:
Research at all stages
Talk & Listen to your users
Collaborate at all stages
Test & Iterate








Learn Icons @evansakanno

Thank you
@evansakanno