The design phase is where design-led solutions are developed, .... that price tag, hmmâ ... How might we integrate ban
Marco Angeles
Design Thinking & Mobile UX
Introductions Design Process in Action Product Design
in Hackathons Done in 54hrs or less
Using design to solve problems
and create value for your business and its audience.
Your Business’
Goals
UX
Your Users’ Needs
How might we create value for partners, customers, or clients?
Iterations
Discover
Define
Design
Tests
Seraphm approaches challenges with a design process.
Deliver
Discover
Tools & Methods
Empathy Mapping
Customer Journey Mapping
User & Stakeholder Interviews
The discovery phase marks the start of the project. This consultative phase begins with an initial idea or inspiration that acquaints Seraphm about the vision, potential users, competitors, and the industry landscape. User needs are identified.
Initial User Testing
Define
Tools & Methods
UX Analysis
Data Synthesis
User Personas
In the definition phase, user needs are synthesized and aligned with business objectives, creating a clear brief that frames the design challenge.
Feature
Prioritization
Design
Tools & Methods
Ideation Workshop
User Flows
Information
Architecture
The design phase is where design-led solutions are developed, prototyped, iterated and tested with the clients’ collaborative efforts.
Wireframing and Prototyping
Deliver
Tools & Methods
Task Scenarios and User Testing
Mockups
High Fidelity Prototyping
The delivery phase is the stage wherein the resulting product or service is finalized and communicated to the client or development team.
Assets Handover and Documentation
Design Process in Action Travel Planning Mobile Banking
How might we improve backpackers’ experience while engaging travel businesses? Extended, immersive product design project
RightFoot is a two-sided startup idea that directly connects backpackers and travel businesses.
PROJECT: PRODUCT MANAGEMENT
User Persona
Dave is a backpacker fresh out of Uni. He’s eager to travel but has limited finances. Very sociable and tech savvy, he relies on the internet and word-of-mouth in finding places of interests.
User Research
Immersive user research while traveling, living in Australian hostels, and talking to backpackers. Target users were found in co-living spaces, youth pubs, booking establishments and walking tours or similar activities. Main assumptions: • Travelers use apps or internet for planning trips • They have data-enabled devices • Backpackers actually plan their trips What the Get-Out-The-Building exercise revealed: • They travel cheaply and are very money conscious • They won’t have roaming data but hostels have wifi • Backpackers make friends and get recommendations
from hostels and people • They don’t have rigid schedules and don’t mind to wander • One can ask open-ended questions and make use of observation skills to receive raw insights*
Business Model Canvas
Key Partners
Tour companies Other travel related businesses i.e hostels Food and Beverage establishments Travel Bloggers Sites like Yelp, TripAdvisor
Key Activities
Customer
Development
Value Proposition
Customer Relationships
Customer Segments
Enjoy value travel without hassles
Direct
Backpackers/ Travelers
Partner Onboarding Marketing Product Development Usage Analysis Key Resources
Offline itinerary solution
Data Scraping
Travel Businesses Community
Acquire and connect with customers digitally
Key People Technology/Algorithm
Automated
Channels
App Store/Playstore Create and manage offers in one platform
Social Media/SEM Travel Blogging Sites Travel Expos
Cost Structures
Revenue Streams
Freemium (with relevant ads)
Paid relevant ads
Paid Subscription (no ads)
Commission from bookings and checkins
Paid version (no ads)
Tie-ups with travel businesses
Featured listings
User Flow
Illustrating core functions of RightFoot App using a user flow.
This path focuses on building a journey, starting with search.
Wireframes
As a backpacker, I would like to create
and preview a journey on my mobile so that I can have it handy when I go offline.
This set of wireframes detail key screens and key actions for Dave.
Mockups RightFoot App
F A
C
E
A.
User starts by searching destinations
B.
Space for featured partner listings
C.
Toggles Summary List and Grid View
D.
Results feed displays travel item listings; tapping links to details page
E.
B
Swiping left on a travel item reveals quick actions: Add, Save and Share
G
F.
D
Filter shortcut calls the filter page here users can modify search criteria
G.
When users tap and hold on category icons, they get selects
H.
write-ups, ratings, pricing and savings
L
I.
Add to Journey pops up a note and adds the item to the current journey
J N
H
J.
On Preview, tab for Map and List View
K.
Map View of the journey with numbered
K
itinerary items and tooltip summaries
M I
Travel item detail page displays images,
O
L.
Toggles Save function
M.
Quick summary of journey
N.
Toggles items on and off (List View)
O.
Button to book a journey and proceed
to payment (if any)
Clickable Prototype using JustinMind v bit.ly/RightFoot-Prototype
Mockups A E
G
RightFoot Partners App
Being a two-sided model, travel business partners were considered in the project. RightFoot Partners is a business app that can create offers and manage customer satisfactions within the RightFoot ecosystem.
H
B D
F
C
I
J
A.
Menu tray for all content
B.
New booking alerts
C.
Booking and app activity analytics
D.
New reviews alerts
E.
Tabs for Dashboard and Bookings
F.
Booking comments and direct-tocustomer communication functions
L K M
N O
G.
Persistent quick-add for creating offers
H.
Create Offer page
I.
Ticking this creates a featured listing
J.
Button to preview created offer
K.
Current listing travel item, like to preview
L.
Tabs for Listings and Reviews
M.
Quick summary of a review with ratings
N.
Travel item details containing summary
O.
Edit button edits the travel item offer
Clickable Prototype using JustinMind v bit.ly/RFpartners-prototype
More information on Medium http://bit.ly/uxnomad-rightfoot Role UX Designer | Product Manager
How might we integrate banking services in a messaging app? Mock 18hr UX design exercise
Empathy Mapping What is she thinking? What is she feeling? “Beautiful piece, but that price tag, hmm”
“Free shipping and returns means I can try them all!”
There’s a ticket sale every tuesday! Their customer service made people wait
Excited about new trends in tech and e-commerce
Dreads customer services and worried when placed the wrong order
“I wonder if they have my color?”
What does she hears?
Shiny and nice merchandise
on social media
What does she sees?
“Score!” Pins merch items on Pinterest “I got this online :)”
“Oh nice! Looks pretty.”
Pains Multi-factor authentication
There’s always new technology to try Frequents other apps like Carousell
Rants on
social media
Likes/Share deals and promotion
What does she Say and Do?
Returning online
purchases
Entering credit card details
Shiny and nice merchandise
on social media
Shopping is therapeutic
Chatbots will replace a lot of jobs Great deals
It’s convenient, but is it safe and secure?
Friends showing off purchases and holidays
Clicks on items that interests her
Gains Easier online transactions
Peace of mind
Improved social proof Better relationships with brands
Reframing the Problem How might we integrate banking services in a messaging app? Opposite: HMW integrate messaging into banking services?
HMW make messaging the central part of banking? Go for adjectives: HMW make banking services social? Interactive? Question an assumption: HMW integrate banking into all aspects of digital life of the customer? Create an analogy: HWM make banking services like a chatbot? Change of POV: HWM make banks attractive to the messaging demographic? Break POV into pieces: HWM might we make banking services more hip? More modern?
Ideation - Quick exercise to sketch ideas
AI Chatbot to handle all transactions and bank services
IoT and Beacons pushing alerts
Immersive VR Experience for ecommerce Citi Social Platform
SMS and Beacons alerts
Citi payment API for merch chat UX
Voice powered chat interface and transactions
Citi Marketplace chat to aggregate common marketplaces
Proposals After reframing the problem, I realize that the trend is not that people are using messaging apps. Rather, what about these messaging apps that attracts users to them? It’s the social aspect and being easily accessible/handy. Hence, I think there are 3 ways to take advantage of this user behaviour.
1
2
3
Design the bank services app to be more social and delightful
to use for the customer.
Create an API that will make
Citi payments accessible in existing messaging apps the users are already using.
Create a Citibank chatbot
that lives within any messaging app that would help customers handle any transactions via chat.
This solution would require Citi to This solution is closest to the given integrate more social features within brief. It allows Citi to be omnipresent its existing app. Or it could be a totally regardless of the channel the users are different social app geared towards using. This may be technically easier to building an exclusive community with implement, by simply being part of the like-minded Citi customers, and existing user journey. We can maximize attract new customers in the process. native features of a device like the touch pad for authentication.
In this solution, all e-commerce transactions and digital banking will be done within a chat interface and an intelligent Citibank customer service chatbot will assist the customer. Social features like sending/sharing to friends can be done over chat as well.
Proposal Prioritization
High Impact
3
2
1
Given that Proposal 2 would deal with APIs and existing messaging platforms, we can try it out first and see customer reception on chat transactions. When there’s enough learnings and traction, Citi can develop its own chatbot that can handle any bank services and online transactions for its customers (Proposal 3).
Difficult to implement
Easy to implement
Low Impact
User Scenario - Quick exercise to sketch a use case (e-commerce)
User Journey - Facebook Messenger Transaction Activity Phase
Merchandise
item on FB post
Merchant bot chats with customer
Promo/new items are pushed via chat
Customer decides to buy
Customer links Citi with Messenger
Set up delivery and confirmation
Customer
Actions
Likes, shares, or comments on post
Open Messenger and authorises merchant
Asks details about the item instead of ignoring.
Customer clicks buy
Customer links Citi if this is the first time
Confirms suggested shipping address linked to Citi account, or edits it. Finish confirmation with thumb print.
Touchpoints
Facebook or
E-Commerce websites with Social functions
FB Messenger
FB Messenger
FB Messenger
FB Messenger Native Camera. Touch pad
FB Messenger/ Email
“This is a bit odd and creepy, but I like this brand”
“Oh, I’ve been looking at this for awhile.”
“I really like this and the price is great!”
“What’s this? Better read through. But this looks super convenient.”
Payment journey starts alá ecommerce
FB Messenger calls on Citi payments API and integrates. Secured Citi-Messenger authentication.
Thoughts
“Nice! I would like that for myself.”
“That wasn’t so bad! And hey I can authenticate with my thumb. ‘Can’t wait for my item :) “
+ Emotions
Backend Processes
FB Pixel helps merchant to remember potential customer
Authentication to allow merchant to transact/chat with customer in the future
Push notifications to relevant customers
Merchant notified. Confirmation email sent. Delivery countdown kicks in. Settings remembered for Messenger. Item preferences forwarded to merchant/s.
This User Journey maps the assumed steps a customer would go through when completing a transaction via FB Messenger. This is the first transaction and as such, the user needs to set up the Citi payments which would mean logging into existing Citi account, card photo capture and thumb print authentication/settings. The column in red is where Citi would primarily be involved in. Ideally once set up, the customer simply confirms with her thumb print.
User Journey - Peer to Peer Payments and Transfers via Chat Activity Phase
User 1 chatting w/ User 2 (seller)
User 2 proposes payment amount
User 1
Actions
Opens messaging app and chats
Receives amount and sees action button (Pay/Buy/ Transfer)
Touchpoints
Messaging App
Messaging App
Messaging App
“Great I can pay here and not switch apps”
“Let’s see how this works, is this secure?”
Thoughts
“This sounds like a good deal.”
User 1 approves payment
User 1 links Citi with Messenger
User 2 receives payment instantly
Clicks action button
Customer links Citi if this is the first time; set up shipping details
Confirms suggested shipping address linked to Citi account, or edits it. Finish confirmation with thumb print.
Messaging App Native Camera Touch Pad
Messaging App/Email
“Looks easy enough to set up.”
“Well that was fast!“
+ Emotions
Backend Processes
Messaging app as per normal
Messaging app accesses Citi payments via UI
(seller)
Messaging calls on Citi payments API to process
Citi payments gets set up and linked to existing Citi account.
Existing customer data accessed. Delivery countdown kicks in. Settings remembered for Messaging app. Settings saved
This User Journey maps how a peer to peer payment interaction would be in any given messaging app that would carry a Citi payments API. This is the first transaction for User 1, she would need need to set it up with camera capture, account login and thumb print. Again, once set up, the customer simply confirms with her thumb print.
User Flow - Chat Payments
User flow in red shows the path when the user has already set up payments with Citi. This illustrates a simple flow to integrate with any given messaging app that would call on a Citi payments API.
Feature Prioritization
High Impact
Initial features fit for e-commerce customers Link Citi Account Extract shipping address from profile Remember Preferences Handle disputes Apply for new card
Expected
Transfer/Make Payments
Thumb Print Authentication
Peer to Peer Payments
Credit Card Capture via Camera
Push Notifications Deals and Promos
Push Notifications Smart Suggestions
Alert/Pay Bills
Pay Brick and Mortar Stores via Chat
Apply for loan
Chat with Customer Service
Compare products
Bank Inquiries
Aggregate marketplaces and other e-commerce platforms
Integration with beacons
Unexpected
Perform Forex/ Stocks via Chat User generated customer success stories Integrate VR Experience
Low Impact
For savvy Citi users who are avid
e-commerce customers, Citi Pay*
is a quick-setup/simple payments solution that weaves into existing & supported messaging platforms.
Mockup - Example use case within FB Messenger
A F G
D
E B
C
http://bit.ly/citi-chat-payments A. Permission to transact/chat B. Chat box readily available for custom questions C. Dedicated payments button D. Intro to Citi Pay and setup query E. More information about the product F. Scan card button G. Option to login to account
Mockup
I H
J K
http://bit.ly/citi-chat-payments H. Credit card scan function I. Login to account function (switch apps and authorize) J. Authentication with fingerprint K. Button to start over setup
Mockup
M
L N
http://bit.ly/citi-chat-payments L. Option to make Citi Pay the primary mode of payment M. Suggestion to review previously liked items N. Carousel type view of liked items
Mockup
O
Q P
http://bit.ly/citi-chat-payments O. Address saved in Citi account pre-populates shipping address P. Overview and payment options Q. Authentication via finger print
Mockup
S T
R U
http://bit.ly/citi-from-push-notif R. Option to view transaction receipt from the cloud S. Option to rate experience as feedback T. Button to show similar items based on previous preferences and purchases U. Sample view if coming from push notification of deals
What’s missing
User & Stakeholder Interviews
Competitive Analysis
Initial User Testing
Next Steps
Task Scenarios
User Testing
More Ideation and Iteration
User Personas
Data Synthesis
Product Design
in Hackathons Done in 54hrs or less
Volunteer Engagement Conscious Commerce Financial Literacy
How might we increase volunteer engagement?
CareVille is a multi-stakeholder platform that helps volunteers get connected and stay engaged. bit.ly/uxnomad-careville
Problem
The current experience for finding volunteer opportunities needed improvement. It was neither mobile responsive or user friendly.
Design Solution
C
B
A
A. Location-aware from the get-go B. Familiar swiping interaction C. Save-for-Later pocket D. Quick glance analytics and social proof E. Clear action buttons
E
Design Solution
G
H
I
F
F. Badges and auto-generated profile to promote engagement G. Map view and live tracking H. Data driven display of volunteer activities I. Call-to-Action button
How might we encourage meaningful spending in a hyper-commercialized city like Singapore?
RedeemX is a loyalty points aggregator that connects shoppers with local independent shops. bit.ly/redeemx
bit.ly/redeemx
How might we promote financial literacy in a fun and quick way?
Save Dave is a financial literacy game application aimed at kids and young adults alike. bit.ly/savedavegame
bit.ly/savedavegame
With 13+ years of design experience in advertising, marketing and product design, I represent Seraphm in both design and business aspects. I’m looking forward to our collaboration! Let’s make a positive impact for your business and its audience. Marco Angeles Product Design & UX
[email protected] +65 93848513
More about Marco “Design itself does not have answers. Rather, v it asks questions to uncover problems and solutions.”
Goals •
•
•
UX Designer/Entrepreneur Singapore-Based Filipino, 33 Hacker/Hipster Type
Personality v
Extraverted Intuitive Thinking Judging Assertive
`
INTP Introverted Observant Feeling Perceiving Turbulent
Find opportunities to grow as a designer, manager, and entrepreneur Build partnerships while developing ideas for promising markets Connect with change makers and thought leaders and mentors
Frustrations • • •
Finding, nurturing, and converting leads Balancing multiple interests Elusive product idea for a startup
Business
Goals
UX
User Needs
Motivations Learning/Growth Challenges Creating Impact Incentive Flexibility
Bio A first-time entrepreneur and long-time designer, Marco has more than a decade of experience applicable to end-to-end product development and marketing. He has designed for advertising, marketing, SaaS, and e-commerce. He strives for continuous personal and career growth by stepping out his comfort zone — always learning, doing, and iterating,
Advertising and Marketing Marketing and Product Design
Entrepreneurship Responsive
Web Design User Experience
2006
2007
2008
2009
Illustrations
2010
2011
2012
2013
2014
2016
PRODUCT
MANAGEMENT
ivejustquitsmoking
Print-On-Demand/ E-commerce
2015
Technopreneurship
Customer
Development
Creative Outlets Continuous Learning
Hive Leadership Program
