2. Design Strategy A Paris Flea Market Guide
The Experience Economy
“Experience design will become as much of a business art as product design and
process design are today.” (Pine).
“An experience occurs when a company intentionally uses services as the stage, and
goods as props, in a way that creates a memorable event” (Pine).
Business Models
- Service design
- Experience design
3. Design Strategy A Paris Flea Market Guide
The Experience Economy
“Consumers seek unique experiences beyond merely consuming products” (Manthiou).
“Quality is no longer be a differentiator” (Manthiou).
“The value offered by tourism industry are essentially the experiences” (Manthiou).
4. Design Strategy A Paris Flea Market Guide
The Experience Economy (Pine)
- Theming of the experience.
- Harmonize impressions with positive cues.
- Eliminate negative cues.
- Mix in memorabilia.
- Engage all five senses.
5. Design Strategy A Paris Flea Market Guide
Designing for Enjoyment
“People are not interested in a dull but very useful tool, nor in a fancy yet
useless toy” (Monk).
The challenge for HCI research is to address hedonic requirements and combine
them with goal-oriented requirements” (Monk).
“Fun and enjoyment are set to be major issues as technology moves out of
the office and into the living room” (Monk).
6. The Idea A Paris Flea Market Guide
The Parisian Flea is a mobile application designed for those who are traveling
to Paris France to shop the Paris Flea Market circuit.
7. Sense of Place A Paris Flea Market Guide
The Paris flea market is the largest antique market in the world. It comprises
some 2,500 stores, spread across 15 markets. The Paris Flea Market is
not easy to find, and once you are there it often feels like a maze with many
hidden treasures.
8. The first reference to the term “Flea Market” appeared in two conflicting stories
about a location in Paris, France in the 1860’s known as the Marche aux Puces,
translation, “Flea Market”
9. Competitive Landscape A Paris Flea Market Guide
The current state of travel guides for Paris Flea Market Tours is rather oblique.
There are blogs that describe in detail the various flea markets in Paris. There
is a map tool designed explicitly for locating flea markets in Paris. There is a
tour guide service for the flea markets in Paris.
10. The Problem Statement A Paris Flea Market Guide
We conducted design research to learn what steps users would take and what
tools they would use to plan a shopping trip to the Paris flea markets.
We wanted to know how users would plan getting from one market to the
next and how they would make purchases, keep track of those purchases and
ultimately get those purchase home.
11. Design Research A Paris Flea Market Guide
Developing Empathy
“It’s become increasingly common, perhaps even required, for companies to include
user research in their design and development process” (Portigal 11).
Among many different approaches to user research, interviewing (by whatever name
you want to call it) is a deep dive into the lives of customers” (Portigal 11).
“Design research requires us to approach familiar people and things as though they
are unknown to us to see them clearly. We need to peel away our assumptions like a
gray alien shedding its encounter suit” (Hall 6).
12. Design Research A Paris Flea Market Guide
Developing Empathy
“Designing something requires that you completely understand what a person wants
to get done” (Young 2).
“Empathy extends to knowing what the person wants to accomplish regardless of
whether she has or is aware of the thing you are designing” (Young 2).
“Mental models give you a deep understanding of people’s motivations and
thought-processes, along with the emotional and philosophical landscape in which
they are operating” (Young 2).
13. Tewillie
Traveler
Billyjo
Retro Clothing Designer
Monelisa
Flea Market Enthusiast
The Users A Paris Flea Market Guide
The first iteration of the application will focus on The Flea Market Enthusiast,
The Traveler, and The Designer. For flea market enthusiasts and particularly
Francophiles, there is something about “Made in France” that makes this cul-
turally souhaitable (desirable).
14. Tewillie
Adventure Traveler
Billyjo
Retro Clothing Designer
Monelisa
Flea Market Enthusiast
User Goals A Paris Flea Market Guide
User goals were: to explore, to be able to evaluate each market and remem-
ber where they went so as not to get lost, visit markets that interested them,
and to do something different each day. Treasure hunting was important.
- Avid collector and flea market enthusiasts.
- Goes to flea markets as much as she can.
- Collects vintage clothing, hats, furniture, small art objects.
- The most exciting thing for Monelisa is the hunt!
- Self-employed fashion designer and manufacturer.
- Inspired by vintage fashions, fabrics and trims.
- The people and the back-stories are particularly interesting.
- Looks for ideas and inspiration from color, texture and silhouette.
- Likes to bring home treasures to enjoy from her travels.
- Loved her first flea market experience.
- Found art objects , kitchen items and vintage clothing.
- New people and experience new places was the most exciting.
15. Design Research A Paris Flea Market Guide
Everyone Should do Research
“Asking your own questions and knowing how to find the answers is a critical part of
being a designer” (Hall 7).
“You will find that when you ask the hard questions, your job gets much easier. You
will have stronger arguments, clarity of purpose, and the freedom to innovate that
only comes with truly knowing your constraints” (Hall 7).
16. Design Research A Paris Flea Market Guide
Demystifying Design Research
“Design research both inspires imagination and informs intuition through a variety of
methods with related intents: to expose patterns underlying the rich reality of people’s
behaviors and experiences, to explore reactions to probes and prototypes, and to
shed light on the unknown through iterative hypothesis and experiment.”
- Jane Fulton Suri, creative director, IDEO
17. Design Research A Paris Flea Market Guide
Mental Models
“Mental models are simply affinity diagrams of behaviors made from ethnographic
data gathered from audience representatives” (Young 3).
“A mental model for a particular topic is, in essence, an affinity diagram of user be-
haviors. The towers in the diagrams represent group names for the behaviors within.
The sets of towers represent a higher-level group of the behaviors” (Young 4).
18. Design Research A Paris Flea Market Guide
Mental Models
“To create a mental model, you talk to people about what they’re doing, look for pat-
terns, and organize those patterns from the bottom up into a model. From the field
research, you will glean maybe 60 or 120 behaviors per person. Over time, you see
the same behaviors, and you group them together. You line them up in towers; then
line up the towers into groups that represent different cognitive spaces. The diagram
looks a lot like a city skyline” (Young 5).
24. The Prototype A Paris Flea Market Guide
Paper Prototyping
“Paper prototypes are easy to fix: If you discover issues with the design, you can fix
the interface right then and there, using an eraser and a pencil, or a new piece of pa-
per. Alternative flows can be tested by drawing a new screen design in a few minutes
and can be compared with an existing design almost immediately. This method helps
move the design along quickly. It is helpful for more than one team member to be
present while testing paper prototypes” (Nudelman, 2013 65).
25. The Prototype A Paris Flea Market Guide
Paper Prototyping
“Paper prototyping helped then to get end-user feedback before anything was imple-
mented. It was easy to add and remove features—even halfway through a test. It is
a method that every interaction designer uses when designing the first proposal of a
new software application before writing the UI specifications” (Kangas 58).
“When the application is simple, and interaction is based on standard UI style com-
ponents, a paper prototype test is a sufficient method for verifying usability before the
actual implementation” (Kangas 58).
26. Storyboards A Paris Flea Market Guide
a mobile phone. The method also provides explicit direction on how to make use of Android
design patterns in Google Material Design.
The prototypes shown below were done in a workshop taken on September 17, 2015 in
Dallas. They represent the initial task flow of plan, browse and join from the homepage of
the app.
This storyboard illustrates the excitement and also pain point of seeing the map of all the flea
markets in Paris and being confused that there are so many to choose from. The user’s desire
This story board illustrates the excitement and pain point of seeing the map of all the flea markets in
Paris and being confused and intimidated that there are so many to choose from.
27. Paper Prototypes A Paris Flea Market Guide
is to look at the markets as if she were looking at a magazine and then seeing the one she
wants to go to. The next scene is the market and the user sees a vintage hat that she likes. She
takes a photo of one she may come back for later. She pays the vendor and is happy to have
her new vintage French beret.
The prototype shows the browse action that takes the user to a list of markets to browse
through. When the user clicks into a specific market details for that market are shown.This prototype shows the browse action that takes the user to a list of markets to browse through.
When the user clicks into a specific market details for that market are shown.
28. Paper Prototypes A Paris Flea Market Guide
There is a transitional slider that displays the main menu again and the user chooses plan this
time to plan which markets she wants to attend.
There is a transitional menu slider that displays the main menu.
The user chooses to plan which markets to visit.
29. Paper Prototypes A Paris Flea Market Guide
From plan there is a list of markets by the days of weeks with the number available on each
day. The arrows indicate an image carousel to display more than one market on a given day.
The calendar lets her pick a date setting and see the markets based on those criteria.
There is a list of markets by days of weeks with the number available on each day. The arrows indicate
an image carousel. The Calendar lets the user pick a date and see what markets fall on that date.
30. Paper Prototypes A Paris Flea Market Guide
The transition slider allows for filtering the selection down based on types of merchandise
she is looking for.
The checbox slider allows for filtering the selection based on types of merchandise.
31. Paper Prototypes A Paris Flea Market Guide
This is an example of the click through from the join action on the homepage where tags can
be included in the profile setup.
Description of Wireframe Interactions
The Parisian Flea is a boutique travel app for those who want to travel and shop the Paris
Example of click through from join on the homepage.
Tags can be included in the profile setup.
35. System Design A Paris Flea Market Guide
Design Trends
Google’s MDL is nonetheless a seismic shift in design philosophy exceeding
that of the debut of the iPhone user interface on June 29, 2007.
The Twitter Bootstrap responsive framework was introduced in 2011.
In 2014 Bootstrap saw a 60% increase in usage.
Nearly every website and mobile experience on the market is a reflection of
this influential rate of adoption.
http://trends.builtwith.com/docinfo/Twitter-Bootstrap
36. System Design A Paris Flea Market Guide
Design Trends
Mobile experts say that Google is raising the bar.
“One of the more surprising mobile UX trends is that Google has become the stan-
dard-setter for mobile UX design patterns. Apple has been the standard bearer for
years, but some experts believe the company has stumbled.”
http://techbeacon.com/4-leading-mobile-ux-experts-talk-key-trends
38. Usability Study A Paris Flea Market Guide
Purpose
The purpose of this usability study is to evaluate the efficiency of some basic
task flows related to browsing, planning and joining that are currently being
implemented for the Parisian Flea mobile experience.
Goals
The primary goal is to determine if the user understands how to go about
evaluating which markets to visit, how to filter the markets by categories,
how to add a market to their schedule and how to mark a favorite.
The secondary goal is to determine if the user understands how to plan a trip
to the market by specifying a date range then filter the markets for that date
range then add the event to their schedule.
Tertiary goals include determining if the task flow to track purchases makes
sense and meets the users needs as well as the shopping list task and finally
the join task.
39. Usability Study A Paris Flea Market Guide
Technique
This was a hybrid study using direct observations, online survey with multi-
ple-choice and heatmaps along with a clickable prototype.
Chalkmark by Optimal Workshop was used to perform this usability study.
This tool has the ability to create a survey and upload wireframes that can
be to sent to a target group for evaluation.
The tool follows a task flow using a question asking format where the user
then clicks on the wireframe to record their answer response. Multiple
choice and text answers are available in pre and post survey questions.
The results are plotted as a heat map and raw data is provided in an Excel
spreadsheet. The data presented makes it easy to see where success and
problem areas are located.
40. Heatmaps A Paris Flea Market Guide
Task 1. 1. Which button would allow you to create a schedule?Task 2. 2. Which button would allow you to view the Paris Flea Marke
Task 1: Which button would allow
you to create a schedule?
Task 2: Which button would allow
you to view the Paris Flea Markets?
41. Heatmaps A Paris Flea Market Guide
Task 3. 3. Which button would allow you to create an account?Task 4. 4. Choose the Antica Market.
Task 3: Which button would allow
you to create an account?
Task 4: Choose the Antica Market.
42. Heatmaps A Paris Flea Market Guide
Task 5. 5. Mark the Antica Market as your favorite. Task 6. 6. In the favorites listing how would you go about adding a no
Task 5: Mark the Antica Market as
your favorite.
Task 6: In the favorites listing how
would you go about adding a note
about the Antica Market?
43. Heatmaps A Paris Flea Market Guide
Task 7. 7. Add the Antica Market to your schedule. Task 8. 8. You want to narrow the market choices based on items you
Task 7: Add the Antica Market to
your schedule.
Task 8: You want to narrow the market
choices based on items you are looking for.
How would you go about doing this?
44. Heatmaps A Paris Flea Market Guide
Task 9. 9. How would you view all of the markets available on October 12th?Task 10. 10. You have just added an event. Where would you go to vi
Task 9: How would you view all of the
markets available on October 12th?
Task 10: You have just added an
event. Where would you go to view
your schedule?
45. Heatmaps A Paris Flea Market Guide
Task 11. 11. Where is the main menu located? Task 12. 12. How would you go about adding a purchase?
Task 11: Where is the main menu located? Task 12: How would you go about
adding a purchase?
46. Heatmaps A Paris Flea Market Guide
Task 13. 13. You have added some details about your purchase. How would you …Task 14. 14. How would you go about adding a photo?
Task 13: You have added some
details about your purchase. How
would you go about adding tags?
Task 14: How would you go about
adding a photo?
47. Heatmaps A Paris Flea Market Guide
Task 15. 15. You decide to add a note to the photo. How would you go about doin…Task 16. 16. You have just finished adding all of the details to your pu
Task 15: You decide to add a note
to the photo. How would you go
about doing this?
Task 16: You have just finished adding all
of the details to your purchase. How would
you close the row?
48. Analytics A Paris Flea Market Guide
Heat Maps
Task Hit Target Hit Target Region Missed Target
1. Create Schedule 80% 20%
2. View Markets 80% 20%
3. Create Account 60% 40%
4. Choose Antica Market 60% 20% 20%
5. Favorite Antica Market 80% 20%
6. Add Note to Favorite 80% 20%
7. Add Antica to Schedule 60% 20% 20%
8. Filter Categories 60% 40%
9. View Markets on Oct 12 80% 20%
10. View Schedule 60% 40%
11. Locate Main Menu 100%
12. Add Purchase 80% 20%
13. Add Tags to Purchase 60% 40%
14. Add Photo to Purchase 80% 20%
15. Add Note to Photo 60% 20% 20%
16. Close the Purchase Row 60% 40%
Heatmaps
49. Analytics A Paris Flea Market Guide
Multiple-choice
Task 100% 80% 60% 40% 20% 20%
1. Finger scroll
2. Long-press Finger tap
3. Map view Details view
4. # of markets # of train stops
5. 6 markets
6. Tap day Tap number icon
7. Finger scroll
8. Tap Long-press
9. Calendar icon Heart icon
10. Tap Long-press
11. Long-press Swipe I don’t know
Multiple-choice
50. Analytics A Paris Flea Market Guide
Recommendations
Usability Issue Priority Effort New Feature
Plan Trip
Change Plan Trip icon to suitcase. Make more obvious. HIGH LOW
Iconography & Affordances
Make number icon bigger and make entire day active HIGH LOW
Add icons to days LOW HIGH
Make icons in details view smaller LOW LOW
Find new icon or other affordance for filtering
categories
HIGH MED
Add affordance to view items that are out of screen
display range
HIGH LOW
Add Open/Close list affordance. Move icon utility
further down into list
HIGH LOW
Views
Change the display of List View to horizontal Day View
and make each day larger. Swipe or pan to left or right
to view days of trip.
HIGH HIGH
Task Rework
Remove date range on all screens except for initial plan
screen
HIGH MED
Use FAB to change market views MED HIGH YES
Need to ad the behavior for Add Event button MED MED
Scheduling and Planning tasks need to be revisited HIGH HIGH
Work out 2 task flows for list making HIGH HIGH YES
Work out 2 task flows for filtering HIGH HIGH YES
Revisit archive action for list items. Long-press vs swipe.
Use FAB.
LOW HIGH YES
Other
Index, legend or hover for details view icons MED HIGH YES
Tutorial for novice user LOW HIGH YES
Recommendations
51. Reflection A Paris Flea Market Guide
- Interviewing users develops empathy and informs mental models
- Mental models (affinity diagram) informs information architecture.
- Information architecture informs interaction design (task flows).
- Task flows inform wireframes and prototypes.s
- Rapid prototyping is informative and time effecient.
- Design pattern languages, a trend toward universal design.
- Craft a MVP (Minimum Viable Prototype).
- Ideate, prototype, test. Then iterate.
- Still amazed at how much insight can be gained from testing!
52. References A Paris Flea Market Guide
Hall, Erika. “Just Enough Research.” A Book Apart (2013).
Kangas, E., & Kinnunen, T. (2005). Applying user-centered design to mobile application development.
Communications of the ACM, 48(7), 55-59.
Manthiou, Aikaterini, and Seonjeong Lee. “Measuring the Experience Economy and the Visitors Behavioral
Consequences: An Empirical Study on Veishea Event.” (2011).
Monk, Andrew, et al. “Funology: designing enjoyment.” CHI’02 Extended Abstracts on Human Factors in
Computing Systems. ACM, 2002.
Nudelman, G. (2014). $1 Prototype A Modern Approach to Mobile UX Design and Rapid Innovation. Design
Caffeine Publications.
Nudelman, G. (2013). Android design patterns: interaction design solutions for developers. John Wiley & Sons.
Pine, B. Joseph, and James H. Gilmore. “Welcome to the experience economy.” Harvard business review 76
(1998): 97-105.
Portigal, Steve. Interviewing users: how to uncover compelling insights. Rosenfeld Media, 2013.
Young, Indi. Mental models: aligning design strategy with human behavior. Rosenfeld Media, 2008.
