Uxpin Prototyping For Product Managers
Uxpin Prototyping For Product Managers
Uxpin Prototyping For Product Managers
Product Managers
Simplifying Your Requirements
Introduction5
The problem is that user stories are only brief descriptions of the
user needs. They dont say anything about product vision or potential
complexities. So you cant really rely on user stories exclusively to
validate the design and overall user experience.
In this e-book, well help you clarify requirements and minimize risk
by explaining:
Germaine Satia,
Enterprise Product Manager
How Do Prototypes Clarify
Your Requirements?
Lets look at the key benefits of prototyping and how they clarify
requirements.
Prototypes, on the other hand, expand each user story into a tangible
part of a system. If user stories express task-level goals, then proto-
types help us see the horizontal feature set (breadth) and vertical
feature set (depth) required to fulfill each story.
How Do Prototypes Clarify Your Requirements? 8
The cycle of documentation just becomes too expensive. Just look the
specs documents one of UXPins customers used to create.
They need the project to fulfill business needs (e.g. increase revenue
or NPS score, decrease support call volume, etc). For them, user needs
are just a means to the end.
When focused on the bottom line, its easy for stakeholders to treat
requirements as a laundry list. After all, they cant see the conse-
quences of their requests. Why not add another feature (or feature
set) if it makes the product more robust?
How Do Prototypes Clarify Your Requirements? 12
The problem is that the product vision isnt tangible. Everyone sees
the product differently, and therefore reacts differently.
A prototype opens their eyes. The laundry list dissolves, and the prod-
uct comes into focus. The consequences of additional features are
immediately real for everyone from a junior designer to a Product VP.
Conclusion
Remember that the clearer the business goals, the less risk of scope
creep. Increase revenue is too broad, but Increase revenue 15%
within 3 months without increasing churn focuses everyones
thinking.
To anchor your scope, include all the answers to the above in the
user personas.
Think ahead to how users will purchase your product. Are you
building software for children, which means the parent makes the
purchase decision? Or are you building software for enterprise
collaboration, which means the CTO makes the purchase decision?
If your user and buyer are two different people, create separate
buyer personas.
Tools
Customer Journey Maps
Empathy Maps
Before You Prototype: A Quick Checklist 17
Tactics
Contextual Inquiries
User Interviews
Conclusion
In the next section, well dive into a hands-on exercise to show you
how to prototype the riskiest user stories.
A Hands-On
Prototyping Exercise
Before we dive into the nitty gritty, understand that the goal of a
prototype isnt to polish all design ideas.
At this stage, dont worry about the fine details of each user story.
You simply want to list the user actions so that you can map out
the user flow and identify any gaps.
As a user I can access the Terms & Conditions and Privacy Policy
This is a very low-risk user story because the screens involved are
static and read-only.
For the photo book example, lets examine the potential risks of
each user story.
A Hands-On Prototyping Exercise 20
Lets take a look at the prototypes for user stories 1, 2, 3 and 4. Ill
use UXPin since I use it most often for my projects, but the best
practices apply to any tool.
A Hands-On Prototyping Exercise 22
The first screen for the Photo Book App highlights the information
that users must provide in order to create an account. This is a
simple but critical screen to the technical team because it imme-
diately clarifies the type of data stored in the backend:
By presenting a prototype, you can discuss the best rules for secure
passwords. Without a prototype, developers wouldnt know the
type of information stored and visual designers wouldnt have any
guidelines about the quantity of displayed information.
A Hands-On Prototyping Exercise 23
The prototype for User Story 2 involves two screens that must
appear in a particular order:
The second screen displays all the images stored in the users
phone
A Hands-On Prototyping Exercise 24
Whats important to note here is that the app must provide feed-
back to users about selected images. While the prototype uses a
checkbox, the visual designer may choose another option that
works better for the screen size, brand, and overall user flow. For
example, a transparent overlay could be placed over each selected
image, or the color of each image border could change to indicate
that it is selected. Luckily, you can now quickly discuss and refine
these items as a result of experiencing the prototype early on.
The technical team also benefits from this prototype because they
can now see the rough number of images that need to be instantly
uploaded from local storage into the app.
A Hands-On Prototyping Exercise 25
While you should always prioritize High Risk stories when proto-
typing, there are cases where it makes sense to prototype a Medium
or Low Risk screen.
For our Photo Book App, once users select their photos, the above
screen for User Story 2 acts as the transition point towards check-
A Hands-On Prototyping Exercise 26
Should the book print the photos in the book in the order they
were uploaded? Or do we allow users to reorder the pages?
User Story 4: As a user I can pay for my book with a credit card
The prototype for User Story 4 showcases the basic payment in-
formation we need to collect. This allows everyone to discuss the
rules for each field. For example:
How many numbers can the user enter in the credit card field?
Do we accept all card types (Visa, Mastercard, American Ex-
press)? American Express cards have 15 numbers while Visa
A Hands-On Prototyping Exercise 28
While this is just one little checkbox in the UI, the technical impli-
cations are quite serious. Well need to research legal requirements
for storing personal information. In addition, the technical team
must consider what might happen if servers suffer an attack or
virus. Would customer data become publicly available?
Now that were done building all the screens, we would add in-
teractions to all the key content:
A Hands-On Prototyping Exercise 29
In UXPin, wed simply click on the desired element and then select
the appropriate interaction and end-state:
Next, well annotate and share our interactive prototype for feed-
back.
A Hands-On Prototyping Exercise 30
These pins will also display for every stakeholder with whom you
share the prototype.
types of nuances so that its clear to the technical team that this
is non-negotiable.
Its possible to export all the screens as a zip file, PDF, or HTML for
stakeholders. But in my experience, I find it simplest to just send
a live preview link (via email or SMS).
A Hands-On Prototyping Exercise 32
You can see how its much easier to collect and review feed-
back on prototypes, regardless of whether everyone involved
is co-located or remotely based.
When you send your team the design, ask for feedback regard-
ing these items: product vision, feature completeness, and flow
between pages. Explain that they shouldnt obsess over the UI
design since that may change completely later.
Tease out the core problem behind the feedback with the 3
question rule.
For our Photo Book App example, the review process brought up
an important question that we missed in the original user stories:
the need to send confirmation emails when an order is placed and
after its shipped.
A Hands-On Prototyping Exercise 36
And as we all know, the earlier we revise and validate the vision,
the less costs and risk we accumulate.
Conclusion
When its all said and done, we end up with a more airtight product
that stands a better chance of beating the competition.
If you found this guide useful, check out the case study in the next section.
Agile Prototyping
Case Study
Closing the Gap Between Design & Development
Solution
To bring the right ideas to market faster, LiquidPlanner turned
to UXPin:
Accurate testing of complex interactions. The new
engine and interface are awesome, Edward says. A
user even mistook one of my hi-fi prototypes as the real
deal, telling me to thank our dev team.
Results
With efficient collaborative design in UXPin, the team can
achieve certainty with greater confidence and less cost:
Company Results:
Frees up UX development resources. The design team
can create accurate prototypes to test ideas with users
without any code.
Edward Nguyen
UX Designer at LiquidPlanner