SA beauty retailer · Beauty & skincare retailA thumb-reach bottom nav with search that survives the keyboard
Home, categories, search, brands and bag were buried in the top header on mobile. The variant pins them to a bottom bar, reusing the native search so suggestions and tracking stay intact.
- The most used destinations required a reach to the top of the screen on every page.
- The native typeahead already handled suggestions well, so rebuilding it would have lost behaviour and analytics.
- iOS address-bar collapse and the on-screen keyboard both change the visual viewport in different ways.
A fixed bottom navigation with thumb-reachable search will increase search usage and category and brand navigation on mobile.
- Five-item fixed bar. Search opens a bottom-pinned input that reuses the native typeahead, with suggestions filling the lower three quarters of the screen.
- Panel relocated to the body to escape the header's stacking context, with open and close state synced from the native trigger.
- Two trigger paths, the bottom nav and the header icon, distinguished by whether the click was trusted.
Viewport as CSS variables
The visual viewport offset and height are published as custom properties on the body, and every pinned element folds them into its bottom and height. Works for both keyboard models.
No magic numbers
A hardcoded pixel stack went stale after a bar-height tweak, so every offset now derives from the same height variables the bars use.
Measured on search usage, nav ctr, pages per session. Test results belong to the client and are shared in conversation, with their permission, rather than published here.
More experiments
View all →SA daily-deals marketplace · Making the saving explicit, with numbers that match the backend
Strikethrough retail price and a 'you save' line on the product page, plus savings lines and badges on listing cards. The interesting part was getting a percentage that agreed with the store's own badge.
The hard part. Rounding display prices gave 45 percent where the store's badge said 44. The only trustworthy source was the backend saving object, keyed by product ID.
Global FMCG group · The quantity selector a bigger agency refused to build
A prospective enterprise client set a challenge before signing: build the homepage test another agency had declined as infeasible. We shipped it, and they became a client.
The hard part. No backend access. The cart had to be driven through its own undocumented API, per product, with the right quantity, from inside the testing tool.