This document provides an overview of Marga Javier's background and experience as a UX designer and strategist. It summarizes some of her past projects, including creating an e-commerce gift guide for Strand bookstore based on curations from influential New Yorkers, designing an administrative platform for concierges to book massages through Zeel, and conceptualizing an art exchange platform between museums called Google Museum Exchange. It then describes Marga's design process, highlighting how she conducts user research, gains insights, and makes informed design decisions. Finally, it provides her contact information for further discussion.

1. Creating unforgettable experiences
through understanding the user
MARGARET JAVIER
UX Designer & Strategist • Portfolio
margajavier@gmail.com
!
!
@margajavier

2. Hello, I’m MARGA
a UX designer and strategist with
a five-year background managing accounts
at the ad agency, TBWA.

3. I am a creative problem solver.
I champion creative ideas in the digital sphere and
translate them into real world experiences.

4. These are the projects featured in this presentation.
Let me brief you on each one.
Strand E-commerce Microsite
Worked on an e-commerce microsite for the
Strand bookstore.
Building on the brand’s character as an NY
landmark and taking advantage of
seasonality, I conceptualized a gift guide
website with items curated and organized
according to personalities of well-respected
New Yorkers.
⋆ Featured Projects
Zeel Concierge
Created a feature for Zeel, a VC-backed
startup offering on-demand massages, to
accommodate the bookings done by
concierges.
Taking into consideration real world
constraints, we came up with an
administrative platform that would serve
the needs of concierges and their clients.
Google Museum Exchange
An offshoot of the Google Art Project, we
conceptualized Google Museum Exchange: a
platform where museums can find art to
exchange or donate to another institution.
The platform aimed, not only streamline
finding and donating art, but also to
increase accessibility of cultural treasures
to the public.
Twitch video walkthroughs
Tasked in adding a video game
walkthrough feature for the gaming live
stream site and app, Twitch.

5. How do I go about it?
! Identify ! Plan ! Design ! Test
! Creative Process

6. ! Identify ! Plan ! Design ! Test
Opportunities abound if we know where to look.
By asking questions —interviewing users, potential users,
stakeholders — I find a specific space where the business can
thrive. Understanding behavior of the involved parties allows me
to find insight that inform my design decisions.
! Creative Process

7. JAKE
Content
Consumer
REAGAN
The Creator
CASEY
Young Social
Gamer
! ROLE
Led user research. Formulated surveys,
conducted interviews, collated and
translated research data into valuable
insight.
! INSIGHT
I identified that there is interdependency
among the 3 personas and they all
consume and interact with Twitch content
differently.
! DESIGN DECISION
This not only prioritized focus for what
part of the feature to fully flesh out, but
also concretely identified the points-of-
entry for each persona.
! Identify: Twitch Video Walkthroughs

8. ! INSIGHT
Identified an unexpected tertiary persona
in the form of a Young Social Gamer who
watches walkthroughs not to learn but for
the comedic commentary.
! OPPORTUNITY
Not only is the Young Social Gamer a
current heavy Twitch user but also has the
potential to turn into the other 2 user
personas in later years. Keeping their
loyalty is key.
! DESIGN DECISION
Found ways to make funny video
walkthroughs discoverable by the Young
Social Gamer without disrupting their
current flow
Casey
opens
up
Twitch
app
Games landing page
appears
Clicks
MENU
icon
Sees none of her
favorite players are
broadcasting live.
Clicks
VIDEO
from
the
MENU
Browses through
VIDEO landing page,
sees new category
WALKTHROUGHS
Clicks a
video under
WALKTHRO
UGHS
BIO & DEMOGRAPHICS
• 12 years old
• Gender neutral
• Financially dependent, lives
with parents
• Has a cellphone
BEHAVIORS & HABITS
• Plays only on weekends
• Plays mostly with friends
• Takes initiative to play video
games with other people
• Shares content Reagan finds
entertaining online & offline
• Watches live game streams
• Watches videos all the time
• Impressionable
GOALS
• Continuous entertainment
• (Subconsciously) wants to
learn
• (Subconsciously) be social
FEATURES NEEDED
• find popular and new video
games/videos
• ways to communicate
directly with content creator
! Identify: Twitch Video Walkthroughs

