Featuring UX/UI and product design work.

1. UX/UI & PRODUCT DESIGNER
JOE SIOUFI
JOE SIOUFI | PORTFOLIO
Brooklyn, New York
1
Contents
2
3
16
32
About Me
1-800-Flowers.com
Fandango
RecoveryHub
inDiscover 42

2. JOE SIOUFI | PORTFOLIO
Through empathy and design, I use my
powers to solve usability problems in the
digital space.
Through my experience as both a designer
and researcher, I have developed the skills to
design, test and iterate desirable on digital
products. My background in behavioral
psychology not only allows me to grasp the
cognitive processes involved when using web
and mobile applications, but to also design
solutions through the lens of the user.
I turned to design because I wanted a more
creative, people-centric career, where the
challenges presented to me result an
improved experience for others. My favorite
tools are a dry-erase board and marker.
ABOUT ME
2

3. Goals:
•Increase the visibility of brand tabs
•Increase the visibility of brand
category descriptors
•Reorganize global navigation
elements for a simple and clean
design
•Create more multi-brand customers
and account conversions
CASE STUDY: 1-800-FLOWERS.COM
BRIEF
My team was asked to redesign the global navigation for the multi-brand
portal 1-800-Flowers.com, which features six different brands, in order to
increase the visibility of the brand tabs and simplify the overall design.
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 3

4. TOOLS
Photoshop Solidify Typeform
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 4

5. RESEARCH & DISCOVERY
COMPARATIVE ANALYSIS
The research process began by
analyzing the global navigation designs
of other multi-brand portals
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 5

6. My team and I also examined designs
of competing floral delivery sites for
secondary research
RESEARCH & DISCOVERY
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM
COMPETITIVE ANALYSIS
6

7. Name: Lizzy
Age: 49
Location: Wayne, PA
Occupation: High
School Guidance
Counselor
USER PERSONAS
Primary User Scenario
Lizzy’s niece is performing in a ballet in New
York City and the opening night is coming up.
Lizzy regrets that she cannot make it and wants
to send flowers and chocolate in lieu of her
attendance.
She has had an account with 1-800-
Flowers.com for a few years since she started
using it more often for birthdays, holidays and
other occasions.
Name: Michelle
Age: 33
Location: Clinton Hill, Brooklyn
Occupation: Media Manager,
Account Planning
Secondary User Scenario
The holiday season is approaching. Michelle wants to
send a basket of popcorn and other snacks to her client
who gives her the most business.
She has never shopped with 1-800-Flowers.com or any
of its brands but has heard of its services and wants to
give it a try.
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 7

8. DESIGN PROCESS
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 8

9. DESIGN PROCESS
For our initial sketches we did a design
studio: Each of us sketched multiple
versions of the same screen, discussed
them, sketched them again and then worked
together to make a sketch combining the
best features of each design.
DESIGN STUDIO
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 9

10. As the lead visual designer for my team, I came up with design iterations and created high-fidelity mockups
for our user tests. The iterations focused on nuances in color, copy and element placement.
DESIGN PROCESS
PHOTOSHOP MOCKUPS
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 10

11. USER TESTING
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 11

12. My team and I conducted a series of user tests, both A/B and multivariate, to test our design iterations.
USER TESTING
A/B AND MULTIVARIATE TESTS
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM
Descriptors above v. below v. icons
My Account v. Sign in v. Sign in/Register
Contact us v. Help v. Customer Service
12

13. The final redesign elements were based on both the average
time it took people to locate them and their feedback
“I THINK IT WAS VERY EASY, AND YOU
CAN SEE EVERYTHING YOU WANT.”
USER TESTING
USER FEEDBACK
“I FOUND IT VERY HELPFUL TO HAVE ONE TO TWO DESCRIPTIVE WORDS AT THE BOTTOM OF
EACH BRAND, ALLOWING ME TO UNDERSTAND WHAT THE PRIMARY PRODUCT WOULD BE.”
“THE FONT AND COLOR POPPED OUT
AND WERE EASILY NOTICEABLE.”
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 13

14. Brief
FINAL DESIGN
RECOMMENDATIONS
• Move category descriptions in the global navigation below the brand logos and change
their color from red to navy blue for greater readability
• Keep the inactive tabs grayed-out but bring color back to the logo and category
descriptors to increase visibility
• Change the wording of the “Customer Service” link to “Contact Us”
• Change the wording of the “International delivery” button to read “Ship to”
• Change the color of the “Store Locator” and “Contact Us” links so they pop out more
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 14

