Took a session on Wireframing for aspiring Product Managers in ISB Hyderabad this Sunday. Full house of smart people and lot of interesting discussion!

1. https://uxmastery.com/wireframing-for-beginners/
Wireframing

2. Neeraj, ISB Co20
Product | Data | Tech
Experience
Mobile Application Development
PM for mobile products
Companies
Signeasy | Fab.com (mid-size startups)
Govt. of AP (Data and Tech in Education)

3. What have we
established so far
for a Product
Manager?
Product managers are responsible for
- setting product’s vision & strategy
- prioritise & define product roadmap
- propose improvements in the extisting
features
- propose new features

4. When sometimes
PMs don’t get
user’s priorities
right!

5. What is
wireframing?
“Successful wireframing is the practice of
using wireframes to solve real problems”
“A low fidelity schematic intended to primarily
demonstrate functionality, feature, user flow
that can be quickly iterated upon ”
- Michael Angeles, Balsamiq

6. Wireframes
Web
Mobile
Scope of today’s session is Mobile Wireframes

7. Problem
statement
You are hired as a Product Manager by a digital arm of AP
Hospitals, a leading super-speciality hospital chain in India. The
hospital has been around for more than 20 years and has lots of
patients all over India.
As a newly hired Product Manager, you are tasked to build a
mobile based doctor appointment app for its users.
Point to Note:
Every patient in the hospital is given a unique number MRN
(Medical Record Number or sometimes called UHID ( Unique
Hospital Identification Number)) linked to patient’s registered
phone number

8. Challenge
You have to build a phone number-based user
signup/login flow of the app
Platform
Smartphone

9. ➔ Design the wireframes for phone number based login flow on paper
➔ Do not peek into your phone (Remember! PM interviews won’t allow phones either)
➔ Must have signed up using phone number multiple times for different times - try to remember the
flow
Lets try!

10. ➔ 1 potential solution out of many!
Solution

11. Understanding
the User
User
- Existing Patients - who are already registered
with the hospital
- Prospective Patients - who are not registered
with the hospital
User Need
- To be able to sign up/login to AP Hospital app
using Phone Number (so they can book an
appointment with the doctor)

12. User Journey
Prospective
Patients
Existing Patients
Enter Phone
Number
Verify through
OTP
Sign Up Page
App Home Page
Existing
Patient
Prospective
Patient

13. Consideration 1
Why Phone Number
based login
- Ubiquitous, Everyone has one!
- No usernames and passwords to remember
- Fast, secure and low friction validation of the user
- Easy to implement (Twilio, Firebase etc provide phone number verification APIs)
- Which one to use? Pros & cons of each?
- In developing countries like India, next 500 million users may or may not have emails but will
have smartphones
- Most of the apps use it - Flipkart, Amazon, Ixigo, Google Duo, Twitter, Dunzo, Gaana, MMT…
So as a PM building this app, I took a design decision to use phone number based login and
above was my justification
Trivia! - Who pioneered phone number based login?

14. Consideration 2
Orientation
Portrait
Landscape
Both
Design adapts based on
orientation

15. Consideration 3
Phone Number
Country
India
Phone Number Validation
10 digit
This Photo by Unknown Author is licensed under CC BY

16. Phone Number cont.
Country
India
Phone Number Validation
10 digit

17. Consideration- 4
OTP Verification
Validation
# of Digits - 4
Time Limit
Wrong OTP
Timer Expired
OTP Not Received

18. OTP Verification
Validation
# of Digits - 4
Time Limit
Timer Expired
Wrong OTP
OTP Not Received

19. Consideration - 5
Registration Status
Already Registered
(Backend will find if the honenumber entered
linkedto UHID in user db)
Login User
Not Registered
Sign Up Page
- Full Name
- Date of Birth
- City
Home

20. Registration Status
Already Registered
(Backend will find the phonenumber linkedto
UHID in user db)
Login User
Not Registered
Sign Up Page
- Full Name
- Date of Birth
- City
Consideration – 5

21. Sign up Flow
https://drive.google.com/file/d/1k5OQ9V
KQqCzBeMqMsc3ZJozSit3ojPib/view?
usp=sharing
Sign Up Flow

22. Sign up Flow
https://marvelapp.com/605d4g8Prototyping-Marvel
Happy Path

23. More Decision...
More Considerations...
Do I have to sign up/login user right at the start or at the time of booking?
What if existing user of AP Hospital registers with a different phone number?
- Allow user to enter UHID in sign up flow or link registered phone number to UHID
inside?
What if we asked for location of the user instead of asking for city? (Hint: Having location
of user better for business?)

24. Tools for Low
Fidelity
Wireframing

25. Tools for
Prototyping

26. Takeaways
➔ How to use Balsamiq, Marvel or other tools
➔ Thought process that goes into building end to end user flows/user journey to accomplish a
task
➔ Understand and appreciate the number of decisions/tradeoffs a PM has to make and
justify for building a trivial user flow such as Sign Up/Login
➔ Finally, various ways in which you can build, prototype and present them
Most importantly, look at the products you use deeply and understand the flows or journeys
user has to take to accomplish different tasks. Is there a better way? Helps us develop Product
Intuition (borrowing from what Inmobi’s CPO talk)

27. References
Tips for Presenting Your Wireframes
3 Steps to Better UI Wireframes
Wireframing for Beginners
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a