Sweating the Details in Fitness App UI: Can Stock Libraries Avoid the Generic Trap?

May 19, 2026 by Staff Writer

Code compiles perfectly. Heart rates graph smoothly. GPS coordinates track down to the meter. Then you hit the empty state problem.

New users open your fitness app and see nothing but blank space. No logged runs exist. Zero milestones appear. Blank screens offer zero connected devices. Populating these empty states and error screens determines whether users stay or delete.

Building a complete UI system from a stock library usually produces a startup clone. We tested Ouch by Icons8 for an extended development cycle to see if we could avoid that trap. Getting good results requires filtering styles ruthlessly and manipulating vector assets by hand. Custom artwork always wins, but startup budgets rarely accommodate that luxury.

The Tuesday Afternoon Beta Build

Late Tuesday afternoon. TestFlight builds won't wait. Core functionality for our new cycling tracker hummed along beautifully. Bare white views mocked us with raw system text. Those "No GPS Signal" and "Zero Workouts Logged" screens looked terrible. Shipping a beta with these barren screens guaranteed awful feedback on the app's polish.

Testers focus heavily on what they see first.

Custom artwork takes weeks to commission. I opened the Ouch library instead. Bypassing complex scenes in the Sport and Technology categories, I filtered for a minimal monochrome style. Clean lines read better on mobile screens anyway. A tired character holding a water bottle caught my eye. Grabbing the PNG directly, I dropped it into Xcode. Ten minutes later, a broken-looking view became a deliberate, polished interface state. We shipped on schedule.

Architecting a Cohesive Onboarding Flow

One screen is easy. Multi-step onboarding demands rigid consistency. Mixing a 3D rendered character on screen one with flat geometric shapes on screen two fractures the user experience. Users notice visual inconsistency immediately.

Grouped into 101 distinct illustration styles, Ouch solves this matching problem. Designing our fitness app's welcome sequence required three specific visuals. We needed artwork for creating an account, pairing a smartwatch, and starting that first workout. Each step needed to feel connected.

Start by picking a single style family. You will likely find corresponding metaphors within the same visual system because these styles cover entire UX flows. A sketchy-look style fit our energetic brand perfectly. Searching for individual objects yielded a base vector of a runner.

Layered vector graphics beat flat pre-made scenes every time. Ouch breaks assets down into tagged objects. Mega Creator, their free online editor, let me open the file directly in my browser. Deleting an unwanted background element took seconds. Swapping a generic mobile phone for a smartwatch from the same style category fixed the context. Changing primary accents to match our brand green finished the job. Exporting the final SVGs let us embed them straight into the codebase.

Assessing the Vector Landscape

Developers have several options for sourcing interface graphics. Comparing Ouch against unDraw, Blush, and Freepik reveals distinct architectural differences. Knowing which tool fits your sprint matters.
Massive and entirely free, unDraw includes an excellent quick-recolor tool. One singular style limits its usefulness. Embedding unDraw assets instantly gives an application that distinct SaaS dashboard aesthetic. Consumer-facing fitness brands need something vastly different. People want energy, not corporate charts.

Freepik boasts enormous volume. Finding ten matching illustrations with identical stroke widths and shadow treatments takes hours of manual editing. You spend more time fixing vectors than building features.

Component-level customization makes Blush fantastic. You swap heads, arms, and props on characters effortlessly. Ouch competes here through sheer scale. Offering over 28,000 business illustrations and 23,000 technology assets guarantees you find matching graphics. Niche use cases like 404 pages or checkout flows get covered easily. Volume matters when building large applications.

Softening the Blow of Error States

Error states require a delicate touch. Static warning triangles cause immediate frustration when server connections drop mid-workout. Injecting motion into these failure points drastically softens the clinical edge. People forgive bugs faster when the UI smiles at them.

Our primary server timeout screen needed life. Stepping away from static vectors, I searched specifically for an animated illustration matching our chosen visual family. Multiple formats exist here. You get Lottie JSON, Rive, and GIF options.

An exhausted character sitting down caught my eye. Icons8 provides the original After Effects project files alongside the exports. Opening the animation let me adjust stroke colors to match our exact hex codes. Exporting a fresh Lottie file took minutes. Dropping that JSON into the mobile application produced a smooth, scalable animation. Instantly loading, it makes the server timeout feel like a quick rest break.

Good design hides technical failures.

Where the Stock Model Breaks Down

Total reliance on a stock library comes with structural limitations. Development teams must face reality here.

Professional artists crafted 44 distinct 3D styles. They exist strictly in FBX format. GLTF or OBJ pipelines require manual conversion. Handling materials and textures falls entirely on your team. Blender skills become necessary to use these 3D assets in web environments.

Free tier limits bite hard. Using assets at no cost restricts you to PNG formats. Visible attribution links back to Icons8 must appear within your application. Premium mobile apps can't survive with UI-breaking attribution links. Unpaid tiers rarely work for serious production builds.

Physical merchandise requires special clearance. Standard Pro licenses don't cover printing these graphics on real-world items. Negotiating a separate merchandising license means contacting their sales team directly. Printing that cool running character on a team t-shirt breaks the standard agreement.

Workflow Tactics for Interface Integration

Populating dozens of application states taught us some hard lessons. A few specific tactics optimize the stock asset workflow.

Install the desktop client: Pichon bundles all illustrations locally alongside icons and transparent PNG photos. Dragging assets straight from the menubar into a Figma canvas or Xcode catalog saves hours. Stop downloading files via web browsers.
Audit the style depth first: Filter by your chosen style and search for your most obscure required concept before committing. Finding a great welcome screen hurts when error messages lack matching assets. Choose deeper style families always.
Manage your billing cycles: Unused downloads roll over when upgrading to a paid plan. Grouping illustration searches into specific sprints maximizes credit value. Drop the attribution requirement and move fast.
Search for objects, not scenes: Stop searching for entire fitness layouts. Look for single elements like a sneaker, water bottle, or calendar instead. Combine individual layered graphics into your own unique compositions.