This talk is about the data driven design approach in prototyping – a content-first approach that aims at achieving a high level of data fidelity. Interactive prototypes rely heavily on great information architecture. Well designed content models help to create prototypes that allow to simulate and test workflows from start to end. A case study of an application for managing large scale events will be used to illustrate how data driven prototyping can make the difference between a good and a great prototype.

1. Coping with Complexity
Memi Beltrame
WIAD Switzerland - Zürich, February 21. 2015

2. Memi Beltrame
I make things fun
and easy to use.
I run a small company called less a mess and I specialize in research and prototyping for projects
with a high level of complexity. I am also the author of Protostrap, a tool to build clickable
prototypes.

3. We love Complex THings
https://flic.kr/p/9G71KC
I absolutely love complex things. We all do. We want challenges!
These challenges are driven by complexity.

4. more plates than we can spin
Often Complexity is really overwhelming and paralizing, too much of everything.
We are just not prepared to cope with it.

5. Coping with complexity
This talk is about what I learned on coping with complexity as a User experience professional.
I hope it will help you in being more prepared next time something complex shows up.

6. Complexity
https://flic.kr/p/cFM3cd
There are a number of type of complexity in our field. Complexity can be organizational, political or structural
and probably it’s always a combination of those.

7. Today I will focus on complexity that is tied to what we can see and do on the webpages themselves.

8. Tech based complexity
Responsive Design
Mobile First
Multi-Device Ready
Complexity in Web-Interfaces also has a lot of dimensions. Often it is only perceived on the
technical level, dealing with devices and display. The answers to those problems are mobile first
and responsive design, multi-device ready and so forth. These approaches are all fine. But they are
incomplete.

9. Tech based complexity
Focus on delivery
The problem with these approaches is that they focus on the delivery of content. The
content itself is secondary. As an industry we have started to realize that real content is
preferred to lorem ipsum. But still: the focus lies on the delivery, and not on the content
itself with all its dimensions.

10. Data is the key
Designing for digital media is more than handling the delivery by adapting to devices. Digital media must
adapt to individual user roles, needs and behavior. The key to a flexible adaptation is data.
https://www.flickr.com/photos/jdhancock/8031897271

11. Dimensions of complexity
- The amount of data to be displayed
- The data’s structure
- The process of how the data is created & edited
- Searching & filtering data
- How data changes over time
The interesting dimensions of complexity all have to deal with data

12. If you want to understand complexity you
have to understand data and its function.

13. actions user can do with data
- Read
- Enter new data
- Edit & change existing data
- Delete data
- Undo what they just deleted
- Search & Filter data
- Combine data
This is the data driven design approach. The point is to simulate everything that can be done with data.
This is a list of very basic actions user can do with data.

14. Case study
I want to explore some of these dimensions with a case study of a project I was
fortunate enough to be part of,

15. SpotMe
The project is called SpotMe. SpotMe is a mobile app for large scale events. These events are medical
congresses or conventions for the tourist industry. Think big.
The SpotMe app allows participants to see the program of the sessions, to interact with other participants or
take part in live surveys happening during sessions.
As an event organizer you can purchase your branded SpotMe app tailored to your event.

16. My part in the project was to help SpotMe team with the design of an administration tool for the events. This
tool, called Backstage, allows event organizers to manage all the data that is part of the event. This is the
participants, the agenda and the locations and much more.

17. First Morning, before coffee.
What is interesting about SpotMe is the size of it all.
The events that SpotMe accommodates have thousands of participants and an enormous amount of
parallel sessions. Some sessions contain nested sessions for example in the case this symposium inside
a conference that consists of several talks with work from different authors.

18. Where do I start?
So where do I begin to solve the problem?
I find the problem first.

19. Content inventory and oBject Model
It’s always a good idea to get an overview of the content we have to deal with. A high level content
inventory is a good place to start. For spotme this took the form of a Content object model. I listed
Content Objects and their types for each Topic I could find in the app.

20. scenariosResearch
I then used the list to go through each type of content to find out what tasks users had to be able to fulfill in
backstage. This gave me a huge backlog of tasks and made clear where the huge challenges were.

21. 80 Columns - 5000 Rows
ENter: The Bad GUy
One of the biggest challenges was this one. This is the excel sheet that contains participants of an event.
As you can see it is very incomplete and but it shows the dimensions.
Handling the data of these super-sized events is a messy affair.

