Goals - Fitness app

Landing page
Logo redesign
Mobile responsive
Contents
Industry
Fitness &
wellness
Time
3 weeks
My role
UI Designer
Scale
Landing pageredesign+ Mobile responsive+ Logo refresh
View  Figma Prototype

Executive Summary

Challenge

Outdated landing page didn't reflect quality of 4.7★ app with 3.2K+ users

Text-heavy layout, poor visual hierarchy

Generic design patterns from early 2010s

Not optimized for mobile viewing

Approach

Competitive analysis of 15+ fitness app landing pages

UI heuristic evaluation using Nielsen's principles

Mobile-first responsive redesign

Brand identity refresh while preserving signature green

Key Design Decisions

Dark theme for premium, focused feel

Card-based layout for scannability

Logo modernization for better scalability

Problem-solution framework before features

Deliverables

Desktop landing page redesign

Mobile responsive layout

Logo refresh and variations

Design system documentation

Measurable Improvements

Accesibility

WCAG score: 52 → 87/100

Time Pressure

Clear focal points: 0 → 3

Integration Gaps

Green identity preserved

Collaboration Barriers

Responsive: No → Yes (100%)

Note: The 4.7★ rating app achievements, redesign metrics (WCAG, hierarchy, responsiveness) reflect improvements to the landing page itself. As a portfolio project, conversion lift could not be measured with real users

Overview

Project Context
‍Goal Fitness is a highly-rated fitness tracking app (4.7/5 stars, 3.2 k ratings) with excellent functionality. This portfolio project focused on redesigning their landing page to better reflect the quality of their mobile app.

Scope
‍Desktop landing page UI redesign, mobile responsive version, logo refresh, and design system development.Note: This is a portfolio project showcasing UI design skills. The actual Goal Fitness mobile app was not redesigned—only their web presence.

Note: This is a portfolio project showcasing UI design skills. The actual Goal Fitness mobile app was not redesigned—only their web presence.

Goals Fitness App: Landing page before redesign. Visit the original page here: https://apptuitive.at/goals/

What I Saw: The Problems

The original landing page had a few critical issues preventing it from making a strong first impression:

❌ ORIGINAL ISSUES

Desktop landing page redesign

Generic headline, buried CTA

Text-heavy paragraphs, hard to scan

Small, scattered phone mockups

Minimal white space

Weak brand presence

Not mobile-optimized

✅ Redesign Solutions

Bold dark hero with clear hierarchy

Action-driven headline, prominent CTA

Scannable card-based layout

Generous breathing room

Strategic green accent throughout

Fully responsive mobile version

From mood board to system

design System

Typography

Bold headlines with generous line spacing. Clear hierarchy using size, weight, and spacing.

Colors

Each color support focus and motivation —helping users feel ready to start and keep going.

Fonts

Is a strong, modern typeface designed to deliver clarity, visual impact, and a friendly style, making it perfect for headlines and professional presentations

Color Palette

Dark backgrounds create premium feel while making green brand color pop. WCAG AA compliant contrast ratios throughout.

AirbnbCereal_W_XBd
Aa
HEADINGS
Bb
AirbnbCereal_W_Lt
Aa
PARAGRAPHS
Bb
#5DC46F
#E8F3EC
#010904
#011802

Icons

Used just enough icons to make things intuitive, not noisy.

Three strategic design decisions

After several iterations, I developed a high-fidelity prototype solid enough to kicks.

1. Dark Theme: Premium Feel & Strategic Contrast

Decision
‍Switched from white to dark background for hero and key sections.

Why it works
‍Modern fitness apps (Apple Fitness+, Peloton) use dark themes to create a focused, premium feel. The dark background makes the signature green color (#00C853) pop dramatically, strengthening brand presence. It also allows phone mockups with bright screens to stand out clearly.

Competitive insight
‍80% of analyzed premium fitness landing pages use dark themes. This isn't trendy—it's functional for creating visual hierarchy and reducing eye strain for users planning workouts at night.

Features Section Comparison After Redesigned scannable card layout with mockups

Decision
‍Transformed long bullet-point lists into visual feature cards with high-quality mockups.

Why it works
‍Each card tells a complete micro-story (visual + headline + benefit description). Users can scan all three core features in seconds versus reading 20+ bullet points. Modern users don't read—they scan. The redesign respects this behavior..

Information architecture
‍Reduced visible text by 60% while maintaining all key information through strategic restructuring and visual storytelling.

2. Card-Based Feature Layout: Scannability Over Text

3. Logo Redesign + Mobile Responsive: Complete Ecosystem

Decision
‍Refreshed logo for modern clarity and created fully responsive mobile version of entire landing page.

Why it works
‍The logo now scales beautifully from large format (landing page header) to small format (app icon, favicon). Mobile optimization was non-negotiable—fitness app users are mobile-first by nature. Many discover apps while searching on their phones.

Brand continuity
‍Logo refresh preserves recognition (kept green, kept "goals" concept) while modernizing execution. Mobile layout uses single-column design, larger tap targets, and optimized image loading for cellular connections.

Original Logo Design
‍Basic geometry, lacks scalability at small sizes,  outdated visual style
‍

Redesigned Logo
‍Modern mark with improved scalability. Strengthens  brand identity while preserving recognition.

High fidelity designs

After several iterations, I developed a high-fidelity prototype  that balanced modern UI patterns with Goal Fitness's established  brand identity

Features Section Comparison After Redesigned scannable card layout with mockups

Applied principles

Preserve brand identity: Green signature color strengthened throughout, not replaced

Hierarchy guides attention: Size, color, spacing used intentionally to direct eye flow

Mobile-first thinking: Responsive design ensures consistent experience across devices

Empathy before features: "What's holding you back?" section creates connection before pitching solutions

Clarity over cleverness: Timeless, functional design that will age well

What I Learned

Brand Identity Lives in Details
‍Preserving Goal's green color wasn't nostalgia—it was continuity and trust. Users who love the app needed to recognize it. New users needed to see a cohesive brand. Great UI updates honor what's working while fixing what isn't.

Hierarchy Is Everything
‍The original page had good content but no visual hierarchy. Using size, color, spacing, and layout strategically transformed the same information into something scannable and compelling. Users don't read—they scan. Design for scanning first, reading second.

Dark Themes Require Intentional Contrast
‍Switching to dark backgrounds meant careful attention to WCAG contrast ratios (4.5:1 for body text, 3:1 for large text). Every color decision required accessibility validation. Dark themes aren't just aesthetic—they're a UX challenge requiring careful color management.

Thank You!

‍For reading through! Hope you enjoyed learning about my design and thought process. 🙂

Want to see Goals in action?

You can take a look at the prototype and interact

with the design here.

Disclaimer:  This is a portfolio project and not an actual client or live product.

Back home
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.