Rima Gerhard is the lead Web Design instructor at the Miami International University of Art & Design. She has over 10 years of practical experience planning, developing, and testing web applications. This is her presentation deck from Open Source Fashion's Conversion Conference at Venture Hive Miami on April 29, 2015. http://freestyleconference.com

1. #FCMIA
@rima_gerhard
Effective UI/UX
And why it matters.

2. #FCMIA
@rima_gerhard
WHAT IS UI/UX?
UI – User Interface
UX- User Experience

3. #FCMIA
@rima_gerhard
UX is not UI

4. #FCMIA
@rima_gerhard
UX is not UI
• UI – what people see.
• UX – how people interact and feel while they
do.

5. #FCMIA
@rima_gerhard
UI – what users see.

6. #FCMIA
@rima_gerhard
UX – how users interact & feel.

7. #FCMIA
@rima_gerhard
UX is not UI
• UI – what people see and use to interact with
the product TECHNICAL
• UX – how people feel while they do
EMOTIONAL

8. #FCMIA
@rima_gerhard
Relationship between UX and UI

9. #FCMIA
@rima_gerhard
Relationship between UX and UI

10. #FCMIA
@rima_gerhard
Relationship between UX and UI

11. #FCMIA
@rima_gerhard
Your Product
Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

12. #FCMIA
@rima_gerhard
Your UI
Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

13. #FCMIA
@rima_gerhard
Your UX
Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

14. #FCMIA
@rima_gerhard
A UI element.

15. #FCMIA
@rima_gerhard
A UI

16. #FCMIA
@rima_gerhard
A UX
• Who should attend this conference?
• Is this conference worth my time and money?
• Will there be interesting people attending?
• What is this conference like?
• Will there be awesome speakers?

17. #FCMIA
@rima_gerhard
To sum up
• UX is not UI
• UI is a small part of UX
• UX Designers and UI Developers are
complementary

18. #FCMIA
@rima_gerhard
UX - Why does it matter?
UX is about satisfaction.
UX is about designing for the user to come back.
UX focuses on the structure and layout of the
content, navigation, and how users interact with
them.

19. #FCMIA
@rima_gerhard
UX - Why does it matter?
• More frequent visits to your website
• Increased return visits
• Users stay longer on your site
• Increased sales
• Decreased user errors
• Decreased customer support costs
• Reduced word of mouth comlaints.

20. #FCMIA
@rima_gerhard
UX - Why does it matter?
• Satisfied Customers
• Smarter, more relevant content
• Social Shares
• Word of mouth marketing
• Long-term customer relationships built on
mutual respect

21. #FCMIA
@rima_gerhard
UX - Why does it matter?
Every dollar invested in UX brings between 2 and
100 dollars in return.
SOURCE: Pressman, R.S. (1992). Soſtware Engineering: A Practitioner’s Approach.
McGraw-Hill: New York, NY Gilb, T. (1988). Principles of Soſtware Engineering
Management. Addison Wesley: Reading, Ma.

22. #FCMIA
@rima_gerhard
Good UX is about avoiding this.
Source: http://xkcd.com/773/

23. #FCMIA
@rima_gerhard
What do UX people do?
1. Strategy
2. Information Architecture
3. Mock-up & Wireframing
4. Flowcharts
5. Test, Report & Finetuning

24. #FCMIA
@rima_gerhard
Strategy – Find the answers
For Who? Very very important question here. Every product is targeted
to someone. If you understand who you talk to adapt your
communication/language to this person, you’ll reach the goal.
For What? The service description. Why it is good? The added value for
the customer.
Why it is good? The added value for the customer.
Is it a new product? We absolutely need to understand why nobody
has done it before. There has to be a reason. Try to find out why.
Is it an improvement of an existing product? Highlight the pros & cons
of the current product. Listen to the feedbacks from real user of the
product.

25. #FCMIA
@rima_gerhard
Strategy – Study of the Target
The user i.e for who. We need to ask ourself this question.
Who will use the product? We create personas here.
The competition We create a benchmark with the main
competitors. Highlights the features, the strengths and
the weaknesses.
The market, the environment We make research and find
out data on the potential market the product is
addressing to.

26. #FCMIA
@rima_gerhard
Mockup and Wireframing
• Create mockups and detailed wireframes
– Invision
– MarvelApp

27. #FCMIA
@rima_gerhard
UI Testing
• Interviews
• Personas
• Usability Tests
• A/B Testing
• Heatmap

28. #FCMIA
@rima_gerhard
2 quick UI takeaways.
• Is your site mobile friendly?
• Is your site’s UI up to industry standards?

29. #FCMIA
@rima_gerhard
Is your site mobile friendly?
As of April 21st 2015, Google officially uses
“mobile-friendliness” to rank all websites.
#Mobilegeddon

30. #FCMIA
@rima_gerhard
Google’s Mobile Friendly Test
• https://www.google.com/webmasters/tools/mobile-friendly/

31. #FCMIA
@rima_gerhard
How does your site score on UI?
• https://developers.google.com/speed/pagespeed/insights/

32. #FCMIA
@rima_gerhard
Thanks!
• Rima Gerhard
• @rima_Gerhard
• rimagerhard.com
• Rima.Gerhard@gmail.com