Designing APIs for Humans - Leveraging User Experience Methods For Developing Human-centered APIs Julia Elman, Senior UX Designer at Ad Hoc

1. Designing APIs
for Humans
Leveraging User Experience Methods
For Developing Human-centered APIs
@juliaelman

2. We empower our customers
to deliver digital services that
promote the general welfare.

3. bit.ly/lightweightdjango

4. Hello! My name is @juliaelman.
API
DATA
?
HUMANS!

7. What is
human-centered design?
Hello! My name is @juliaelman.

8. Hello! My name is @juliaelman.
“Human-centered design is an approach to problem
solving, commonly used in design and management
frameworks that develops solutions to problems by
involving the human perspective in all steps
of the problem-solving process.”
Wikipedia https://en.wikipedia.org/wiki/Human-centered_design

9. Hello! My name is @juliaelman.
Human-centered design is…
• Visual design
• Information architecture
• Interaction design
• Usability
• Usability testing
• Accessibility

10. Hello! My name is @juliaelman.
• A/B testing
• Card sorting
• Competitive analysis
• Contextual Inquiry
• Customer feedback and testing
• Ethnographic research
• Experience mapping
• Expert evaluation
• Flow charts
• Focus group administration
• Heuristic analysis
• High-fidelity visual mockups
• Mental modeling
• Mood boards
• Non-directed interview
• Personas
• Pluralistic walkthrough
• Prototypes
• Scenario
• Site audit
• Sitemaps and content inventory
• Surveying
• System mapping
• User stories or scenarios
• User testing/usability testing
• User-Flow diagrams and
navigation maps
• Wireframes
Human-centered design outputs include…

12. Slide left intentionally blank

13. HCD Life Cycle
Hello! My name is @juliaelman.
Define Discover Build Validate
Foundational user
research
Engineering feasibility
Affinity diagramming
Design studio
Prototypes
Wireframes
User journey maps
Design system
Evaluative research
Performance testing
Accessibility testing
Mobile testing
Product outline
User stories
Epics
Initiative briefs
User research reports

14. Hello! My name is @juliaelman.
Define
Definition of done
Product outline
User stories
Epics
Initiative briefs
User research reports
HCD Life Cycle
A loosely defined hypothesis of the problem,
which includes goals and outcomes for solving
specific user needs, the help inform the work
created in the Discover phase.

15. HCD Life Cycle
Hello! My name is @juliaelman.
Discover
Foundational user
research
Engineering feasibility
Affinity diagramming
Design studio
Definition of done
A researched definition of the problem has been
identified, with specific actionable items for
targeted user types, and teams can easily move
forward to Build a proposed solution.

16. HCD Life Cycle
Hello! My name is @juliaelman.
Build
Prototypes
Wireframes
User journey maps
Design system
Definition of done
A testable solution is created towards
Validating user expectations, needs
and/or pain points.

17. HCD Life Cycle
Hello! My name is @juliaelman.
Validate
Evaluative research
Performance testing
Accessibility testing
Mobile testing
Definition of done
A solution has been tested with users to
help create the best product possible.

18. Define Discover
BuildValidate
Humans

19. Example time!

21. Discover Phase
Hello! My name is @juliaelman.
Affinity diagramming
Affinity diagramming is a method which can help you gather large
amounts of data and organize them into groups or themes based
on their relationships. The process is great for grouping data
gathered during research or ideas generated during the Discover
phase of the HCD life cycle.

25. Hello! My name is @juliaelman.
“This saved a ton of time getting everyone on the same page
when it may have otherwise required tons of back and forth in
Slack or emails, or other sidebar conversations. Also, just
getting everyone together helps us feel like we are all on one
team and in it together rather than working in silos. I think this
exercise is super valuable and I think it we should make it a
regular part of how we work.”
- API Program Product Owner

28. Hello! My name is @juliaelman.
“I feel the one thing that is missing in all of the tools is
failure to establish a common language between designers
and developers. Either we are forcing developers to learn
designer’s language by making them appreciate the
smooth bezier curve we created or designers trying to act
cool in developer’s hood by showing how they implemented
functional programming into their design systems.”
- @tridipthrizu

31. Hello! My name is @juliaelman.
As a Driver, I want to finish as many jobs as possible,
so that I can earn more money in a day.
Build Phase
User Story

32. Diagram created by @tridipthrizu

33. Hello! My name is @juliaelman.
1. When offline see trips summary.
2. Go online in order to see jobs.
3. The user identifies a job they want to do.
4. They accept it and start driving to the pickup location.
5. They reach pickup location and confirm the package.
6. They start driving to drop-off and deliver the package.
7. They finish the job.
8. Money is credited to their account.
Build Phase
User Story One

34. Hello! My name is @juliaelman.
As a Driver, I want to see past trips when I am
not online, so that I can do strategic planning on
how I accept new jobs.
Build Phase
User Story One: Offline view

35. Diagram created by @tridipthrizu

36. Request: GET /user/
Request body: (empty)
Response body:
{
"id": 1,
"name": “Dwight Schrute”,
"photo": // image url,
"location": [28.05, 123.45],
"online": false,
"start_date": "2017-06-08T19:30:39+00:00",
"trips": [
{
// trip details to derive summary
}],
}

38. Hello! My name is @juliaelman.
“Designers who like to stay away from
programming language should really
give API design a chance and open up
to a new way they can communicate
their ideas and solutions.”
- @tridipthrizu

40. Hello! My name is @juliaelman.
Create a culture
of transparency

42. Hello! My name is @juliaelman.
Document your
teams HCD process

43. adhoc.team/2019/10/16/human-centered-design-government-decisions/

46. Thank you
@juliaelman