APImetrics: Improving the web experience
APImetrics provides real-time API monitoring to businesses offering a single number that both consumers and providers of data can use to assess the health of their APIs. This proprietary technology makes APImetrics results more reliable over other competitors.
What started in late 2013 as a side project for one of their then clients turned into a game-changing technology for businesses to view their overall API performance. As APImetrics rapidly grew and added to its suite of product offerings, its webs experience deteriorated with hastily-added content, poor structure and competing action items. Towards the end of 2016, the website was generating very little business for the company and data analytics revealed low user-engagement numbers and high bounce rates.
I led the redesign of the APImetrics web experience from June 2017 - November 2017. During this time, I collaborated with in-house designers, developers and the product team to perform competitive analysis, create user flows, wireframes, iterate and test prototypes and finally create high-resolution mockups ready for development.
Deep Dive into the problem:
By 2016, the APImetrics team had identified that there are two types of users primarily visiting their website: Developers who actually work on the APIs and managers who have the decision-making power to buy the services.
In an effort to appeal to both these sets of users, the team added more and more content on the landing page in an effort to engage engineers and managers at the same time. The strategy backfired because users found the content confusing and did not clearly understand the services being offered. Landing page aside, the rest of the pages on the website offered very little specific information or discoverability of services to either sets of users.
CTA buttons posed another problem. The landing page had three action items but none of these were reinforced anywhere else on the page or the rest of the website causing frustration for users who wanted to sign-up.
My first step was to launch a small team exercise to understand the key business goals that the team thought the website should serve. I led the brainstorm sessions, posing specific questions on ROI, success metrics etc. and guided the team through discussions to arrive at the following goals:
- Sign up/Create an account with APImetrics - Primary Goal
- Speak to the target markets
- Clearly demonstrates APImetrics value proposition
A careful analysis of APImetrics user data revealed that one of the key problems with the existing design was that most of the useful information was hidden beneath several clicks resulting in a frustrating user experience and a high bounce rate.
To further understand the user expectations and design gaps of the existing website, I performed a competitive analysis to evaluate the user experience of companies that offered similar services and were targeting similar user groups.
The twin analysis revealed that since users were interested in seeing "features" the service offered along with cost-benefits, it was vital to simplify the content and overall user flow.
I partnered with the project lead to deconstruct the website and organize content in clear categories. I bucketed similar items together, create two new categories for "developers" and "managers," added relevant content in the new categories and removed all redundant content to ensure a layered structure making easy and relevant content discoverability a vital part of the experience.
Using the new content categories, I designed a revised user flow and then created a list of tasks centered around our business goals to perform usability testing to test the path users would take to complete each of the tasks.
With the flow established, I proceeded to create wireframe options, introducing dedicated "developer" and "manager" categories in the primary navigation and adding the primary CTA in the header.
For category pages, I designed a simple flow, assigning content priority and arranging blocks on the page to minimize the number of clicks needed to access all information on a topic.
Testing the wireframes against the team's initial goals helped me in identifying the option most suitable to solve the challenge.
Based on user feedback, I made some more changes to the primary navigation and made the call-to-action buttons consistent across the site to subtly reinforce the users to "Sign Up."
After testing the designs through quick Invision prototypes, I moved to give the design a visual lift.
Using APImetrics logo as the starting point, I created moodboards to get a sense of some of the visual elements that resonated with the brand.
One of the moodboards for APImetrics:
Based on the moodboard selections and elements that the team liked, I started designing a color palette for the website.
Before finalizing on an accent color from the proposed options, I decided to create more-fleshed out prototypes by including some real content, header image etc. to test which prototype offers an optimal experience prompting users to click on the CTA buttons.
Prototypes put to test:
Testing the prototypes revealed one color performed on average better than the others on the CTA KPI. Using the chosen color, I created visual hierarchy on the homepage using a combination of typography and colors to ensure that the pages offered a great design experience to the users.
Once the final mock-up was approved, I handed off the design to be built by APImetrics developers.