9. ! Identify: Google Museum Exchange
! INSIGHT
Deaccessioning, the process when a museum
lets an item go, is a sensitive subject for the
art community. However, when they find a
non-profit institution to donate it to, it eases
the tension because it still fulfills their higher
level goal of making art accessible.
! OPPORTUNITY
The Google Cultural Institute has a similar
goal of making cultural information
universally accessible and an institutional
goal of building more partnerships.
! DESIGN DECISION
Made a platform for museums to donate or
exchange art which builds on both higher
level and lower level goals of the museum
community and the Google Cultural Institute.
Museum’s
needs
Google
Cultural
Institute
Goals
GMX
MUSEUM’S MISSION
Higher level goal: advancing
education, make cultural
treasures accessible
Lower level goal:
comprehensive but curated
collections
GOOGLE CULTURAL INSTITUTE’S
MISSION:
Higher level goal: digitally preserve art
to educate & inspire future generations
Lower level goal: to make cultural info
universally accessible & useful through
building partnerships

10. ! Identify ! Design ! Test
! Creative Process
! Plan
What is the best way to align each party’s goals?
Also, we want to make sure that everyone is in on it.

11. ! Plan: Strand E-Commerce Microsite
! INSIGHT
Everyone is multifaceted with varied interests.
However, everyone looks up to someone else
with regard to a certain subject. The opinions of
these thought leaders usually carry certain
weight with a wide variety of people and can
influence their decision making process.
! OPPORTUNITY
The Strand is almost seen as a New York
landmark and has formed strong community
ties in a place teeming with thought leaders.
The brand is also known as having a very
strong curated collection.
! DESIGN DECISION
Leveraged Strand’s strong community ties by
creating a gift guide microsite curated by
thought leaders whose influence may far
exceed their field of expertise.
Prototype:
http://invis.io/TN2DX3S7K

12. Hotel Concierge
• Books one-off appointments
• Has existing, established
preferred partners in local
area
• Works off commission
Personal Concierge
• Books recurring
appointments
• Has multitude service
providers depending on client
needs
• Doesn’t take commissions
identifying a primary personazeel
! Plan: Zeel Concierge
! OPPORTUNITY
Addressing a growth market, Zeel wished to
streamline the process of concierges booking
massages for their clients.
! INSIGHT
There are different types of concierges. Hotel
concierges need kickbacks while personal concierge
companies (and personal assistants) do not.
Personal concierges also make regular recurring
bookings & have more consistent clientele.
! WHAT INFORMED THE DECISION
stakeholder interviews, user interviews, Design Studio
with clients
! DESIGN DECISION
Designed the platform with the Personal Concierge
as the primary persona. By leading a Design Studio
involving the clients, we were able to get a consensus
on leading towards this direction.

13. ! Identify ! Plan
! Design ! Test
I think of designing like building a map.
I always keep in mind that people should be able to
guide themselves through it without getting lost.
! Creative Process

14. ! INSIGHT
The Young Social Gamer is a heavy Twitch
user and an avid follower of celebrity pro-
gamers. They have a habit of browsing videos
more than playing actual video games.
! OPPORTUNITY
Celebrity pro-gamers are always looking to
engage and increase their fan base.
Approaching them to be Video Walkthrough
content creators would benefit both pro-
gamers and Twitch.
! DESIGN DECISION
Having Video Walkthroughs also accessible
under the “Following” menu item within the
Twitch app makes it more discoverable by the
Young Social Gamer without disrupting their
current flow.
! Design: Twitch Video Walkthroughs
Casey
opens
up
Twitch
app
Games landing page
appears
Clicks
MENU
icon
Sees none of her
favorite players are
broadcasting live.
Clicks
VIDEO
from
the
MENU
Browses through
VIDEO landing page,
sees new category
WALKTHROUGHS
Clicks a
video under
WALKTHRO
UGHS

15. Competitive Features Analysis
Comparative Features Analysis
! Design: Google Museum Exchange
Part 1
! INSIGHT
Museum registrars who are likely to list a
deaccessioned item are very used to antiquated
systems and dealing with filling out a lot of lengthy
forms. However, to use a new digitized system of listing,
they require a lot of guidance throughout the process.
! WHAT INFORMED THE DECISION
Competitive analysis of auction house websites,
comparative analysis of the AirBNB house listing on-
boarding process
! DESIGN DECISION
Having carefully guided on-boarding for the listing
process. Breaking down the process to a checkout-like
flow where they are reminded what step they’ve
completed and what step they’re currently in.
Features GOOGLE ART
PROJECT
ARTSY SOTHEBY’S CHRISTIE’S
Art Discovery
System ✔
✔
- Art Genome Project
- Discovery through similar art
Limited – only for future
auction
Limited - Can buy printed
catalog online
Auction ✗
✔,
Automatic Bidding System &
Live Auction
✔
Live Auction w/ online
bidding
✔
Live Auction w/ online
bidding
Private Sales ✗ ✔ ✔ ✔
Valuation ✗ ✔ Specialist service offered Specialist service offered
Cultivation ✗ ✔ ✔ ✔
Catalog
subscription ✗ ✔ ✔
free
✔
paid
Promotion of
institution ✔ ✔ ✔ ✔