15. Brief
FINAL DESIGN
PITCH & RESULT
We pitched our design to our client and the CEO. It was then brought to a meeting where it
was put up against two other designs. Ours was chosen to be implemented.
CASE STUDY
JOE SIOUFI | 1-800-FLOWERS.COM 15

16. My team was asked to add new features to
the existing Fandango app to help expand
its market from movie tickets to include
tickets for concerts and local events.
The features we added were:
• Nearby event notifications
• Easy in-app ticket purchasing
• Digital pass storage and display
CASE STUDY: FANDANGO
BRIEF
CASE STUDY
JOE SIOUFI | FANDANGO 16

17. TOOLS
Flinto Sketch Typeform
CASE STUDY
JOE SIOUFI | FANDANGO 17

18. RESEARCH & DISCOVERY
USER SURVEY
We administered a survey about ticket purchasing habits
to concerts and events to over 130 people.
Through our results we found that
78% of people reported
that they find out about
concerts and events through
word of mouth, while 77%
reported that they find out
through social media
74% of people reported
that they use Ticketmaster to
purchase tickets, from which we
concluded that this is its biggest
competitor
38% of people preferred a
scannable e-ticket as their
delivery method, making it the
most popular choice
CASE STUDY
JOE SIOUFI | FANDANGO 18

19. RESEARCH & DISCOVERY
COMPETIVE & COMPARATIVE ANALYSIS
We analyzed existing competing apps in the concert and event
ticketing market, as well as apps that offer similar services.
Common features we identified were:
• The ability to favorite and follow artists &
events
• To search and sort through events using filters
• To enable location services and integrate
Facebook “likes” in order to generate a custom
list of recommended events
• A scannable e-ticket
CASE STUDY
JOE SIOUFI | FANDANGO 19

20. USER INTERVIEWS
We conducted a series of user interviews
and discovered the following trends
• Facebook is the most popular way to
share events
• Concerts are the most attended events
• People enjoy going to events with
friends and purchasing their tickets
together
CASE STUDY
JOE SIOUFI | FANDANGO 20

21. Despite the many ways Facebook is used to post third-party
events, the “share” button was the least utilized.
“WHO USES THE ‘SHARE’ BUTTON? THAT’S SO BASIC.”
People preferred to:
• Manually post the link and tag their friends in it
• Directly message their friends with the link
• Find the Facebook event page and send invites to their
friends
RESEARCH & DISCOVERY
FACEBOOK
CASE STUDY
JOE SIOUFI | FANDANGO 21

22. With the qualitative and
quantitative user research we
gathered, we compiled an affinity
diagram to inform our user
personas.
RESEARCH & DISCOVERY
AFFINITY DIAGRAM
CASE STUDY
JOE SIOUFI | FANDANGO 22

23. USER PERSONAS
Age:
24
Location:
Bushwick
Occupation: Communications
Assistant at a nonprofit
organization based in NYC
Education: BA in Communications
from Boston University
Tech empathy:
Medium
Likes/hobbies/activities: “Exploring” the
city with her friends; concerts; food
events/ festivals; advocating for gender
equality; contemporary art museums;
yoga; photography
Music:
Real Estate; Arcade Fire; SBTRKT;
Disclosure; Panda Bear; Rihanna; Kanye
West
Social Media:
Facebook; Instagram;
Tumblr; Snapchat; Tinder
PRIMARY USER: JESS RIVERS
Goals
• Know what’s happening near
her
• Coordinate events with others
• Find cheap tickets
• Convenient ticketing
Features Needed
• Easy way to browse by event
type
• Easy way to scale events by
price
• Scannable E-ticket
• Easy Social Media Sharing
Pain Points
• She has no printer
• The bigger concerts she likes often
sell out
• Does not have a lot of disposable $
CASE STUDY
JOE SIOUFI | FANDANGO 23

