Wahoo Developer Portal
Wahoo introduces a Cloud API for 3rd party developers to integrate with Wahoo products and user data
Prior to launching a cloud API, the Wahoo Cloud team requested design enhancements to the existing Wahoo developer portal (dev.wahooligan.com).
I redesigned the developer portal from the ground up to match our existing company websites (mostly product marketing), but with with a developer-inspired touch and user-friendly applications to request use of the API.
Team
Wahoo Cloud Team
UX/UI Designer: Mackenna Lees
Wahooligan.com
Problem
Developer portal
Cloud team requested “enhancements” to the Wahoo developer portal with a tight timeline pre-launch of the Wahoo Cloud API.
Red: pages needed that do not exist
Yellow: pages that need design help
Green: help is welcome
End user
With 3rd party apps entering the scene, users need a unified cloud profile to see + remove previously authorized 3rd party apps
Process
Digest current state
Competitive research
Site map
Concept
Design system
State of the portal: previously
main developer page — completely usable but very basic html/css. needed a breath of life / brand to make it feel wahoo.
new app — similar issues. it doesn't feel like a "putting in a request" form, and it needs to be. with error states and everything.Competitive Research
Garmin, Strava, FitBit
Wahoo competitors Garmin, FitBit, Strava each have Developer tools API documentation that felt successful to me for a few reasons.
Branded
You could tell someone had designed the page and made it fit in with the overall brand.
Communicative
Accessible without login
Comparing Wahoo’s developer site to our competitors made it clear that we weren’t hitting the mark.
Site map
Finding gaps in the flow
A site map is a useful tool to try to make sure there are no “dead ends”. Ours had plenty, and two different top nav bars at that (oh no).
From this site map, I defined solutions for gaps in the flow…
Pages that do not exist
Interactions that have broken paths
UX that feels clunky/doesn’t lead where you would think (nav for example)
Fix login (view pages)
Finding two different top navs
Concept
Build the “new” Cloud page while templatizing the experience
Design a template to be shared by all three API info pages (IOS, Android, Cloud)
Bring the Wahoo brand into the portal
Subtle “spin” since it’s a developer tool and can be more “techy”
Bring in more “black” where possible for dark mode vibes
Clean up usability wherever possible
Design system
My boss designed this user registration form for our main user login — even though it was small, it offered a lot in terms of how to make the developer portal branded and clean within its own “design system”
Design system etc.
Homepage
Bring in the brand with UI elements first, content second
Header styles, buttons
New Wahoo Developer “logo”
Craft copy to be equal per section, with consistent calls to action
Links to each API should make them feel equal in value
Wireframe
Wireframe
Hi-Fi
With imagery, the homepage comes to life
Stacking sections vertically makes this feel more like a “hub” of dev materials
Enables content to change as the site grows
API templates
New components
Added jump links
Added a back button/breadcrumb
Links and buttons are Wahoo bluefor contrast/pop
Streamlined “need help?” section on all API pages with contact info
Defined heading styles and hierarchy
Nested + numbered sub-sections to look like a part of a whole
Breathing room added between sections and content like bullets
All images and screenshots are centered, with a caption describing the image/step.
API templates
New components
Added jump links
Added a back button/breadcrumb
Links and buttons are Wahoo bluefor contrast/pop
Streamlined “need help?” section on all API pages with contact info
Defined heading styles and hierarchy
Nested + numbered sub-sections to look like a part of a whole
Breathing room added between sections and content like bullets
All images and screenshots are centered, with a caption describing the image/step.
New page for Cloud API
Wrote the new page for the Cloud API based on template-ized page hierarchy and materials from Cloud team
○ API summary
○ API documentation -> link
○ O-Auth information and scopes
○ Request and approval processes
○ Help/contact
○ Get started link