16. Listing an item Prototype: http://5fntsb.axshare.com/listing_1.html
! Design: Google Museum Exchange
Part 2

17. Check marks appear as
soon as a step is completed
Shows overview of all the
steps within the listing
process. The step of the
process the user is in is
highlighted.
Reiterates the step of the
process the user is in as
well as the basic goal of the
page.
Hints and guide
text within the
form help the user
where there might
be confusion
! Design: Google Museum Exchange
Part 3

18. ! Design: Zeel Concierge
Booking a massage for a client flow
Prototype:
http://znf6wo.axshare.com/
client_directory.html

19. ! INSIGHT
Concierges deal with multiple clients at the same time so
when booking a service, the first thing they think of is the
client whose needs they need to serve at the moment.
! WHAT INFORMED THE DECISION
User interviews, comparative analysis of Facebook’s
friend search feature
! DESIGN DECISION
As the primary landing page post login, concierge is
presented with cards showing brief info about their
clients. The client cards are initially arranged according to
those with appointments, pending appointments and the
rest alphabetically.
! Design: Zeel Concierge
Post login landing page: Client Cards
Using the client name
search bar autofilters
the client cards shown

20. ! INSIGHT
Clients feel that massages are more intimate
type of service and often prefer to have the
same therapist and massage type. Many
prefer to cancel a massage booking if the
therapist they want is not available.
! WHAT INFORMED THE DECISION
Interviews with concierges and people who
have utilized concierge services
! DESIGN DECISION
Include a button for concierges to be able to
immediately request for the same therapist
and massage type based on a client’s past
appointment.
! Design: Zeel Concierge
Streamlining booking of the same services
PAST APPOINTMENTS CARD WITHIN A CLIENT’S PROFILE PAGE

21. ! Identify ! Plan ! Design
! Test
When we simply assume,
we undervalue the people we are
making this experience for.
Testing helps us in making
people help themselves.
! Creative Process

22. ! Test: Zeel Concierge
Checkout flow: Appointment page
• User expects that when you edit,
there would be a search button that
auto populates a name.
• Label was changed from “Edit” to
“Change client”
Until user gets to “Hang Tight” page, they are
unsure of what the Hang Tight page is.
Needs more indication of what this page does or
what comes up next. Replaced “Hang Tight” with
“Processing”
Removed:
1.Edit button
2.Save button

23. ! Test: Zeel Concierge
Checkout flow: Processing page
Changed to “Processing” after “Hang Tight”
confused users what task they were in
within the booking process
By animating the clock,
users were less
confused that the page
did not hang

24. VIDEO UPLOADER: Revised Wireframe
! INSIGHT
Pro-gamers tend to skip tutorials and try to figure
things out through trial only to realize they need it later.
! DESIGN DECISION
Added a “Restart Tutorial” button
! Test: Twitch Video Walkthroughs
Video Uploader
VIDEO UPLOADER: Initial Testing Wireframe

25. ! With a little help from my friends
Other tools I can use
GOOGLE FORMS
• best in collating data
that is easy to distill
• visual analytics
overview of the results
QUICKTIME
• Not only can it record
your screen but also the
turn on your mic to
record audio while
interviewing or testing.
• Preloaded on every
Macbook
GOOGLE HANGOUTS
• Coupled with Quicktime
screen record, their screen
share feature is great for
remote user testing
• Also great for video interviews
AXURE RP 7 PRO
My favorite prototyping tool.
• Widgets are intuitive and
have built in functionality
• Makes wiring to
prototyping faster so you
can get to testing quicker
POWERPOINT
• Strong in formatting.
When master slide is
set in place,
everything follows
• Universally used
document format
KEYNOTE
• best transition
animation actions
among slides
GOOGLE SLIDES
• best for
collaboration
because of live
updating
Depending on what type of presentation I’m doing, I use the following:
GOOGLE DRIVE, DOCS, SHEETS & SLIDES
• best when collaborating with a team
• seamlessly integrate with each other
• updates documents live
• exports to various popular document
formats (.doc, PDF, Powerpoint, Excel, etc.)
WHITEBOARD MARKERS
• easy way to get all ideas out in the
open
POST IT NOTES
• easy way to get all
ideas out in the open II
SHARPIE
Tools I’ve started learning
Tools for Design & Presentation Tools for Testing
Tools for Ideation & Collaboration Other tools I can use
Tools I am currently learning

26. Creating memorable user experiences is something
I’m passionate about.
If you want to talk more about it, you can contact me through:
!
702.750.7948
margajavier@gmail.com
@margajavier
www.linkedin.com/in/margajavier
!
!
!