TimeTac

Established Company

Show all Videos

Challenges in mobile application development

Ludwig Blaikner von TimeTac spricht in seinem devjobs.at TechTalk über den Weg, wie das Team ein Design Proposal zu einer funktionierenden Mobile Software gebaut hat.

By playing the video, you agree to data transfer to YouTube and acknowledge the privacy policy.

Video Summary

In 'Challenges in mobile application development,' Speaker Ludwig Blaikner shows how his team turned a new dashboard design into production while preserving the existing code base. He outlines the main constraints—limited screen space, performance, an iPad multi‑column layout, and simplifying the UI with show/hide and reordering—and presents a solution using a single template cell that wraps each section’s header/content/footer in its own collection view plus a height‑calculation method, enabling padding, rounded corners, and shadows with Apple‑only tools. Viewers can apply these patterns to simplify complex dashboards, maximize code reuse, and ship maintainable, high‑performance native iOS interfaces.

Re-architecting a mobile dashboard without rewriting: Lessons from TimeTac’s “Challenges in mobile application development” with Ludwig Blaikner

Context: Turning design proposals into production-grade apps

In “Challenges in mobile application development,” Ludwig Blaikner of TimeTac offers a grounded account of how a team takes a polished design idea and folds it into a real, widely used mobile product. TimeTac is a leading time and attendance SaaS provider, and its native mobile clients are used by thousands of employees across many industries. That scale matters: the dashboard is the most-viewed screen and the first touchpoint on login. Any change must preserve clarity, performance, and maintainability.

This talk is about more than styling. It’s about protecting a proven codebase while delivering a fresh look that improves readability and interaction. Design and UX experts at TimeTac research trends and explore how to adapt them for the app. Engineering then has to turn the drafts into stable, fast, and maintainable software.

The problem space: Dense information on a small canvas

The dashboard compresses a lot of important information and offers direct interactions (like starting or stopping a task). The guiding principle is simplicity: ensure users aren’t overwhelmed. Mobile brings constraints—limited screen space and varying hardware performance—so every visual change must be measured against rendering cost and scrolling smoothness. The goal is twofold:

Make different kinds of information easy to distinguish
Maintain a smooth scrolling experience for quick navigation

There’s also a strong personalization angle: TimeTac lets users show or hide certain information and freely arrange the order of individual items. That control reduces perceived complexity and helps users fit the dashboard to their workflow.

Dashboard architecture: Three key items per section

Blaikner describes a consistent structure across dashboard sections:

Header: Defines the context of the visualized data
Content: Presents core information and allows direct interactions
Footer: Provides a pathway to more subject-related data

This three-part model balances context, action, and depth. It also creates a predictable surface for users and a common contract for the code.

iPad layout: A deliberate multi-column approach

On iPad, TimeTac didn’t just scale the iPhone layout; they built a specific multi-column layout to use the larger canvas effectively. That raises the bar for any redesign: visual changes must work in single-column and multi-column contexts, without artifacts or performance regressions.

The visual goals: Padding, rounded corners, and a subtle shadow

The redesign targeted three clear objectives:

Increase padding around content cells
Add rounded corners to the top and bottom of each cell
Apply a subtle drop shadow

These sound modest, but they interact in complex ways. When applied across a working product with diverse sections, a straightforward “paint” can quickly hit structural limits.

Four concrete challenges

Blaikner frames the engineering effort around four requirements:

Adopt the design drafts provided by the design department
Reuse the existing codebase
Ensure compatibility with the iPad layout
Maintain performance

The constraint that shaped everything else: no rewrite. The team needed a compositional change, not a new rendering engine.

The core issue: Shadows and corner radii bleeding between items

With sections composed of separate header, content, and footer items, applying rounded corners and shadows to each piece produced visual bleeding and undesired overlaps. The look simply didn’t hold together when the parts were rendered independently. The three-piece composition was too fragmented for the new visual cohesion.

The team needed a new unit of encapsulation—something to “own” the visual frame for a section.

The solution: A template cell that wraps the section

The breakthrough was a single template cell that wraps all existing dashboard code in its own collection view. Instead of handling header, content, and footer as separate siblings, the section is now contained within one parent cell. Benefits:

Reduced complexity: From three items per section to one
Visual consistency: Rounded corners and shadow are applied to the template cell once, enclosing the entire section
Code reuse: The existing dashboard logic keeps running inside the template cell’s internal collection view
Clean separation of concerns: The template cell provides the visual framing; the inner collection view manages the content structure

