ZIPcodeAPI

ZIPcodeAPI

Case study

Case study

Case study

UX/UI Design

ZipcodeAPI website redesign

UX/UI Design

ZipcodeAPI website redesign

Product design / Branding / Research / Implementation

ZipcodeAPI website redesign

Overview

Overview

Overview

In today's fast-paced digital world, manual form filling is a hassle. ZipcodeAPI, is a product that makes forms faster by auto-filling information and providing accurate US and Canadian Zip Code Distance, Radius, and Location API. Тhis is a project that I have worked on as a contractor for Anavel Creative. Our mission was clear: revamp the outdated design of ZipcodeAPI and create a user-friendly and intuitive experience.

Our team

Our team

Blagovest Dimitrov (Me)

UX / UI Designer

Blagovest Dimitrov (Me)

UX / UI Designer

Anastasiya Veleva

Product Designer

Anastasiya Veleva

Product Designer

My role

My role

My role

Research

Design strategy

UX/UI Design

Problem statement

Problem statement

Problem statement

Dealing with unintuitive layouts

Dealing with unintuitive layouts

Dealing with unintuitive layouts

The original design of ZipcodeAPI presented significant hurdles for users. The cluttered layout and lack of intuitive navigation made it difficult for visitors to access the essential features of the API. Additionally, the outdated visual aesthetics failed to resonate with users, making it challenging to establish trust and credibility.

Challenges

Challenges

Challenges

Overcoming design complexity

Overcoming design complexity

The challenges posed by the original design of ZipcodeAPI were multi-faceted, significantly impacting the user experience and hindering the platform's overall effectiveness. Let's explore each challenge in detail:


1. Cluttered Layout

2. Lack of Intuitive Navigation

3. Outdated Visual Aesthetics

4. Limited Mobile Responsiveness

5. Unclear Call-to-Action (CTA) Elements

6. Lack of Accessibility Features

Overcoming design complexity

Design strategy

Design strategy

Design strategy

Our design strategy for ZipcodeAPI centers on enhancing user experience through various key elements. We create a clear visual hierarchy, utilizing contrasting colors and visual cues, to guide users' attention towards important elements such as key features, pricing plans, and call-to-action buttons. Incorporating interactive elements like tooltips and hover effects, we provide users with additional context without overwhelming them with excessive content. We craft compelling and concise content, complemented by engaging visuals, animations, and storytelling, to effectively communicate the value proposition of ZipcodeAPI and captivate users. Furthermore, we prioritize accessibility by adhering to WCAG standards, ensuring all users, including those with disabilities, can access and use the website seamlessly. Implementing a fully responsive design, we cater to the increasing number of mobile users, offering a seamless experience across various devices and screen sizes. This holistic approach aims to create a user-centric and inclusive platform that resonates with our audience and drives positive engagement.

Redesigning the pricing plan page

Redesigning the pricing plan page

Redesigning the pricing plan page

A critical component of our mission was to redesign the pricing plan page to provide a clear and user-friendly experience for potential customers. The initial pricing page suffered from a chaotic layout, with scattered Call-to-Action (CTA) buttons and plans presented in an unstructured table without any headers. This disarray led to a loss of user orientation and hindered the page's effectiveness in driving conversions.

Progressive order

Progressive order

Progressive order

To create a sense of progression and aid user decision-making, we thoughtfully arranged the cards from left to right in ascending order of cost and features. The Free plan was placed on the left, followed by the plans in increasing order of price, culminating in the Enterprise plan as the most comprehensive option.

Pricing

Yearly

Monthly

Enterprise

Free

Small

Medium

Large

Extra large

Pricing

Yearly

Monthly

Enterprise

Free

Small

Medium

Large

Extra large

Pricing

Yearly

Monthly

Enterprise

Free

Small

Medium

Large

Extra large

Organizing plans in horizontal cards

Organizing plans in horizontal cards

Organizing plans in horizontal cards

We restructured the pricing plans into individual cards, presenting them in a horizontal layout. This allowed users to naturally employ the Lawn Mower Pattern, effortlessly scanning through the cards, row by row, as they methodically compared the plans.

Pricing

Requests/second

0.00

Requests/minute

0

Requests/hour

10

Requests/day

240

Start Now

Free

$0

/ year

Requests/second

0.06

Requests/minute

3

Requests/hour

200

Requests/day

4,800

Buy Small

Small

$99

/ year

Save $21 per year

Requests/second

0.69

Requests/minute

42

Requests/hour

2,500

Requests/day

60,000

Buy Medium

Medium

$299

/ year

Save $61 per year

Requests/second

3,47

Requests/minute

208

Requests/hour

12,500

Requests/day

300,000

Buy Large

Large

$1000

/ year

Save $80 per year

Requests/second

13.89

Requests/minute

833

Requests/hour

50,000

Requests/day

1.200,000

Buy Extra Large

Extra Large

$2000

/ year

Save $160 per year

Go Unlimited

For large enterprise. Gain unlimited requests per hour.

Learn more

$5000

/ year

Yearly billing only

Buy Unlimited

Yearly

Monthly

Pricing

Requests/second

0.00

Requests/minute

0

Requests/hour

10

Requests/day

