Redesigning the OPay Developer Documentation site
We recently developed the new OPay developer documentation site with new cool features such as the interactive demos, progress bar, code snippets etc and rolled it out to the public in November, 2020.
The Documentation is an important part of the OPay payment experience as it showcases the API requirements for the integration of external merchants to the OPay system for payment services.
Our goal is to ensure that developers learn and understand how to build payment experiences with OPay APIs and overall provide a great developer experience to solve our payment use cases.
The Team
The team that worked on this project consist of one Product Manager, one Product Designer (myself) and two Frontend Engineers.
My Role
User Research, UI/UX Design
The Problem
The old OPay Documentation site had some UX and UI issues:
- All the information on most pages had the exact same font and size.
- There was no color to differentiate or highlight important text.
- APIs were static on the site and there was no interactive environment for users to interact with the APIs.
- No channel to get feedback from merchants and developers on the issues they were facing on the documentation site.
After a lot of conversations with the team, we decided that we had to make our documentation site better looking. To do this, we decided on a clean, simple and modern documentation experience that would be built from scratch.
The Research
I started researching on ways to improve the old documentation site and looked at some sample documentation sites. I spoke to 12 developers and asked them questions like:
- Which company’s documentation is easy for you to use? (You can mention as many companies as you like)
- Why is the documentation easy for you to use?
- Which company’s documentation have you found difficult to use? (You can mention as many companies as you like)
- Why is it difficult for you to use?
- What are your thoughts on the OPay developer documentation?
I got insights into what developers expect when using a documentation site. I also got examples of documentation sites that developers found easy and difficult to use.
Here are some of the insights and notable quotes I got:
The Solution
I looked through a list of documentation sites that the developers mentioned as easy to use and highlighted what they found easy and what unique features these sites provide.
I also looked through the documentation sites developers found difficult to use and highlighted the problems on these sites.
Based on this, I started to think about what we needed for the documentation.
I put together the list of basic requirements:
- The documentation should be written in a simple and clear text format.
- Eye-catching and consistent styling that is easy to read and navigate.
- A progress bar that shows users how much time it takes to scroll through a page.
- Interactive demos that allow users experience our APIs by providing them with dummy data to test with.
- Notes and Alerts to notify users of anything they should look out for.
- A button that links to our dashboard to enable merchants easily login or sign up after reviewing the documentation.
- A feedback section to get feedback on the issues developers face on the site and how we can improve our APIs and the documentation site.
Here is a link to interact with the OPay developer documentation site;
https://documentation.opayweb.com/
Features of the new Documentation Site
1. Information Structure
I grouped all the content on the new Documentation under nine categories:
- Introduction
- OPay Payment Gateway
- Transfers
- Signature Calculator
- OPay Inquiry
- OPay Wallet Payment
- OPay User Account Creation
- Transactions
- Libraries
I also used different font sizes to differentiate the headers, sub headers and body text to achieve a balanced information hierarchy.
This helps you quickly find the information you need.
2. Interactive Demos
If you are just getting started, our interactive demos will introduce you to the basics of how to:
- Accept payments using the OPay checkout API.
- Transfer money to a bank account or OPay wallet using the OPay transfer API.
3. Notes and Alerts
“Notes” and “Warning” alerts make it easier for you to see important things you need to know on every page.
4. Feedback Section
There is a feedback section at the bottom of every page of the documentation that allows you to tell us your thoughts on our APIs and what you would like us to improve.
5. Progress Bar
A progress bar that uses motion and a color indicator to show that progress is taking place and shows users how far through a page they have scrolled.
Designing for Mobile
All these features are reflected on mobile too. When it comes to developer documentation, it is important to optimize for mobile so users can access the documentation as quickly as possible.
Summary
It has been an amazing experience working with the team to design the new documentation site. Designing, developing and improving a documentation site is one of those tasks that never end. We are proud of the progress we’ve made so far because we have been able to provide the best experience to our merchants and developers.
If you would like to share your thoughts on our APIs or documentation, please let us know by using the feedback section at the bottom of our documentation page.
