Rik Sansone UX/UI Portfolio 2022. You'll see how I worked through and found solutions for a variety of projects on mobile and web.

1. RiK Sansone
Lead UX/UI Designer

2. Research first, involving Users
and Stakeholders.
Create and test wireframes.
Work with Developers for
feasibility of solutions.
Implement UI and
update design systems.
When needed, I facilitate
design workshops that include
Development, Marketing,
Stakeholders and other UX/UI
Designers to ensure vision
alignment and buy-in.
About Me
Sketch • Figma • Agile • sAfe Agile
InVision • Leadership
UX Team Leadership
Creative Vision • Public Speaking
User Testing & Interviews
Google Docs • Keynote
Presentations • Heuristics
Card Sorting • Trello
Adobe XD & CC • Balsamiq
Omnigraffle • Jira
Final Cut Pro • Ideation Leadership
Painting, Drawing, Illustration
Office • Video Editing
Motion • Animation
UX Leader
Former actor and comic book publisher with solid
Presentation and Illustration skills.
Process Skills

3. “…an effective leader…in charge of the vendors’ UI
resources…increased their productivity tenfold.”
Kelly Hoover,
Associate Director of Engineering Quality at Pratt & Whitney (Retired)
"Rik thinks on a different level... it's a gift.”
- Stacey Sarris
Doctor of Science, Information Architecture and Interaction Design, University Of Baltimore
About Me
“…brings a wealth of knowledge… a valuable
asset to any team.”
- John Belancik III
Creative Director and Senior UX/UI Product Designer (Edible Arrangements)

4. • Inquire – Mobile & Web Survey App
• ESPN: Media Distribution Website
• GO! Delivery App
• Communal Business Mobile App
Projects You’ll See:

5. Sports Media Distribution
• Pages have too much scrolling.
• Too many clicks to find content and
info about content.
• Schedule/Calendar improvements
for readability.
• Front page video is distracting.
• What properties are available and
when can the client buy them?
Website where global TV stations
buy sports content to broadcast
Conceptualization
User interviews
Analyze user click through’s
Analyze Google Analytics
Wireframes
Final Visual design
Created interface
Wordpress specs
Role
Duration
Sketch
Whiteboard
Solidify
Photoshop
Keynote
Google Docs
Numbers
Tools
3 months

6. Seemingly endless
scrolling,
Several clicks to
see
content details.
“News”
from
2014!
Media Distribution: Analysis of current site

7. Very slow
“click to
scroll,,"
calendar not
interactive,
bad on
mobile.
Property page
adds even more
clicks to get
broadcast details,
more scrolling,
and
Hard to read fonts
sizes, colors.
Media Distribution: Analysis of current site

8. Google Analytics:
• Users would go the site looking for
specific properties based on current
events.
• Significant increase in searches for
“Soccer” during the World Cup and
“Muhammad Ali” when he passed away.
Stakeholder Wish List:
• Keep big video on home page
• Search bar prominent
• Treat each property equally
• Interactive calendar
• Make it like competitor media sites
Interviewed Sales staff re: client usage / frustrations:
• Video in background is distracting.
• See sales stats… why should I buy from you?
• What are the upcoming sports seasons?
• Can’t find properties they are looking for.
• They need to know : What content, When available, How it’s delivered.
Media Distribution: Analytics & Interviews

9. Re-thinking the Home and Calendar pages
User flow
Media Distribution: Sketches

10. Solutions
• Top properties on front page only.
• Mega-menu for other properties.
• Added “trending” area on main
page to leverage properties
related to current events.
• Reconfigured Wordpress plugins
for calendar.
• Make calendar interactive and
configurable.
• Replaced front page video with
static large dynamic image.

11. Media Distribution: Homepage solutions
Convinced stakeholders using research results that video was distracting.
Replaced with rotating static background images.
NEW “featured”
section to position
up-to-date properties
Current and upcoming
sports seasons/events
are now prominent

12. Media Distribution: Homepage solutions
Mega-menu reveals
more properties,
sub-properties

13. Media Distribution: Calendar solutions
Broadcast Info now displays
on the calendar page.
Scrollable calendar.
Select event for details
Focus on just one month or property
Calendar and
info downloads
Trophy icon denotes playoffs
or Championship series