240

Start Now

Free

$0

/ year

Requests/second

0.06

Requests/minute

3

Requests/hour

200

Requests/day

4,800

Buy Small

Small

$99

/ year

Save $21 per year

Requests/second

0.69

Requests/minute

42

Requests/hour

2,500

Requests/day

60,000

Buy Medium

Medium

$299

/ year

Save $61 per year

Requests/second

3,47

Requests/minute

208

Requests/hour

12,500

Requests/day

300,000

Buy Large

Large

$1000

/ year

Save $80 per year

Requests/second

13.89

Requests/minute

833

Requests/hour

50,000

Requests/day

1.200,000

Buy Extra Large

Extra Large

$2000

/ year

Save $160 per year

Go Unlimited

For large enterprise. Gain unlimited requests per hour.

Learn more

$5000

/ year

Yearly billing only

Buy Unlimited

Yearly

Monthly

Highlighting key features

Highlighting key features

Highlighting key features

Each card in the pricing plans featured vertically aligned attributes with key features prominently highlighted, allowing users to quickly grasp the unique selling points of each plan and make informed decisions. Additionally, we strategically emphasized the recommended plan to guide users towards their optimal choice, providing a visual cue for swift decision-making based on their specific needs. The redesigned pricing plans significantly improved the user experience, facilitating seamless comparisons and enhancing the overall effectiveness of the ZipcodeAPI website.

API documentation page

API documentation page

API documentation page

Clear and organized layout

Clear and organized layout

Clear and organized layout

The API documentation page plays a crucial role in providing users with essential information about ZipcodeAPI's capabilities. To ensure a seamless and informative experience, we have carefully designed this page with a focus on accessibility and user engagement. The layout of the API documentation page has been thoughtfully organized to prioritize user actions and key information. The first call-to-action (CTA), "Get Free Application Key," is prominently displayed as the largest block, encouraging users to easily access the API and get started quickly. Logically followed by a streamlined upgrade option addressing the needs of users who may require more advanced features beyond the free plan. The third CTA ensures a smooth flow of information. Our aim was to guide users through the integration process efficiently.

Live API

Low Cost Upgrades

Upgrade

Set up Javascript Access

Use on Your Website

Get Free Application key

Register

Important! Our API only supports US zip codes and Canadian postal codes. You must use the appropriate endpoint for the country you desire.

When working with CA postal codes in URLs, you must either remove the space or URL encode it (e.g. with a plus sign). For example, A0A 1A0 should appear in the URL as A0A1A0 or A0A+1A0. The data for the Canadian API is sourced from the GeoNames data sets, which are licensed under the Creative Commons Attribution 4.0 License.

ZIPcodeAPI

Home

Features

Pricing

API

Reviews

SignUp

LogIn

Live API

Low Cost Upgrades

Upgrade

Set up Javascript Access

Use on Your Website

Get Free Application key

Register

Important! Our API only supports US zip codes and Canadian postal codes. You must use the appropriate endpoint for the country you desire.

When working with CA postal codes in URLs, you must either remove the space or URL encode it (e.g. with a plus sign). For example, A0A 1A0 should appear in the URL as A0A1A0 or A0A+1A0. The data for the Canadian API is sourced from the GeoNames data sets, which are licensed under the Creative Commons Attribution 4.0 License.

ZIPcodeAPI

Home

Features

Pricing

API

Reviews

SignUp

LogIn

Comprehensive Documentation

Comprehensive Documentation

Comprehensive Documentation

To facilitate a deeper understanding of how the APIs function and how to set them up, we have included important notes alongside a full list of the APIs. The use of an accordion element streamlines the presentation, allowing users to easily navigate through the information. The closed accordion presents only the name and function of each API, while expanding it reveals all the key details, including the API key, format, and metrics required for seamless utilization.

Error Code Reference

Error Code Reference

Error Code Reference

At the end of the page, a comprehensive table lists all possible error codes related to the APIs. This reference equips users with troubleshooting information and enhances the overall user experience by addressing potential issues proactively.

Summary

Summary

Summary

Conclusions and further implementations

Conclusions and further implementations

Conclusions and further implementations

The ZipcodeAPI project is on track to deliver a user-friendly website that streamlines form filling with auto-filled information based on zip codes. With clear layouts and strategic CTAs, user engagement and conversions are expected to improve significantly. The new pricing page boasts a clear and organized layout, allowing users to easily compare plans and make informed decisions. Key features are prominently highlighted, guiding users to the optimal plan that best suits their needs. The inclusion of a separate big card for the enterprise plan caters to larger-scale requirements, ensuring all users find suitable options. The API documentation page will be a valuable resource, offering comprehensive insights and simplified setup instructions for developers. With a focus on continuous improvement and user-centric design, ZipcodeAPI aims to redefine the Zip Code-based services landscape in the US and Canada, delivering a transformative user experience that sets new standards in the API services industry.

Let’s work together!

For work inquires feel free to get in touch with me

Send me a message

© 2023 blago.design

Let’s work together!

For work inquires feel free to get in touch with me

Send me a message

© 2023 blago.design

Let’s work together!

For work inquires feel free to get in touch with me

Send me a message

© 2023 blago.design