24. USER PERSONAS
Age: 60
Location: Scarsdale, NY
Occupation: Account Manager
selling ad space for a local
newspaper
Education: BS in Management &
Business from Ithaca College
Tech empathy: High
Likes/hobbies/activities: Going to the
movies with his girlfriend; going out to
eat and drink with friends; bowling
Music: Bob Dylan; Grateful Dead; Allman
Brothers
Social Media: Facebook
SECONDARY USER: JACK BILLSON
Goals
• Provide a simple and easy way
to purchase process
• System to track events
• Store e-tickets
Features Needed
• Minimal steps in selection and
checkout process
• Social media sharing of
purchases
• Alerts from favorited
performers
Pain Points
• Waiting in line
• Difficult navigation when looking for
most needed features
• Server overload when popular tickets
go on sale
CASE STUDY
JOE SIOUFI | FANDANGO 24

25. DESIGN PROCESS
For our initial sketches we did a design
studio: Each of us sketched multiple
versions of the same screen, discussed
them, sketched them again and then worked
together to make a sketch combining the
best features of each design.
DESIGN STUDIO
CASE STUDY
JOE SIOUFI | FANDANGO 25

26. Brief
Home Screen
A trend we discovered in our first
round of user testing was that
everybody went straight to the
“view all categories” button.
We iterated our design by adding a categories button to
the navigation bar. That way the user could access the
master category list from every screen and we could use
that space on the home screen for more specific content.
DESIGN PROCESS
WIREFRAMES & ITERATIONS
CASE STUDY
JOE SIOUFI | FANDANGO 26

27. Concert Listing Screen
For users who know already know what they are looking for, we added a
“buy now” button to streamline the purchasing process.
DESIGN PROCESS
WIREFRAMES & ITERATIONS
CASE STUDY
JOE SIOUFI | FANDANGO 27

28. PROTOTYPE
CASE STUDY
JOE SIOUFI | FANDANGO 28

29. E-Ticket Storage
“I LIKE TO GET MY
TICKETS RIGHT ON MY
IPHONE AND SCAN IT AT
THE DOOR.”
The existing Fandango app featured in-app
ticket storage, however users found it hard to
find. We surfaced this feature by adding it to the
navigation bar so that e-tickets could be
accessed from any screen
PROTOTYPE
USER TESTING
CASE STUDY
JOE SIOUFI | FANDANGO 29

30. Since we found that people prefer to
manually copy and paste links to share
them with their friends, we made sure to
add an option to conveniently do so
“I COPIED AND PASTED
THE LINK TO MY FRIEND’S
WALL AND THEN TAGGED
OTHER FRIENDS THAT I
WANTED TO COME.”
PROTOTYPE
USER TESTING
Share Options
CASE STUDY
JOE SIOUFI | FANDANGO 30

31. Fandango’s current Fanalert system allows
users to track unreleased movies and then
notifies them when the tickets go on sale
We expanded on this system by allowing users
to also set Fanalerts for their favorite artists
and events to not only notify them when they
are happening but to also include exclusive
pre-sales and notifications for when an event
is running low on tickets
PROTOTYPE
ADDITIONAL FEATURES
Fanalerts
CASE STUDY
JOE SIOUFI | FANDANGO 31

32. Goals:
•Provide a quick and simple way for
survivors to find the help they need
•Connect workers and volunteers to
relief opportunities
•Facilitate communication between
relief organizations, workers and
survivors
CASE STUDY: RECOVERYHUB
BRIEF
To provide an online platform that enables community-led disaster relief by
connecting survivors, relief organizations and relief workers.
CASE STUDY
JOE SIOUFI | RECOVERYHUB 32

33. RESEARCH & DISCOVERY
CASE STUDY
JOE SIOUFI | RECOVERYHUB
PRIMARY ANALYSIS
Our design research began
by analyzing the websites
of other relief organizations
33

34. RESEARCH & DISCOVERY
SECONDARY ANALYSIS
CASE STUDY
JOE SIOUFI | RECOVERYHUB
Social media sites that function in a
similar fashion were also examined
34

35. USE CASES
CASE STUDY
JOE SIOUFI | RECOVERYHUB
As a team, we brainstormed the
different types and what their
goals would be when using the site
User categories
•Survivors
•Community/spiritual leaders
•Relief staff/volunteers
•Relief organizations
•Small businesses
35

36. DESIGN PROCESS
CASE STUDY
JOE SIOUFI | RECOVERYHUB
I was given lo-fidelity wireframes made in Google Draw, which I
made iterations of in Photoshop, eventually bringing them to high-
fidelity mockups
36

