UX and UI
A key challenge of this project was figuring out how to support a wide range of devices and activities without overwhelming customers. After much research, many prototypes, and countless meetings, we launched with a card-based approach that addressed several important use cases:
- New customers could be onboarded quickly and easily find activities, set goals, and manage devices.
- Power-users had easy access to advanced data and activity analysis
- Connect could easily support future devices, features, and data
Dashboard
![Dashboard](/img/samples/connect/connect-desktop-home.jpg)
Activities
![Activities](/img/samples/connect/connect-desktop-activities_full.jpg)
Activity Detail
![Activity Detail](/img/samples/connect/connect-desktop-activity-detail_full.jpg)
UI Style Guide
Multiple design teams contributed to different aspects of the platform and marketing. To ensure consistent application of our design patterns, we developed a comprehensive style guide. It included elements like color, typography, interface elements, and more.
Color
![Style Guide - Color](/img/samples/connect/ui-guide_color_1000.jpg)
Buttons
![Style Guide - Buttons](/img/samples/connect/ui-guide_buttons_1000.jpg)
Widgets
Navigation
![Style Guide - Navigation](/img/samples/connect/ui-guide_navigation_1000.jpg)
Menus
![Style Guide - Menus](/img/samples/connect/ui-guide_navigation-menu_1000.jpg)
Brand Development
Before the relaunch, Connect lacked any kind of distinct visual brand. We created a clean and simple typographic identity that could both stand on its own and complement the Garmin logo when they appeared together on packaging, and in advertising.
Before
![Logo - Before](/img/samples/connect/connect_no-logo.png)
Concepts
![Logo Concept](/img/samples/connect/logo-concept-01.jpg)
![Logo Concept](/img/samples/connect/logo-concept-02.jpg)
![Logo Concept](/img/samples/connect/logo-concept-03.jpg)
Final Logo
![Logo - Full Color](/img/samples/connect/logo-full-color.jpg)
![Logo - 1-Color](/img/samples/connect/logo-1-color.jpg)
![App Icon](/img/samples/connect/logo-app-icon.jpg)
Branded Elements
![Branded Elements - Apparel](/img/samples/connect/logo-brand-elements-01.jpg)
![Branded Elements - Packaging and Events](/img/samples/connect/logo-brand-elements-02.jpg)
Marketing
For the launch, we developed a standalone site to promote the redesigned platform and features and drive new customer registrations.
Homepage
![Marketing Site - Homepage](/img/samples/connect/connect-site-home.jpg)
Features
![Marketing Site - Features](/img/samples/connect/connect-site-features.jpg)