GjirafaMall App — Redesign
A design-led overhaul of the GjirafaMall mobile app — from Figma concepts to production code, adding micro-interactions, animations, and the kind of polish that makes an app feel alive.
The Brief
The GjirafaMall app was functional and reliable — but it didn't feel performant. Screens loaded without grace, transitions were abrupt, and interactions felt mechanical. The redesign focused on Perceived Performance. By moving heavy UI logic to the native thread with Reanimated and implementing shared-element transitions, I transformed a functional tool into a high-performance experience. I owned both the Figma design and the code implementation.
Before vs After
Drag the slider to compare the old static experience with the redesigned version. Swipe the phone left or right to compare more pages — same screens, completely different feel.
Home
1 / 9
Redesign in Motion
A guided tour through the redesigned app — browsing, product details, add-to-cart, and checkout.
Designing in Figma
I started in Figma, redesigning key screens with a focus on visual hierarchy, whitespace, and consistent rhythm. The goal wasn't a radical rebrand — it was a refinement. Cleaner cards, better typography scales, more intentional use of color to guide attention. I designed with animation in mind from the start: every transition, every micro-interaction was planned in Figma before I wrote a line of code. This meant the implementation phase was about execution, not discovery.
Design canvas
1 / 2
Building a Design System
Before writing any feature code, I built a design system from the ground up — a shared library of tokens, components, and patterns that every screen in the app could draw from. Spacing scales, typography ramps, color palettes with semantic naming, and reusable primitives like cards, buttons, inputs, and bottom sheets. Having a design system meant I could move fast without drifting: every new screen was a composition of existing parts, and every design decision was already encoded. It also made the codebase easier to maintain — when a color or radius changed, it changed everywhere.
Micro-interactions That Matter
The details make the difference. Add-to-cart buttons that pulse with confirmation. Tab bars that respond with subtle spring physics. Pull-to-refresh with a branded animation instead of a generic spinner. Image galleries that gesture-zoom with momentum. Each interaction is small on its own, but together they create the feeling that someone cared about every pixel. I used React Native Reanimated for gesture-driven animations that run on the native thread — no JS bridge jank.
Add to cart
1 / 7
Screen Transitions & Loading States
The old app had hard cuts between screens and generic loading spinners. I replaced these with shared element transitions where the product image morphs from the grid into the detail page, skeleton screens that match the actual content layout so the page doesn't jump when data loads, and staggered list animations that make content feel like it's arriving rather than appearing. Every transition was tuned to feel responsive — fast enough to not slow users down, slow enough to be perceived.
Shared element
1 / 3
Polish as a Feature
In a competitive e-commerce market, polish is a differentiator. Users may not consciously notice that the cart badge animates when an item is added, or that the checkout button has a subtle gradient shift on press — but they notice how the app makes them feel. I've always believed that going beyond the spec with thoughtful visual touches is what separates a good app from one people actually enjoy using. This project let me prove that at scale.
What This Taught Me
This was the project that merged my design instincts with my engineering skills. I learned to design for animation — to think about timing curves and gesture physics in Figma before opening an editor. I learned the technical depth of React Native Reanimated and how to build 60fps animations that feel native. And I learned that the best way to advocate for polish in a product organization is to just build it — show the before and after, and let the difference speak for itself.
Next project
GjirafaMall — Mobile App
The GjirafaMall e-commerce mobile app — built with React Native, serving customers across multiple countries with full shopping, checkout, and account management.