Shopify - Bootcamp project
Making developer documentation a collaborative space
tl;dr
Making API documentation more collaborative by integrating existing discussion forums within the same interface. The solution allows developers to simultaneously browse and participate in discussions without leaving the documentation, enhancing user engagement and reducing support requests.
Role
UX Designer - Research, Information Architecture, UI Design
Product
Consumer - Web
Duration
3 months
Highlights
Context
This project was part of the Ownpath Product Design Fellowship. Postman, a leading API testing platform, was the industry partner who gave the project brief and consistent feedback throughout the design journey.
Objective
Documentation is key for API producers to explain what their API does and how to use it. If the documentation isn’t clear, API Consumers might be confused or blocked from trying to integrate the API for their use case. This costs API consumers time and effort.
It’s important to have a way for users to ask questions and point out issues. Given this use case, the high-level objective going into the project was -
❓
How might we make API documentation a collaborative space for consumers to learn how to successfully use the API as fast as possible?
❓
How might we make API documentation a collaborative space for consumers to learn how to successfully use the API as fast as possible?
❓
How might we make API documentation a collaborative space for consumers to learn how to successfully use the API as fast as possible?
Investigation
To delve into the problem space, I started with secondary research. I explored a range of developer-centric products and services that require documentation and in some cases incorporate some kind of discussion platform for their users.
I also looked closely at community forums like StackOverflow, Shopify’s discussions, and Spotify’s developer forum. This research helped me understand the nature of the questions asked on these forums and the problems faced by developers.
Once I had enough knowledge from secondary research, I started talking to developers to understand their workflow and pain points.
❗️
However, after talking to four developers, I noticed a disconnect, I realised that I wasn’t entirely able to empathise with them and ask good questions because I had never used developer documentation to build something.
To bridge this gap, I spent the next four days working with the documentation of Notion API and Pokemon API.
❗️
However, after talking to four developers, I noticed a disconnect, I realised that I wasn’t entirely able to empathise with them and ask good questions because I had never used developer documentation to build something.
To bridge this gap, I spent the next four days working with the documentation of Notion API and Pokemon API.
❗️
However, after talking to four developers, I noticed a disconnect, I realised that I wasn’t entirely able to empathise with them and ask good questions because I had never used developer documentation to build something.
To bridge this gap, I spent the next four days working with the documentation of Notion API and Pokemon API.
I created a small integration that filled a Notion database with Pokemon data from the Poke API. After this hands-on experience, I was able to connect the dots from my previous discussions with developers and better understood their frustration and use cases. it also helped me ask better questions in subsequent developer interviews.
Jobs to be done - consumers and producers
Based on my primary and secondary research, I wrote simple jobs-to-be-done statements to distil the insights I gathered -
Jobs to be done - consumers and producers
Based on my primary and secondary research, I wrote simple jobs-to-be-done statements to distil the insights I gathered -
Jobs to be done - consumers and producers
Based on my primary and secondary research, I wrote simple jobs-to-be-done statements to distil the insights I gathered -
Mapping the existing workflow
Flow diagram to visualise the workflow of developers, noting the emotions at each step and identifying the key focus areas to solve for.
⚡️
Approach to designing the solution
Using the ‘jobs-to-be-done’ statements and flow diagram, I pinpointed the main areas that could enhance the developer’s experience. I divided the problem into smaller, actionable chunks and started exploring potential solutions
⚡️
Approach to designing the solution
Using the ‘jobs-to-be-done’ statements and flow diagram, I pinpointed the main areas that could enhance the developer’s experience. I divided the problem into smaller, actionable chunks and started exploring potential solutions
⚡️
Approach to designing the solution
Using the ‘jobs-to-be-done’ statements and flow diagram, I pinpointed the main areas that could enhance the developer’s experience. I divided the problem into smaller, actionable chunks and started exploring potential solutions
📝
Note
I used Shopify’s documentation to demonstrate my ideas and designs. However, I’m not connected with Shopify for this project.
📝
Note
I used Shopify’s documentation to demonstrate my ideas and designs. However, I’m not connected with Shopify for this project.
📝
Note
I used Shopify’s documentation to demonstrate my ideas and designs. However, I’m not connected with Shopify for this project.
Design - Problem 1
User Behaviour
↪️
Switching between API docs and forums
Developers often read the documentation and simultaneously browse through forum discussions to grasp anything they may have overlooked or misunderstood.
↪️
Switching between API docs and forums
Developers often read the documentation and simultaneously browse through forum discussions to grasp anything they may have overlooked or misunderstood.
↪️
Switching between API docs and forums
Developers often read the documentation and simultaneously browse through forum discussions to grasp anything they may have overlooked or misunderstood.
⌛️
Time to find an appropriate discussions
Let’s say you are studying an API’s rate limits in the documentation, but there’s an aspect you’re unsure about that isn’t explained in detail. In this situation, you’d have to leave the documentation page and undertake multiple steps on the forum site to find relevant discussions, which can be a time-consuming process.
⌛️
Time to find an appropriate discussions
Let’s say you are studying an API’s rate limits in the documentation, but there’s an aspect you’re unsure about that isn’t explained in detail. In this situation, you’d have to leave the documentation page and undertake multiple steps on the forum site to find relevant discussions, which can be a time-consuming process.
⌛️
Time to find an appropriate discussions
Let’s say you are studying an API’s rate limits in the documentation, but there’s an aspect you’re unsure about that isn’t explained in detail. In this situation, you’d have to leave the documentation page and undertake multiple steps on the forum site to find relevant discussions, which can be a time-consuming process.
1st iteration (Wireframe) — Access discussions within docs
Shopify already has a search for the content of the docs. I added the option to search and read the discussions in the same interaction so that it’s part of the user’s current flow and is easily discoverable.
1st iteration (Wireframe) — Access discussions within docs
Shopify already has a search for the content of the docs. I added the option to search and read the discussions in the same interaction so that it’s part of the user’s current flow and is easily discoverable.
1st iteration (Wireframe) — Access discussions within docs
Shopify already has a search for the content of the docs. I added the option to search and read the discussions in the same interaction so that it’s part of the user’s current flow and is easily discoverable.
❗️
Insights from testing with real-world use cases
The search UI is in the form of a command menu - command menu interactions are good for quick and short interactions like running an action but don’t work really well for interactions that require spending a few minutes like reading and posting comments.
Users can’t read the documentation simultaneously while reading the discussions.
An accidental click on any part of the page apart from the search UI will result in the search menu closing.
❗️
Insights from testing with real-world use cases
The search UI is in the form of a command menu - command menu interactions are good for quick and short interactions like running an action but don’t work really well for interactions that require spending a few minutes like reading and posting comments.
Users can’t read the documentation simultaneously while reading the discussions.
An accidental click on any part of the page apart from the search UI will result in the search menu closing.
❗️
Insights from testing with real-world use cases
The search UI is in the form of a command menu - command menu interactions are good for quick and short interactions like running an action but don’t work really well for interactions that require spending a few minutes like reading and posting comments.
Users can’t read the documentation simultaneously while reading the discussions.
An accidental click on any part of the page apart from the search UI will result in the search menu closing.
Introducing the discussions sidebar
The discussions sidebar serves as a window to Shopify’s developer forum, allowing users to engage directly from the documentation. This enhances the user experience in a number of ways -
Introducing the discussions sidebar
The discussions sidebar serves as a window to Shopify’s developer forum, allowing users to engage directly from the documentation. This enhances the user experience in a number of ways -
Introducing the discussions sidebar
The discussions sidebar serves as a window to Shopify’s developer forum, allowing users to engage directly from the documentation. This enhances the user experience in a number of ways -
↔️
Simultaneous Browsing and Referring
Users can explore the forum discussions while referring to the documentation at the same time. This eliminates the need for constant switching between the documentation and the forum, making for a smoother and more efficient learning experience.
↔️
Simultaneous Browsing and Referring
Users can explore the forum discussions while referring to the documentation at the same time. This eliminates the need for constant switching between the documentation and the forum, making for a smoother and more efficient learning experience.
↔️
Simultaneous Browsing and Referring
Users can explore the forum discussions while referring to the documentation at the same time. This eliminates the need for constant switching between the documentation and the forum, making for a smoother and more efficient learning experience.
🗒️
Contextual Discussions List
The discussions list matches the page the user is currently on. This means users can find discussions that are directly relevant to their current study topic, without the need for extra navigation steps. Moreover, filters are auto-set to display contextual discussions, further saving time and effort.
🗒️
Contextual Discussions List
The discussions list matches the page the user is currently on. This means users can find discussions that are directly relevant to their current study topic, without the need for extra navigation steps. Moreover, filters are auto-set to display contextual discussions, further saving time and effort.
🗒️
Contextual Discussions List
The discussions list matches the page the user is currently on. This means users can find discussions that are directly relevant to their current study topic, without the need for extra navigation steps. Moreover, filters are auto-set to display contextual discussions, further saving time and effort.
Flexible Filter Options
Users are given the flexibility to modify the filter located beneath the search bar. This allows them to view discussions pertaining to different parts of the documentation, providing a broader scope of insights and understanding.
Flexible Filter Options
Users are given the flexibility to modify the filter located beneath the search bar. This allows them to view discussions pertaining to different parts of the documentation, providing a broader scope of insights and understanding.
Flexible Filter Options
Users are given the flexibility to modify the filter located beneath the search bar. This allows them to view discussions pertaining to different parts of the documentation, providing a broader scope of insights and understanding.
Discussion View - Participative Engagement
The discussion sidebar also facilitates active participation. Users can not only view entire discussions but also engage by commenting and replying. This interactive feature not only enhances understanding but also promotes a sense of community and shared learning.
Discussion View - Participative Engagement
The discussion sidebar also facilitates active participation. Users can not only view entire discussions but also engage by commenting and replying. This interactive feature not only enhances understanding but also promotes a sense of community and shared learning.
Discussion View - Participative Engagement
The discussion sidebar also facilitates active participation. Users can not only view entire discussions but also engage by commenting and replying. This interactive feature not only enhances understanding but also promotes a sense of community and shared learning.
Design - Problem 2
✅
Seamless Navigation amidst Discussions
Users should have the capability to seamlessly move between different types of discussions (like all discussions, personal discussions, etc.) and notifications. All of this should be possible without losing focus from their main task on the page — reading and understanding the documentation.
✅
Seamless Navigation amidst Discussions
Users should have the capability to seamlessly move between different types of discussions (like all discussions, personal discussions, etc.) and notifications. All of this should be possible without losing focus from their main task on the page — reading and understanding the documentation.
✅
Seamless Navigation amidst Discussions
Users should have the capability to seamlessly move between different types of discussions (like all discussions, personal discussions, etc.) and notifications. All of this should be possible without losing focus from their main task on the page — reading and understanding the documentation.
🚀
Quick Access to Discussions Sidebar
Users should be able to promptly reach the discussions sidebar for quick reference and participation.
🚀
Quick Access to Discussions Sidebar
Users should be able to promptly reach the discussions sidebar for quick reference and participation.
🚀
Quick Access to Discussions Sidebar
Users should be able to promptly reach the discussions sidebar for quick reference and participation.
Entry points
Designing the quick access feature for the discussions sidebar presented a unique challenge, as it was important to ensure that it didn’t distract the user from their primary task — reading the documentation. After exploring a few different approaches and conducting user testing, I finalized the design as illustrated above.
Entry points
Designing the quick access feature for the discussions sidebar presented a unique challenge, as it was important to ensure that it didn’t distract the user from their primary task — reading the documentation. After exploring a few different approaches and conducting user testing, I finalized the design as illustrated above.
Entry points
Designing the quick access feature for the discussions sidebar presented a unique challenge, as it was important to ensure that it didn’t distract the user from their primary task — reading the documentation. After exploring a few different approaches and conducting user testing, I finalized the design as illustrated above.
Entry points
The discussion sidebar has been made easily accessible via a toggle situated at the right of the upper navigation bar. This placement not only reduces the number of steps required to view discussions but also maintains the user’s focus on the documentation. Additionally, I’ve included a dropdown menu to facilitate navigation between different types of discussions, further enhancing the usability of the feature.
Entry points
The discussion sidebar has been made easily accessible via a toggle situated at the right of the upper navigation bar. This placement not only reduces the number of steps required to view discussions but also maintains the user’s focus on the documentation. Additionally, I’ve included a dropdown menu to facilitate navigation between different types of discussions, further enhancing the usability of the feature.
Entry points
The discussion sidebar has been made easily accessible via a toggle situated at the right of the upper navigation bar. This placement not only reduces the number of steps required to view discussions but also maintains the user’s focus on the documentation. Additionally, I’ve included a dropdown menu to facilitate navigation between different types of discussions, further enhancing the usability of the feature.
Design - Problem 3
Increasing community engagement
The primary purpose of having a forum or a community is to foster interaction and mutual assistance among members. However, during my research
👀
I observed that a large number of posts on ‘Shopify Discussions’ lack any form of engagement or commentary.
👀
I observed that a large number of posts on ‘Shopify Discussions’ lack any form of engagement or commentary.
👀
I observed that a large number of posts on ‘Shopify Discussions’ lack any form of engagement or commentary.
This lack of interaction appears to stem from the absence of a mechanism that allows users to discover discussions to which they could contribute meaningful insights and engage in productive dialogue. As a result, many important issues remain unnoticed and unattended.
Introducing — Discussions For You
“Discussion for You” is a feature that presents a curated list of discussions that a user might find interesting and where they could potentially contribute valuable insights. The selection of these discussions is based on the user’s past activity and engagement, such as the discussions they’ve participated in. This personalization helps ensure that the most relevant discussions are brought to the user’s attention. Furthermore, it increases the visibility of these discussions to the appropriate community members who are most likely to contribute to the resolution of the issues being discussed.
Introducing — Discussions For You
“Discussion for You” is a feature that presents a curated list of discussions that a user might find interesting and where they could potentially contribute valuable insights. The selection of these discussions is based on the user’s past activity and engagement, such as the discussions they’ve participated in. This personalization helps ensure that the most relevant discussions are brought to the user’s attention. Furthermore, it increases the visibility of these discussions to the appropriate community members who are most likely to contribute to the resolution of the issues being discussed.
Introducing — Discussions For You
“Discussion for You” is a feature that presents a curated list of discussions that a user might find interesting and where they could potentially contribute valuable insights. The selection of these discussions is based on the user’s past activity and engagement, such as the discussions they’ve participated in. This personalization helps ensure that the most relevant discussions are brought to the user’s attention. Furthermore, it increases the visibility of these discussions to the appropriate community members who are most likely to contribute to the resolution of the issues being discussed.
Starting a new discussion
The users can start new discussions directly from the sidebar without leaving the documentation page. This would make starting discussions more effortless and seamless, keeping users engaged with the documentation and the community simultaneously. Additionally, users should be able to view the discussions they’ve started right from the sidebar. This offers quick and easy access to their ongoing discussions, helping them stay connected and responsive.
Starting a new discussion
The users can start new discussions directly from the sidebar without leaving the documentation page. This would make starting discussions more effortless and seamless, keeping users engaged with the documentation and the community simultaneously. Additionally, users should be able to view the discussions they’ve started right from the sidebar. This offers quick and easy access to their ongoing discussions, helping them stay connected and responsive.
Starting a new discussion
The users can start new discussions directly from the sidebar without leaving the documentation page. This would make starting discussions more effortless and seamless, keeping users engaged with the documentation and the community simultaneously. Additionally, users should be able to view the discussions they’ve started right from the sidebar. This offers quick and easy access to their ongoing discussions, helping them stay connected and responsive.
Potential Impact
📉
Decrease in Support Team Call
The design’s primary goal is to foster a more collaborative and interactive documentation environment, reducing the need for developers to seek assistance from the support team. By comparing the number of support calls or tickets pre and post-implementation of the new design, this decrease can be quantified and tracked.
📉
Decrease in Support Team Call
The design’s primary goal is to foster a more collaborative and interactive documentation environment, reducing the need for developers to seek assistance from the support team. By comparing the number of support calls or tickets pre and post-implementation of the new design, this decrease can be quantified and tracked.
📉
Decrease in Support Team Call
The design’s primary goal is to foster a more collaborative and interactive documentation environment, reducing the need for developers to seek assistance from the support team. By comparing the number of support calls or tickets pre and post-implementation of the new design, this decrease can be quantified and tracked.
📈
Increase in User Engagement
The design incorporates new features such as a discussion sidebar and “Discussions For You”, which aim to encourage interaction and mutual aid among users. Therefore, a rise in user engagement, as evidenced by the number of comments, replies, and new discussions initiated by users, would signify a successful implementation.
📈
Increase in User Engagement
The design incorporates new features such as a discussion sidebar and “Discussions For You”, which aim to encourage interaction and mutual aid among users. Therefore, a rise in user engagement, as evidenced by the number of comments, replies, and new discussions initiated by users, would signify a successful implementation.
📈
Increase in User Engagement
The design incorporates new features such as a discussion sidebar and “Discussions For You”, which aim to encourage interaction and mutual aid among users. Therefore, a rise in user engagement, as evidenced by the number of comments, replies, and new discussions initiated by users, would signify a successful implementation.
📊
Increase in User Retention
The design seeks to keep users engaged with both the documentation and the community concurrently, which should result in users being more likely to return to the site and continue utilizing it over time. Thus, a rise in user retention rates would be a positive outcome and a clear indication of the design’s success.
📊
Increase in User Retention
The design seeks to keep users engaged with both the documentation and the community concurrently, which should result in users being more likely to return to the site and continue utilizing it over time. Thus, a rise in user retention rates would be a positive outcome and a clear indication of the design’s success.
📊
Increase in User Retention
The design seeks to keep users engaged with both the documentation and the community concurrently, which should result in users being more likely to return to the site and continue utilizing it over time. Thus, a rise in user retention rates would be a positive outcome and a clear indication of the design’s success.
Key learnings
👥
One of the crucial learnings from this project was understanding the value of the user’s perspective. I found that engaging with developers and personally utilizing developer documentation to build something was vital in grasping the user’s pain points and needs.
👥
One of the crucial learnings from this project was understanding the value of the user’s perspective. I found that engaging with developers and personally utilizing developer documentation to build something was vital in grasping the user’s pain points and needs.
👥
One of the crucial learnings from this project was understanding the value of the user’s perspective. I found that engaging with developers and personally utilizing developer documentation to build something was vital in grasping the user’s pain points and needs.
🧩
Another significant insight was recognizing the benefits of deconstructing a complex problem into smaller, manageable parts. This strategy enabled me to investigate and devise potential solutions more efficiently.
🧩
Another significant insight was recognizing the benefits of deconstructing a complex problem into smaller, manageable parts. This strategy enabled me to investigate and devise potential solutions more efficiently.
🧩
Another significant insight was recognizing the benefits of deconstructing a complex problem into smaller, manageable parts. This strategy enabled me to investigate and devise potential solutions more efficiently.
🗣️
User feedback emerged as an indispensable element in refining the design. The process of iterating on my initial design, based on personal testing and user feedback, underscored the importance of this step in the overall design process.
🗣️
User feedback emerged as an indispensable element in refining the design. The process of iterating on my initial design, based on personal testing and user feedback, underscored the importance of this step in the overall design process.
🗣️
User feedback emerged as an indispensable element in refining the design. The process of iterating on my initial design, based on personal testing and user feedback, underscored the importance of this step in the overall design process.
🎉
Lastly, the experience of working with an existing design system and building upon it offered me an opportunity to delve into a variety of design patterns, such as navigation, page layouts, and information architecture. This aspect of the project further enriched my learning and design experience.
🎉
Lastly, the experience of working with an existing design system and building upon it offered me an opportunity to delve into a variety of design patterns, such as navigation, page layouts, and information architecture. This aspect of the project further enriched my learning and design experience.
🎉
Lastly, the experience of working with an existing design system and building upon it offered me an opportunity to delve into a variety of design patterns, such as navigation, page layouts, and information architecture. This aspect of the project further enriched my learning and design experience.