37. DESIGN PROCESS
CASE STUDY
JOE SIOUFI | RECOVERYHUB 37

38. CASE STUDY
JOE SIOUFI | RECOVERYHUB
I loaded our screens into InVision to make a
clickable prototype and conduct user testing
First users were tested on a
general understanding of the
site
Users were then prompted
with scenarios so we could
observe where they would
click to find what they were
looking for
USER TESTING
PROTOTYPE
38

39. CASE STUDY
JOE SIOUFI | RECOVERYHUB
USER TESTING
USER INSIGHTS
“It should be easier to find
volunteer opportunities and
vice versa”
“I like how it shows
dates and affected
states for disasters”
“I woudn’t look for help
filing a FEMA claim under
‘find help’”
“‘Events’ probably
includes events like
community meetings that
directly affect the
recovery process”
“Seems like a way for people
to reach out to those in their
community who need help”
39

40. CASE STUDY
JOE SIOUFI | RECOVERYHUB
USER TESTING
DESIGN ITERATIONS
The biggest usability issue we found with our design was
that it was not obvious where to go to find help or volunteer
To address the issue, we surfaced the help
options by giving them their own sidebar
on the user’s dashboard, using icons and
the accent color for increased visibility
40

41. CASE STUDY
JOE SIOUFI | RECOVERYHUB
USER TESTING
DESIGN ITERATIONS
I designed a sticky navigation bar that
appears when the user scrolls below the fold
We also added a collapsible sidebar
menu for the user’s groups, events and
content so this information could
become more accessible
41

42. CASE STUDY: INDISCOVER
BRIEF
inDiscover [indie • scover] is a mobile app
designed to help people discover independent
artists based on the genres they are interested in.
The user enters “tags” that serve as filters and the
music player streams songs by artists who are
associated with those tags.
CASE STUDY
JOE SIOUFI | INDISCOVER 42
Features:
• Ability to filter by “tags” (i.e. genres)
• Stores list of “liked” songs
• Directs you to more information on the artists
• Ability to save and toggle between tag lists

43. HOW IT WORKS
ANNOTATIONS
CASE STUDY
JOE SIOUFI | INDISCOVER 43
Screen slides left to
list of “liked songs”
Screen slides right to
preferences menu
Likes artist, double-tap
to play next song
Likes artist and
plays next song
Dislikes artist and
plays next song
Also dislikes artist
and plays next song
Music player
control panel
HOME SCREEN

44. HOW IT WORKS
ANNOTATIONS
CASE STUDY
JOE SIOUFI | INDISCOVER 44
Back to previous screen
Hold tags down to
show “X”, press
“X” to delete
Create new tag list
Text field to enter
genre tags that filter
music stream
Goes back to
home screen
PREFERENCES
Drop down menu
to toggle between
saved tag lists
Saves tag list

45. HOW IT WORKS
ANNOTATIONS
CASE STUDY
JOE SIOUFI | INDISCOVER 45
Back home screen
Text field to search
through liked artists
“LIKED” ARTISTS
Deletes song from list
Goes to external site
where the song was
taken from

46. DESIGN RESEARCH
COMPETIVE & COMPARATIVE ANALYSIS
CASE STUDY
JOE SIOUFI | INDISCOVER 46
• Content
• Interface
• App flow
• Interface
• Content
• Interface
The designs of the Pandora, Bandcamp and Tinder apps
were researched for content, interface and app flows.

47. DESIGN PROCESS
ITERATIONS: SKETCHES, WIREFRAMES, MOCKUPS
CASE STUDY
JOE SIOUFI | INDISCOVER 47

48. DESIGN PROCESS
ITERATIONS: SKETCHES, WIREFRAMES, MOCKUPS
CASE STUDY
JOE SIOUFI | INDISCOVER 48

49. CASE STUDY
JOE SIOUFI | INDISCOVER 49
INDISCOVER
NEXT STEPS
Additional Features:
• Search by genre (in addition to filtering)
• Create user and artist profiles
• Share tag lists in app and/or via social media

50. JOE SIOUFI | BEAT.BOX 50
BEAT.BOX
BRIEF
To design a landing page
and mobile interface for
a music discovery app.

51. JOE SIOUFI | BEAT.BOX
MOBILE PLAYER INTERFACE
51

52. JOE SIOUFI | BEAT.BOX
MOBILE SITE
52