Skip to content
/
  • Work01
  • About02
  • Contact03
  • LinkedIn (opens in a new tab)
  • Behance (opens in a new tab)
  • GitHub (opens in a new tab)
  • Instagram (opens in a new tab)

Ahmed Hassan · Portfolio ©2026

WorkAboutContact↗

Got a product in mind?

LLeett''ss  mmaakkeeiitt  rreeaall..

Say helloSSaayy  hheelllloo↗
© 2019–2026 Ahmed HassanBack to top ↑
White beltOss.
← All work

Mobile app · Martial arts · 2025

Anubis

Class packages, sessions, coaches and QR check-in for Anubis Martial Arts across its branches.

Client
Anubis Martial Arts, Egypt
Role
Research & UI design
Scope
Mobile app
Tools
Figma
  • UX research
  • UI design

Overview

Members train hard and want to see it: what they've attended, what's left on their package and which class is next. Anubis needed one app that shows them, and takes the admin off the front desk.

The Anubis app's home screen on a phone

01Research

Research

Anubis Martial Arts Academy trains Brazilian Jiu-Jitsu, submission grappling, MMA and Muay Thai in Egypt. Its head coach, Mohamed Omar, holds his black belt under world champion Roberto "Cyborg" Abreu and helped build the country's BJJ scene.

Behind the mats, attendance, packages, private coaching requests and merch all ran by hand or across scattered chats, so members couldn't see where they stood and the academy did the same work twice. I benchmarked five fitness and gym apps for what they get right and what they miss, then mapped the member's journey and the flows that matter most: booking, checking in and tracking progress.

Fitness apps benchmarked
5
Jobs pulled into one app
4

Six weeks
research to handoff

One structured run from the first benchmark to files a developer can build from, each week ending in something the academy could see.

  1. Week 01Research & benchmarking
    • Competitor benchmarks
    • Feature comparisons
    • Opportunity notes
  2. Week 02UX definition
    • Member journey maps
    • Key experience flows
  3. Week 03Wireframes & structure
    • App sitemap
    • Wireframes for every flow
  4. Week 04Design system
    • Colour, type and spacing
    • Component library
  5. Week 05High-fidelity design
    • Every screen and state
    • Final layouts
  6. Week 06Prototype & handoff
    • Clickable prototype
    • Dev-ready files

Every member should see their progress, not have to ask for it.

From wireframe to final

Every flow was settled in grey first: layout, hierarchy and navigation, before a single colour. Drag across the phone to see what each screen became.

Login, final design
Login, wireframe
Verification, final design
Verification, wireframe
Your details, final design
Your details, wireframe
Your photo, final design
Your photo, wireframe
Home, final design
Home, wireframe
Profile, final design
Profile, wireframe
‹›WireframeFinal

02Design

Designed in Figma

The app lives in the academy's colours: near-black, with Anubis red for every action and Helvetica Neue's extended cuts giving the titles a fighter's stance. The home screen answers a member's three questions at a glance: how long is left on their package, which class is next and with which coach, and what else is on this week.

Check-in is a QR code in the middle of the tab bar, one tap from anywhere. Belts unlock as achievements, discipline by discipline, so progress shows on the mat and in the app. Merch can be browsed and asked about, but not bought: checkout was kept out on purpose, so the first release stays focused on running the academy. Every screen is built from one component library, with variants for each state.

The app

  • The Onboarding page on a phone

    Onboarding

  • The Login page on a phone

    Login

  • The Home page on a phone

    Home

  • The Sessions page on a phone

    Sessions

  • The Calendar page on a phone

    Calendar

  • The Session page on a phone

    Session

  • The Packages page on a phone

    Packages

  • The Package page on a phone

    Package

  • The Coach page on a phone

    Coach

  • The Achievements page on a phone

    Achievements

  • The Merch page on a phone

    Merch

  • The Profile page on a phone

    Profile

Handed over

Six weeks after the first benchmark, the academy had a clickable prototype and dev-ready files: every screen and every state, from signing up to a suspended account.

  • 0146Screens, designed end to end
  • 026Weeks, research to handoff
  • 031Component library
  • 041Clickable prototype

Scope is a design decision. Leaving checkout out made the first release sharper.

Keep
exploring

All work→
  • FinSync

    Landing page · Fintech · 2025

    • UX research
    • UI design

    Case study soon

  • Beltone Mortgage

    Mobile app · Fintech · 2024

    • UX research
    • UI design

    Case study soon

  • SwiftMinis

    Web app · Verto Technologies · 2024

    • UI design
    • Front-end

    Case study soon