Light, quick, and quietly delightful
An end-to-end redesign of the GjirafaMall mobile app — owned solo from research and Figma through production React Native. A case study in holding design and engineering as one discipline, and the system that came out of it.
The Brief
I owned the GjirafaMall app redesign end-to-end, solo — research, UI and interaction design in Figma, and the full React Native and TypeScript build.
The hard part was holding design and engineering together: every Figma decision constrained the next code decision, and back.
What I'm proudest of isn't the screens — it's the system left behind: the component primitives and interaction patterns the team now builds new features on.
Before vs After
Drag the slider to compare the old, static app with the redesign. Swipe the phone for 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.
Research — Auditing the Existing App
I treated the existing app as the brief. I walked the full purchase journey on real devices, screen-recorded every flow, and reviewed it frame by frame: where the eye lands, where the app goes silent, which interactions feel mechanical.
The output was a ranked list of friction points. That list, not a moodboard, became the design brief.
Design — Refining in Figma
Not a rebrand — a refinement guided by the audit: clearer hierarchy, deliberate whitespace, consistent vertical rhythm.
Design canvas
1 / 2
UX — The Laws Behind the Screens
Every layout choice is anchored to a principle. Three are shown below; three more shaped the details:
- Hick's Law — the tab bar is capped at 5; long-tail filters sit behind progressive disclosure.
- Miller's Law — cart, checkout, and order details are chunked into scannable clusters.
- Peak-End Rule — shaped the post-purchase moments, where lasting impressions form.
Jakob's Law
Bottom tabs, top-anchored search, product-card grid, sheet-based detail — patterns shoppers already know, so cognitive load goes to the products.
Fitts's Law
Add to Cart, Buy Now, and Checkout sit in the thumb zone with generous hit targets — the most important tap should be the easiest motion.
Doherty Threshold
Every action gets visible feedback under 400ms — optimistic UI, skeleton states, and shared-element transitions exist for this.
UI — Why It Looks the Way It Does
Small choices on their own — together, they make it read as a system instead of a collection of screens:
- Type — a 9-step modular scale; weight, not size, does most of the hierarchy work.
- Spacing — a 4-point grid: 4/8/12 for component padding, 16/24/32 for layout.
- Color — semantic, not decorative.
- Radius — each surface class gets its own: 8px for inputs, 12px for cards, 24px for sheets.
- Detail — subtle elevation, one icon stroke weight throughout.
System — What's Left Behind
Before any feature code, I built the design system as tokens and primitives — spacing, type, color, and composable components (cards, buttons, inputs, sheets, list rows, badges). Each Figma component has a 1:1 React Native counterpart: same name, same props, same variants.
The team now builds new features from these primitives instead of starting from scratch. That's the legacy — not the screens I shipped, but the ones future engineers ship faster.
Micro-interactions That Matter
The details make the difference: add-to-cart buttons that pulse to confirm, a tab bar with subtle spring physics, a branded pull-to-refresh instead of a generic spinner, and image galleries that zoom with momentum.
Each is small on its own; together they show someone cared. All of it runs on the native thread with Reanimated — 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. Now the product image morphs from the grid into the detail page, skeletons match the real layout so nothing jumps, and lists stagger in so content arrives rather than appears.
Every transition is tuned to be fast enough not to slow anyone down, and slow enough to be noticed.
Shared element
1 / 3
The Hardest Part — Holding Design and Engineering Together
Solo ownership means there's no handoff to hide behind — every Figma decision is a code decision, and every code constraint pulls back on the design.
A card balanced with a 3-word title had to survive a 12-word Albanian one. A bottom-sheet height had to coexist with the keyboard, safe area, and dynamic type on real devices.
Polish as a Feature
In a competitive e-commerce market, polish is a differentiator. Users may not notice that the cart badge animates or the checkout button shifts on press — but they feel it.
That's the Aesthetic-Usability Effect: a more polished surface is perceived as more reliable, even when the functionality is identical.
What This Taught Me
- Owning both sides meant I couldn't blame the other — the spec couldn't be wrong and the implementation couldn't fall short, because both were me.
- Design with implementation in mind; code with the design's intent intact. Neither side is allowed to make decisions the other can't honor.
- UX laws aren't decoration — they're load-bearing decisions that have to be defensible to anyone who asks why a button is where it is.
- The most valuable thing a single person can leave behind isn't a polished surface — it's a system that lets the next person ship faster.
- Screens get redesigned. The primitives outlast them.
Next project
GjirafaMall — Mobile App
The GjirafaMall e-commerce app, built from the ground up in React Native — I was a core contributor to its screens, interactions, and implementation. It serves customers across multiple countries with full shopping, checkout, and account management.