This document outlines the steps and activities for a workshop on designing a fictional GIS application. The workshop involves participants working through a design thinking process, including needs assessment, brainstorming ideas, creating storyboards, and developing wireframes for a proposed app design. Participants will work in groups and roles such as user, designer, and developer. The goal is for participants to experience the process of collaborative design rather than creating a polished product.

1. Esri UC 2014 | Technical Workshop |
Workshop on GIS+Design
Sneha Khullar & Mark Harrower

2. Welcome
Dot Voting
Place dots on apps you want to build
(can put one or more on a app!)

3. GIS + Design – Introduction
User Interface Design and User Experience critical for great products
We’ll create a fictional product today
Easy, fun, and relevant
PROCESS of working together more important today than the PRODUCT

4. Your Persona
User, Designer, and Developer
(introduce yourself)

5. Problem Finding / Needs Assessment
Don’t assume you know what your audience needs
Watch, Listen, Learn
Beginner’s Mind

6. Redesign pill bottle for the elderly
Photo credit: http://www.thelibertybeacon.com/wp-content/uploads/2013/01/rx_pill_bottles.jpg

7. Designer: “Do you have any difficult opening your
medicine bottle?”
User (elderly, with arthritis): “No problem at all!”
Designer: “Show me.”

8. Photo credit: http://www.thenakedscientists.com/forum/index.php?topic=42626.0

9. “No problem
at all!”+ =

10. STEP 1
Needs Assessment
(1)Contextual Inquiry (not today)
(2)One-on-One Interview (5 Minutes)
OUTCOME: Uncover needs, 1-2 sentences

11. STEP 2
Idea Generation
15 min activity
10 min Brainstorming + 5 min Affinity diagramming
OUTCOME: Affinity Diagram

12. Brainstorming 10 Minutes
photo credit: Andrew Turner (Esri DC)

13. IDEO’s 7 Rules of Brainstorming
1. Defer judgment.
2. Encourage wild ideas.
3. Build on the ideas of others.
4. Stay focused.
5. One conversation at a time.
6. Be visual.
7. Go for quantity.
Credit: https://openideo.com/blog/seven-tips-on-better-brainstorming

14. Affinity Diagramming
www.learnyourcompany.com

15. STEP 2
Idea Generation
15 min activity
10 min Brainstorming + 5 min Affinity diagramming
OUTCOME: Affinity Diagram

16. STEP 3
Storyboarding
15 min activity
5 min Create point of view + 10 min Storyboarding
OUTCOME: One storyboard

17. Point of View
It's your take on a high-level design strategy, before
actually designing a solution.

18. Storyboarding

19. STEP 3
Storyboarding
15 min activity
5 min Create point of view + 10 min Storyboarding
OUTCOME: One storyboard

20. STEP 4
Wireframes
15 min activity
OUTCOME: One Proposed App Design

21. Wireframes
http://wireframes.linowski.ca/2009/05/balsamiq-mockups-15/

22. STEP 4
Wireframes
Lots of great tools, but paper works well
Don’t get hung-up on fonts, colors, etc
Think about the experience / flow…try ideas on

23. STEP 4
Wireframes
15 min activity
OUTCOME: One Proposed App Design

24. Next Steps…
Heuristic Review - see handout
High Fidelity Comps
Rapid Prototypes
Lots and lots and lots of Usability Testing

25. Thank You
Sneha Khullar skhullar@esri.com
Mark Harrower mharrower@esri.com
EventBrite Email Signup

26. Esri UC 2014 | Technical Workshop | Workshop on GIS+Design