22. THe excel Nightmare
• No single point of entry
• No designated person
• No content strategy know-how
• No established workflows
• No reason to change
At this scale it is impossible to have a single point of entry or a designated person to deal with the
data. These companies also don’t know much about content strategy and there are no established
workflows for the governance of content.
To make things worse these companies all work with excel sheets. SpotMe has a history of
convincing Event organizers to change to something better.

23. Excel is not only the standard way,
It is the only way
of how non-Techies handle data.
The bitter insight is that it can’t be done.
Excel is the standard way to deal with lists for non-tech people.
It is not only the standard way. It is the only way.
SpotMe and also I had to embrace that fact.

24. Patterns for scale
There is only little documentation on patterns that deal with handling complex scenarios. I put together a few
patterns that I found useful in dealing with complex data.
Please be aware that what you see are prototypes, not the final application.

25. Filtering a List with a lot of records
v
Finding a small set of data is an important task.
Sometimes the data is much but only in one dimension. Meaning you have tons and tons of rows.
One of the first patterns I established at SpotMe was filtering long lists with a relatively small amount of
columns. This is fairly straight forward. Each column has a text filter. These Text filters shorten the list.
This is a pattern users get really easily. Watch this video

26. Lists with a lot of records AND Parameters
Parameter Operator Value
With a large amount of columns the display of all the columns does not scale. This calls for a more
flexible way to filter data. The idea of the interface we used is that it should expand the simple filter in a
powerful way that is still easy to use.
Filters are built with a parameter, an operator and a value.
The parameter in this case is a list of all the columns of the participant table.
The first iteration just had a dropdown with all of the 80 columns that made up the people data. This was
not efficient at all.

27. Searchable
Dropdowns
A simple way to make this much more efficient is to make the dropdowns searchable.
This in itself is a very effective pattern.

28. Lists with a lot of records AND Parameters
Add multiple parameters
These filters can be combined. This allows to narrow down the selection really well.

29. Lists with a lot of records AND Parameters
Add filter logic
One last step is adding the logical operators AND & OR to the interface. The use of the textfield proved to be
much more efficient than building logic via the interface.

30. Lists with a lot of records AND Parameters
Add filter logic, version 1
The first version of the interface tried to visually group the items, making the interface cluttered
and hard to read.

31. Lists with a lot of records AND Parameters
Add filter logic
Assigning numbers to the parameters and allowing users to combine them in a text field was
surprisingly much easier to understand.

32. Lists with a lot of records AND Parameters
Let’s see the interface in action

33. Bulk Editing Data
As an example:
Find all
- Spanish speaking participants
- staying at the Hotel Belvedere
Assign them
- an emergency contact
- an emergency number.
Once you find the entries of data you need, you must be able to act upon them. This often means that
what you want to edit is different from the criteria used for the selection.

34. Bulk Editing Data
Process:
- Select entries to change
- Select the parameters that have to be changed
- Define which changes have to take place.
- Make changes
The idea behind bulk editing data is to find entries inside a large field and to change selected parameters to the same
values for each entry.

35. Bulk Editing Data
Search Select Make changes
This again uses a searchable dropdown, this time an advanced version of a multiselect.

36. Bulk Editing Data
Searchable multiselects
Searchable multiselects are a handy extension of the searchable dropdowns.

37. Bulk Editing Data
Let’s see how that works

38. Assigning groups
One last pattern I want to show is group assignment.
Sometimes you have to assign items of a list to a group.
With only a few items you can have a group of radio buttons to choose from.
This however does not scale for larger sets of items.

39. Assigning groups
With large sets of items you can use the order of the elements in the list itself to make groups.
Instead of assigning elements to a group you place groups as headlines within a vertical list. Everything below
part of that group
This has the advantage of not having to touch each item to put it in a group.

40. Assigning groups
Let's see how that works

41. Importing Data
The challenges are endless. Importing data is a mind bender.

42. Handling Translations
Handling translations is evergreen of complexity

43. Merging content from different environments
Merging content from different environments.
All these challenges pose huge obstacles and the patterns you saw help to overcome
some of these obstacles.

44. Happiness is overcoming obstacles.
Happiness is the surprise and delight
when something just works.
And the happiness the users feel is our reward.

45. Thank you!
I’m @bratwurstkomet on Twitter
Prototypes made with Protostrap
http://protostrap.ch