MapQuest Developer
Context
Problem
Goal
MapQuest Developer is MapQuest's offering of multiple APIs and SDKs for developers of all backgrounds, from college students to enterprise businesses. Over 2 billion transactions are completed with MapQuest's web services each month.
MapQuest's geospatial services are quite valuable, but the website illustrating these offerings was outdated and confusing.
With this redesign, I aimed to inform potential customers and businesses of the solutions available to them, clearly define the pricing, and create an atmosphere of support for all customers, new and existing.
Timeframe
Oct 2023 - March 2024
Deliverable
My role
Lead Product Designer on a team with a Project Manager, Product Owner, and several developers
Overview
MapQuest's developer platform provides a range of valuable tools and APIs for developers to integrate mapping and location-based services into their apps.
Each month, customers conduct 200 million geocodes and more than 2 billion transactions with the MQ Developer platform.
Breakdown of the problem
The old website needed upgrades primarily in the following areas:
the old website uses heavy jargon in its copy and is missing essential context
📝
there are many broken links and inconsistent messaging throughout
🔗
the old pricing page is confusing and difficult to process
💰
there aren’t enough clear action links to guide users to sign up
✅
missing about page - an opportunity to build brand trust
🔒
visual design needs additional styling direction and brand tie-in
🎨
Sketches
After discussing requirements and strategy with stakeholders, I went through and identified issues that stuck out to me on the homepage - the highest priority page for the redesign.
From Hotjar survey results and previous testing, the pricing page was shown as being the most confusing among users.
With priority placed on the homepage and pricing page, I sketched out low-fidelity mocks of these pages that will get converted into high-fidelity and tested.
I transformed the sketches into high-fidelity mocks for the homepage and pricing page first to test the new versions of these high-priority pages.
I used many of the existing design elements, but adjusted and created some new styles and illustrations to breathe some new life into the visual design.
Testing
Goals: test new homepage design and decide between two pricing page variations
For the homepage test, I wanted to make sure the homepage was impactful - that it clearly expressed MapQuest Developer's services.
I also wanted to capture insights around brand and site styling. I worked alongside a UX researcher to put together the tests.
For the pricing page test, I wanted to compare two potential options:
-
a slider that would display appropriate plans based on the number of transactions needed,
-
and the cards organized by headings and subheadings to clearly express the difference between plans.
🔍 Homepage test findings
In general, the new homepage design yielded excellent results.
Users were able to easily understand MapQuest's offerings for developers and had an overall sense of trust in its services.
🔍 Pricing page test findings
The slider was favored heavily among the users. Therefore, I decided to move forward with the slider on the pricing page.
Using the data gathered from the test, I adjusted the mocks for the homepage and pricing page, and created the high-fidelity mocks for the rest of the pages.
Final Mocks & Outcomes
Goals: apply user testing results, create new illustrations, and design high-fidelity mocks for remaining pages
I worked with a motion designer to add some playful animation to the homepage hero illustration - to add some life to the page!
🎬 Final mocks
Old website homepage
New website homepage
Old pricing page
New pricing page with slider
I included the different possible states of the pricing slider, plus states for the radio button
Old FAQ page
New FAQ page with organized table of contents and search ability
Old contact page
I talked to the service managers that get these contact messages, and improved the form for both the customers and the service managers
Old blog page
The new blog page has imagery and an improved layout, instead of walls of text
The About page was missing from the existing site, so this brand new page included details about MapQuest as a whole.
I included key statistics, quotes from partners, and tied the page together with more isometric illustrations.
I worked with the engineers and the stakeholders closely during the entire process.
I made sure to include responsive mocks, the navigation menu, all various states of components, and assets for easy developer access.
I had an open line of communication with the engineers through comments on Figma, plus clearly marked states and pages.
The website is currently live on developer.mapquest.com
Outcomes
The MapQuest Developer website redesign was a huge project that took months of strategy, planning, and design.
Development was seamless, and I worked alongside the developers as they brought the mocks to life.
I was able to lead the design of the entire website and grew immensely as a designer, but teamwork and collaboration made the project run extremely smoothly.
