3. The solution
I simplified the minimally viable version of the Zoona developer portal to 17 pages. There were more pages available to the user after they registered and logged into the API management area, but these pages were out of scope for this project.
Basic site map for the external pages of the Zoona developer portal
Methods and tools
Sketch (UI designs)
Colour and typography
Zoona's Plus brand identity transitioned the company to a more sophisticated and mature palette. Nunito was chosen as the primary font because it imbued stability, playfulness, and accessibility. Muli provided a minimalist secondary font suitable for the body text or situations where a rounded font was not appropriate.
lllustrations and icons
The illustration and icon style focused on clean, high contrast line work with soft curves and minimal use of a primary accent colour. My goal was to create a web experience that felt light, spacious, yet focused and emphasised the content.
Art direction: Andrew Maunder
Cover illustration: Quintin Weyer (modified by Andrew Maunder)
Illustrations: Andrew Maunder
Icons: Andrew Maunder
The solution launch pad
The home page included a 'launch pad' section that aimed to give users a quick overview of some popular uses for the API and to cross-link them to the appropriate page. This section is an example of 1st tier content that intends to guide new users to the most relevant piece of 2nd tier content. As mentioned before, the goal was to prevent overloading the user with information.
My research showed that clear and transparent pricing was a common feature seen on developer portals and API related websites. I, therefore, decided to include a pricing page that was accessible via the primary navigation and a pricing section on the homepage. I also added a price related caption below the "Create account" button that said that the user could try Zoona's API for free. The design goal was to encourage the users to keep exploring the site and then, hopefully, to get interested users to create an account or to contact the Zoona team.
In-page navigation and quick links
The documents page took the form of a single, long page with a sticky, in-page navigation panel on the left-hand side. It provided an overview of all the topics covered and allowed the user to link to the appropriate section. I chose a single page pattern with auto-scrolling for two reasons:
It provided users with flexibility in terms of how they engaged with the content. For example, a new user might want to work through the content step-by-step, whereas a returning user might want to jump to a specific section related to a question they have or a bug they are fixing.
There was not a large volume of API documentation content available for the first release. Of course, this would change as the API matured, so my recommendation to the team was to link to separate content pages if auto-scrolling became cumbersome or inefficient.
The quick links strip provided a highly visible set of links and phrases designed for new users. API websites often included a 'Get Started' section, and it is a phrase that developers look for when they start working with the API documentation.