14. “Inquire” Mobile and
Desktop survey app
• Users need a variety of questions:
• (multiple choice, ratings, etc.)
• Currently no mobile version.
• Currently, no logic based-questions.
• Development team hours being used to
create form.
• Little control over how it’s made.
• Too long for dev to complete.
• No easy way to read result data quickly.
Survey creation tool
All UX & UI
Conceptualization
User Interviews
Comparative analysis
Observational
Inquiries
Wireframes
Final visual design
desktop & mobile
Duration
Sketch
InVision
Whiteboard
Keynote
Pages
QuickTime
Numbers
Role
Tools
2 months

15. “Inquire” UX: Competitive Analysis
Survey Monkey:
• Pre-made questions.
• Logic features, customization.
• Re-useable community questions
• NPS, Ranking, File uploads.
Poll Daddy:
• IP security.
• A/B Tests, Skip page logic.
• Stats, export to SPSS.
• Auto-scoring tests.
Free Online Survey:
• Easy to use templates.
• Large icons / text.
• Add images.
• Headers, sub-headers, etc.
Common to all the above:
• Simple drag and drop functionality.
• Save questions for re-use.
• Allow video and images.
• Generate CSV, Excel, PDF reports.

16. UX “Inquire” - Observational Inquiries via wireframes
Pain Point:
Comments were
hard to find.
Pain Point:
Could not see
who posted the
comment
“Seems easy - especially on mobile…”
“Awesome to see percentages as they come in.”
Holidays 2017
Active
?
Sed libero lectus, egestas sit amet
maximus eu, venenatis in erat.
Curabitur congue, justo ut tincidunt
lacinia, turpis risus tincidunt neque, ut
imperdiet tellus sem non neque. Etiam
eleifend vitae eros ut faucibus. Sed
libero lectus, egestas sit amet maximus
eu, venenatis in erat. Curabitur congue,
justo ut tincidunt lacinia, turpis risus
tincidunt neque, ut imperdiet tellus sem
non neque. Etiam eleifend vitae eros ut
faucibus.

17. Solutions
• Desktop version on corporate site.
• Variety of drag and drop question
modules.
• WYSIWYG desktop creator for
mobile.
• View results in real time on
mobile & web.
• Data displayed as charts, graphs,
word clouds.
• Management and creation of
inquiries:
• Time, Stores engaged,
messaging, automated end
dates.

18. UI :“Inquire” Visual Design
Create New Questionnaire
Users can customize start and end dates/times, location where the survey is seen, response requirements,
or navigate to finished, drafted, schedules or open questionnaires.

19. Manage questions
Drag and drop question modules in the desktop WYSIWYG, or tap on the question module to select
and add in the mobile version.
UI :“Inquire”

20. View Data
Users can choose to view results in pie or bar charts, graphs, and word clouds.
Solutions: Larger text, link color, show # of comments, “more” on bottom right.
9%
11%
12%
31%
38%
Inventory
Walk-in's
Staff
Volume
Tech
0 12.5 25 37.5 50
Excellent
Very good
Fair
Poor
10
20
30
40
50
60
No Yes
0 12.5 25 37.5 50
Excellent
Very good
Fair
Poor
9%
11%
12%
31%
38%
Inventory
Walk-in's
Staff
Volume
Tech
10
20
30
40
50
60
No Yes
UI :“Inquire”

21. • Stakeholder goals
• Comparative/Competitive analysis
• Sketches
• Mockups & concepts
• UI & Feature improvements
GO!
iOS
Android/GooglePlay
Project:
Delivery App

22. Comparative/Competitive Analysis
Results persuaded Stakeholders to add features to be competitive.
Additionally, user interviews revealed several feature requests.
• Track drivers in real time
• Assign & sort deliveries
• Optimize routes, Logs
• Customer alerts
• Manager dashboard (Desktop)
• Import CSV, Excel
• Logo Branding
• Signatures
• COD
• Delivery notes/instructions
Both of us Just DeTrack
• Barcode scanner/print barcode
• Calendar view
• Sort by nearest
• Auto-reschedule undelivered
to following day
• Link attachments - docs, photos
• Customize delivery rejection reasons
• Re-attempt
• Address book integration
• 256-bit integration
• Mass POD (sign once for many)
• Rate the customer
• Branding color scheme
• “Grab” and customize
delivery alert to drivers
• POS Integration
Just Naranga
GO! Delivery App - iOS & Android/GooglePlay
Project:

23. • Update current limited internal delivery app
• Target: The App store - target market is all
delivery based businesses
• Map view, optimized multiple delivery routes
• Take photos for proof of delivery
• Update UI and branding
• Managers need visibility into drivers’ routes as a
groups and individuals
• Driver alerts for new orders
• Customer signature upon delivery
GO! Delivery App - iOS & Android/GooglePlay
Project:

24. Driver User flow & desired feature list.
Established delivery
driver flow.
Combined features
revealed during user
interviews and
stakeholder needs.
GO! Delivery App - iOS & Android/GooglePlay
Project:

25. UI & Branding concepts
GO! Delivery App - iOS & Android/GooglePlay
Project:

26. Final UI Android - collaboration with offshore UI team
Stakeholders
preferred single
unified color scheme.
Layout and
experience flows
all retained
GO! Delivery App - iOS & Android/GooglePlay
Project:

27. App Store reviews
GO! Delivery App - iOS & Android/GooglePlay
Project:

28. Problem:
• No way to centralize
communication and help between
owners of a similar business.
• Important corporate info should be
• Only a part of the conversation.
• Allow users to quickly post and
comment.
Collective
Project:
Conceptualization
User interviews
Wireframes
Final Visual design
Duration
Adobe XD
InVision
Whiteboard
Role
Tools
13 Days

29. Stakeholder Wish List:
Centralized place for ideas that business owners have
Business owners can help each other
Separate into specific categories
Corporate monitoring to avoid a “free-for-all”
Corporate posts to help and guide, but with limited intrusion
Ability to post pictures
Communal exchange of ideas

30. Home Post
Communal exchange of ideas
Easy to use
and focused
mobile app.
Use familiar
social media
practices.
Targeted
and limited
to the
sharing of
ideas.

31. Conversation Reply
Communal exchange of ideas

32. RiK Sansone
Lead UX/UI Designer
e-commerce projects

33. Projects You’ll See:
• Add-on and pricing upfront: Mobile App
• Case Study: Mobile Market
• B2B Ordering Mobile App

34. Price upfront and Add-ons
Two problems needed solving:
1) Add-on items needed an increase in sales
2) Sales drop-off/abandonment at the cart screen
• Marketing team wanted to boost add-on
items sales.
• Previous website refurb resulted in lower
conversion rate.
• Final price total was hidden until the cart
screen; “sticker shock” was a considerable
factor in drop-off.

35. I created easy to
read buttons for
each add-on,
keeping scrolling to
a bare minimum. Cart # updates
when new
items added
Price visible
through the rest of
the order, so
there’s no sticker
shock at the end.

36. Background & Requirements
User Interviews
Prototype Tests & Iterations
Next Steps
Case Study:
Mobile Marketplace
Case Study

37. Case Study
Mobile Market - for store owners to order supplies.
What:
• Mobile web version needed for to order on-the-go.
Who:
• Sole UX/UI Designer working with a Product
Manager.
When:
• Generous timeline, limited Development resources
How:
• User interviews with stakeholders, store owners and
suppliers.
• Comparative analysis with current e-commerce
trends (2016-2017)

38. Stakeholder Requirements
• Improve Search results
• Fewer clicks
• Suggestive Selling
• Mobile
• Suppliers can’t delete products
• Add payment options: credit
card, check, Amazon Pay,
deferred payments

39. • Interviewed Internal and
external supply chain
members, vendors and
store owners.
• Private questionnaire and
conversations.
User Interview Key findings:
• Searched items do not appear in right categories.
• Mobile version to manage orders from anywhere.
• Non-ADA compliance.
• Need to switch stores for multi store owners
• “Communication” is buried.
• Auto-Ship regularly ordered items
#1 Common quote:
“Like Amazon”

40. Why were the search results so poor?
Answer: inadequate tags/metadata.
• Resources to re-tag were not
forthcoming.
• This necessitated different approaches
to provide the user with to define what
they're looking for. This drove the main
design.
• Sketches included on left.

41. Predictive
search text
allowed for
easy access
to product
pages
Improved with
Filtering
by Category,
Supplier,
or Occasion.
Search
Recent carts &
featured items,
and current deals
upfront.
Suggestive
Selling
Case Study: Mobile Marketplace

42. Sub Category page
• Alphabetical filtering
• Swipe left to browse products
Categories
Ordering page
• Suggestive Selling opportunity
• Quick link to communicate with vendor
Case Study: Mobile Marketplace

43. Users could easily swap between
their stores a with drop-down.
Communications
Red alert on profile icon, which would
take user to a categorized inbox.
Change Store
Case Study: Mobile Marketplace

44. Auto-Ship
Placed at bottom
of he cart page
Users could set
frequency and
name of auto-ship
for any cart.
Amazon payment
options enabled.
Edit, remove or mark
product out of stock
Vendor
Case Study: Mobile Marketplace