This re-composition transforms an intractable styling issue into a tractable container responsibility. The place where you apply the visual treatment is now a single, reliable boundary.

Dynamic content height: A dedicated calculation method

Accurate height calculation is critical for smooth scrolling. TimeTac implemented a method that takes three inputs to determine the necessary content height per section:

An identifier to discriminate what is being visualized
A data source with the list of items to show
A standard parameter that provides context about the caller

Within that method, the flow is straightforward and robust:

Add default heights for header and footer
Handle the case where there are no recent tasks
Compute the content height if recent tasks exist
Apply product-specific configuration related to the TimeTac backend

This keeps the sizing logic centralized and data-driven. By getting heights right before rendering, the app preserves the smooth scrolling experience the team prioritized.

Staying native: Only Apple-provided tools

Blaikner emphasizes that the team accomplished the redesign with Apple’s native tooling—no third-party libraries, no custom rendering hacks. That choice pays off on several fronts:

Performance: Native components are optimized and well-integrated
Maintainability: Fewer external dependencies and clearer upgrade paths
Future-readiness: Staying close to platform standards eases evolution

For a product used daily by thousands, those qualities are crucial.

Outcome: A modern look that respects the codebase

The updated dashboard on both iPhone and iPad delivers the intended visual changes: increased left-right padding, rounded top and bottom corners for each cell, and a subtle drop shadow. Because these treatments are applied at the template cell level, they don’t interfere with inner content structure or iPad’s multi-column arrangement.

The net effect is better readability and a more cohesive visual hierarchy, achieved without sacrificing stability or speed.

What engineers can take away

From our DevJobs.at vantage point, several principles stand out as broadly applicable:

Encapsulation over scattering: Centralize cross-cutting visuals (shadows, corners, spacing) in a single parent component rather than sprinkling them across children.
Reuse before rewrite: A template cell lets you preserve existing logic while modernizing the presentation layer where it matters.
Data-driven height calculation: A single sizing method, keyed by content type and data availability, prevents layout jumps and keeps scrolling smooth.
Device-aware from day one: Test and design for both phone and tablet, especially when you have multi-column layouts on iPad.
User control reduces complexity: Show/hide and reordering features give users agency and inform architecture decisions about modularity and rendering boundaries.
Native first: Prefer platform-native tools until you have a strong reason to add external dependencies.

A practical checklist for similar redesigns

Identify the visual frame: Which properties must be consistent across the entire section (padding, corner radius, shadow)?
Create a container component: A parent cell/component that owns those properties.
Embed existing logic: Move proven header/content/footer structures inside the container.
Centralize sizing logic: Implement a method that computes heights per content type, data condition, and caller context.
Validate on both form factors: Exercise the design on iPhone and iPad early, including multi-column scenarios.
Measure scrolling performance: Use real datasets and paths that users navigate most often.
Keep dependencies minimal: Reach for third-party libraries only when they provide clear, necessary value.

User experience outcomes: Clarity, hierarchy, and flow

The dashboard must help users distinguish information types quickly, take direct action, and move fluidly. TimeTac’s approach advances all three:

Clarity via structure: Headers set context, content carries the core info and interactions, footers lead deeper.
Cohesion via a section-level frame: A single shadowed, rounded container reads as one unit and avoids visual seams.
Flow via reliable sizing: No jitter or reflow surprises as users scroll across sections.

The team factor

Blaikner closes by highlighting the teamwork behind the result—design, UX, and engineering working in tandem, and customer feedback guiding iterations. He quotes Steve Jobs:

“Great things in business are never done by a single person, they are done by a team of people.”

In practice, that teamwork shows up as careful tradeoffs and pragmatic architecture. The template cell is a small abstraction with big leverage: it lets the team honor design goals, preserve a battle-tested codebase, and stay fast on both iPhone and iPad.

Conclusion: Redesign as an architectural opportunity

The core lesson of “Challenges in mobile application development” is that a visual refresh can be an architectural improvement. By elevating the section to a first-class container—the template cell—TimeTac centralized visual responsibilities, simplified complexity, and retained performance. The redesign doesn’t fight the existing structure; it reframes it.

For engineers shipping mobile apps at scale, the message is clear: treat the visual layer as a compositional problem. Put the frame where it belongs, keep sizing logic centralized and predictable, and use native tools to their fullest. The result, as TimeTac shows, is a dashboard that looks modern, feels fast, and remains maintainable for the next iteration.

More Tech Talks