This document discusses the differences between user experience (UX) and user interface (UI) design. UX focuses on how a site works and feels from the user's perspective, aiming to fulfill business goals like user acquisition, activation, and retention. Some key UX components include user definitions, site maps, user flows, and wireframes. UI, on the other hand, focuses on visual design elements like branding, colors, fonts, and wireframes to provide users with solutions to problems. The document outlines common UX and UI design tools and compares freelance versus agency versus in-house design approaches.

2. Agenda
• Problem
• UX vs UI
• Purposes of UX
• Purposes of UI
• Design Tools
• Summary

3. What is the problem?

4. Koombea flow process

5. UI is how it looks
UX/UI
UX is how it works and
feels

6. - Popcorn
- Defrost
- 30 seconds

9. UX-User Experience
UX, or user experience, is a measure of the
ease and pleasure users enjoy when navigating
a site.

10. *Fulfill business goals
1. User acquisition
2. User Activation
3. User Retention
Purpose Behind UX-User experience

11. How UX solves problems
Interaction
Design
Usability
Information
Architecture
Visual
Design
Content
Strategy
User
Research
UX

12. UX Components
1. User definition
2. User sitemaps
3. UserFlows
4. Wireframes

13. User Definition

14. Information Architecture

15. Userflow

16. Wireframe

17. Koombea flow process

19. UX is NOT UI
http://www.uxisnotui.com/downloads/a4.pdf

20. UI-User Interface
A skillful interface designer understands the
importance of providing the user with a
solution to a defined problem.

21. UI
Branding
Color, Schemas:
font, Logo, Style
Wireframing

22. • User Acquisition
• Brand
• Instill trust
Purpose behind UI-User Interface

23. How do we get to UI?
1. Problem has been identified
2. User flows and stories are made
3. Experiments to validate persona
4. Wireframes and sketches
5. Mockups with UI included can be made
6. User tested
7. It’s now time to code up the interface – UI Design!

24. What NOT to do:

25. Easy to use Design Tools

26. HotGloo
Hotgloo.com

27. Balsamiq
Balsamiq.com

29. The UX/UI Difference
Freelance vs Agency

30. Freelancer Agency In-house
Pros
Flexibility Creative Brand harmony
Fresh
Perspective
Access to latest
tech
Access to
“assets”
Quick
Turnaround
Experts
Cons
Limited to
specialty
Expensive
Lack of
creativity
May differ from
“brand”
Turnaround
times differ
Bureaucracy