45. “Cool! Can I see it again?”
“Pre3y darn intui7ve”.
“Smooth…
I didn't have to type”
Prototype testing
Task given:
Locate items using new filtering
• Store owners and vendors from
across the United States.
• Use of the pre-set sections
(Categories, Occasions, Suppliers)
was varied, Proving that the
inclusion of all were useful.

46. Next Steps
Convince
management to
allot more
resources to better
tag items, and
improve search
results.
Allow for vendors
to tag their own
products so search
results are more
accurate.
A/B Test for
Category/
Occasion
nomenclature.
Design for a
desktop and
responsive
tablet.

47. Product ordering is confusing; not fully
integrated, nor timely
Store:
Mobile Ordering
Choose a local vendor
Compare prices
Vendors:
Manage products and service areas
Upload spreadsheets
Alerts
Corporate:
Manage all products
Solve disputes
Approve new vendor applications
Product updates
Rebates
Sprout
Project:
All UX & UI
Conceptualization
User interviews
Comparative analysis
Wireframes
Final visual design
desktop & mobile
4 months
Sketch
InVision
Whiteboard
Keynote
Pages
Pencil & Paper

48. • 12 yrs old
• Expensive subscription
• Confusing, dated, non-ADA interface
• Not fully integrated with the 3 sides of the business:
Project: B2B Product ordering, tracking, shipping
Vendors:
Manage products and service areas
Upload spreadsheets
Create Alerts
Store:
Mobile Ordering
Choose local vendor
Compare prices
Corporate:
Manage all products
Solve disputes
Approve vendor applications, product
updates & rebates
Existing website:
Needs:

49. Project: B2B Product ordering, tracking, shipping
• Desktop and Tablet versions for Vendors and Corporate site
• Incorporated almost all features requested from store owners, corporate teams and vendors
• Direct internal direct communication and alerts , Local vendor choices, submissions
• CSV export/imports, Store has additional mobile phone view
• Clean “Material Design” based designs - Branded with colors for each aspect
Solutions:
Vendors:
Manage products and service areas
Upload spreadsheets
Create Alerts
Store:
Mobile Ordering
Choose local vendor
Compare prices
Corporate:
Manage all products
Solve disputes
Approve vendor applications, product
updates & rebates
Needs:

50. Store Level: Original Desktop/Tablet Design
B2B Product ordering, tracking, shipping
Order Products, compare weekly
prices, manage orders: accept/
reject

51. Store Level: Original Desktop/Tablet Design
Manage account, create reporting graphs/charts.
Client and users needed additional functionality for choosing vendors, more account info, and CSV integration.
B2B Product ordering, tracking, shipping
Store Level: Original Desktop/Tablet Design
Order Products, compare weekly
prices, manage orders: accept/
reject

52. Store Level Mobile
Login Submit new vendor Shop Compare prices
B2B Product ordering, tracking, shipping

53. Order History Reject Product Default Payments Communications
B2B Product ordering, tracking, shipping
Store Level Mobile

54. B2B Product ordering, tracking, shipping
Dashboard with live pricing info.
Manage submitted vendor
pricing and products, with
filtering and CSV export/import.
Corporate Level - Tablet/Desktop

55. B2B Product ordering, tracking, shipping
Manage vendor info, requirements,
service areas, payment settings,
contacts, documents, and more.
See and track all orders from
stores to vendors.
Corporate Level - Tablet/Desktop

56. Corporate Level - Tablet/Desktop
B2B Product ordering, tracking, shipping
Manage global product list;
edit details for product
options and vendors for
products.

57. B2B Product ordering, tracking, shipping
From here, corporate Supply
Chain staff can monitor alerts
and vendor/store
communications to better
resolve possible conflicts.
Corporate Level - Tablet/Desktop

58. B2B Product ordering, tracking, shipping
When vendor resigners they must
provide information:
• Service areas
• Delivery windows
• Payment settings
• Document uploads, and more.
Vendor Level - Tablet/Desktop

59. B2B Product ordering, tracking, shipping
After corporate accepts them, the
vendor can manage their info in
settings:
• Delivery schedule
• Store hours
• Payment options and more
Vendor Level - Tablet/Desktop

60. B2B Product ordering, tracking, shipping
Vendor can also manage their
products.
• Pricing
• Split pricing
• Costs and codes
They can also export as CSV, add
notes, and see deadlines.
Vendor Level - Tablet/Desktop

61. Thank you!
riksansone@icloud.com
718-683-6451
! linkedin.com/in/riksansone
" medium.com/@riksansone