Escaping Generic Empty States: Building A Custom App Feel With Ouch
The Bare Bones Problem
Thursday night rolled around, barely two weeks out from pushing a new running tracker to TestFlight. Core functionality worked flawlessly. GPS tracking hit every mark. Database syncs fired perfectly.
UI design told a different story.
Tapping the history tab on a fresh account yielded a stark white screen. A tiny text string whispered, “No workouts yet.” Initial onboarding consisted of three naked input fields floating in a sea of dead pixels.
Developers regularly treat empty states as an afterthought. We focus entirely on populated data views. But bare empty screens absolutely kill user retention during those critical first minutes. I needed a complete visual system without defaulting to flat, generic tech vectors that saturate app stores.
Sourcing a few isolated graphics isn’t hard. Building a massive, cohesive visual language covering add-to-cart flows, 404 pages, logins, and error messages changes the equation. Doing it without an in-house illustrator poses a serious technical challenge.
Ouch by Icons8 fixes exactly that problem.
Assembling An Onboarding Sequence
My first task? Building a welcoming onboarding sequence introducing our fitness features. Opening the Ouch web interface, I bypassed thousands of generic corporate graphics. Randomly picking from 28,000 business illustrations and 23,000 technology assets leads straight to a disjointed user experience.
Instead, I used filters to lock into one specific aesthetic out of 101 available styles. Minimal monochrome options went out the window. A colorfully bold, sketchy look fit our high-energy sports application perfectly.
Finding pre-made scenes of people running took seconds. Missing screens for connecting smartwatches and setting dietary goals required more work.
Mega Creator, an integrated online editor, solved the missing pieces. Layered vector graphics in Ouch break down into tagged, searchable objects. Grabbing a base character from a fitness pack gave me a starting point. Next, I swapped their generic shoes for detailed running sneakers. Recoloring their shirt perfectly matched our primary brand hex code.
Locating an isolated smartwatch object from a technology pack in that exact style was easy. I arranged it right into the character’s hand. Exporting the final sequence gave me crisp SVG files. Scalable vectors guarantee perfectly sharp edges across wildly different mobile device pixel densities.
Mapping The Error State Ecosystem
Missing connections, timeout alerts, and “no data” screens came next. Stock libraries notoriously fail here. They typically only offer repetitive concepts, like characters holding giant magnifying glasses for every single error.
Bluetooth failure screens need specialized graphics representing disconnected heart rate monitors. Filtering the library for healthcare and technology categories within my strict chosen style surfaced exactly what I needed. Sourcing high-quality illustration images that actually integrate into an established design system requires tight control over individual components. Rearranging these elements inside Mega Creator prevents the final product from looking like a stitched-together template.
Static images felt too lifeless for a GPS signal search screen. Ouch provides multiple animation formats, including Rive, After Effects projects, and GIFs. Downloading the Lottie JSON file for a radar animation in my matching style felt like hitting the jackpot.
Lottie files are incredibly lightweight. Bundle size matters heavily in mobile development. Dropping that JSON into our React Native codebase instantly provided a subtle breathing animation. Suddenly, the loading state felt deliberate rather than broken.
Weighing Ouch Against Alternative Ecosystems
UI designers have heavily relied on a few specific platforms for empty screens. Pitting Ouch against these alternatives reveals distinct trade-offs.
unDraw acts as the classic developer fallback. Open-source licensing and quick recoloring make it tempting. Market saturation ruins the appeal. Users instantly recognize an unDraw vector. It screams “startup template.” Removing attribution and downloading SVGs requires a paid Ouch plan. Paying unlocks drastically more variety, featuring over 101 unique styles ranging from 3D to surrealism.
Humaaans excels at character customization. Mixing and matching hairstyles, poses, and clothing feels intuitive. Mega Creator matches that exact customizability but extends far beyond people. Vast collections of web elements, holidays, nature, and objects help you build screens requiring zero human figures.
Freepik operates as a massive aggregator. You’ll find millions of vectors there. Maintaining consistent UX coverage across an entire application flow is agonizing. Hours vanish trying to find a 404 graphic matching the exact line weight of your checkout cart. Icons8 intentionally builds Ouch styles covering entire user flows, making visual consistency effortless.
Custom illustration remains the ultimate gold standard. Hiring a professional guarantees absolute uniqueness and exact brand alignment. Solo developers or startups on tight budgets simply can’t afford thousands of dollars for bespoke waiting screens. Ouch bridges that gap, providing professional quality for a fraction of the cost.
When Pre-Packaged Vectors Break Down
Expansive libraries don’t fit every project architecture. Operating strictly on a zero-dollar budget limits you to PNG formats and mandatory Icons8 link attribution. Baking attribution links directly into native mobile screens just feels awkward. That totally kills the product’s immersive feel.
Projects requiring specialized 3D assets will face friction. Forty-four different 3D styles crafted by professionals currently exist, and the collection grows daily. Formats include FBX files or MOV animations. Need highly specific, non-standard character poses that can’t be composited from existing objects? Manipulating FBX files demands dedicated 3D software knowledge.
Licensing forms another strict boundary. Printing designs on merchandise for sale requires more than the standard Pro upgrade. You’ll need to initiate a separate contact and licensing agreement for print-on-demand usage.
Tactics For Smooth Mobile Implementation
Successfully integrating massive visual libraries into a local development environment requires a strict workflow.
- Install the Pichon desktop app locally.
- Select a single illustration style in the app sidebar.
- Drag and drop transparent PNGs or SVGs directly from Pichon into your IDE or design canvas.
- Export finalized SVGs to manipulate paths directly in your codebase for dark mode toggles.
Generative assets offer another fallback. An integrated Illustration Generator produces AI images specifically trained on Ouch styles. Those obscure edge cases missing from the 28,000 business illustrations suddenly become solvable.
Paid tier users should keep an eye on usage rates. Unused downloads roll over to the next billing period. Stockpile credits during heavy coding phases. Cash them in when polish time arrives.
