Player 1 · UX/UI & digital designer · Tel Aviv

I design games & apps that make the hard stuff feel like play.

Hi, I’m Nofar, a UX/UI and digital designer. I design apps, games and websites, and the visual language around them, from concert tickets to surgical training for Sheba Medical Center. Open to full-time roles and freelance projects.

Hi! Ready to play?
Class
UX/UI & digital designer
Skills
Apps · Games · Web · Design systems
Tools
Figma · Photoshop · Illustrator
Base
Tel Aviv, IL
View player profile

Choose a level

Score000000
←→moveEnterplay
  1. How to play
  2. 1Pick a levelEvery level is one of my real projects.
  3. 2Play through itExplore the case study, the prototype and a mini game.
  4. 3Unlock the nextReach the end of a level to open the next project.
← Level map
Level 01 · Mobile app · Team project

SPOTTED

Spotted helps you search, schedule, buy and attend shows by the artists you love, with minimum effort and maximum experience.

Platform
Mobile app
Players
Music fans & artists
Team
2 designers
My role
Lead designer · UI, flows, design system
Research
Survey · 68 responses
Tools
Figma · Photoshop · Illustrator
Spotted home screen for a fan
Spotted e-ticket with QR code

Scroll inside the phones

01

The issue & the solution

So… what is the issue?

Fans who want to catch live shows piece it together from artists’ social media, venue sites and ticketing platforms. Discovering a show, planning it with friends and buying the ticket all happen in different places.

And what is the solution?

One app where fans and artists meet. Fans discover shows through the artists they follow, see who’s going and buy the ticket in the same place. Artists create and manage their events from their phone.

What’s different? Ticketing apps like DICE and Ticketmaster already sell, transfer and resell tickets. Spotted’s difference is bringing fans and artists into one app, with discovery built around the artists you follow.

02

Yes, we did our research

First we mapped what’s out there. We signed up for the main concert, music and ticketing apps, used them, and looked for the gaps between them.

BandsintownSpotifyTicketmasterAmazon MusicDICESoundCloud
Gap 1 · DiscoverySpotify and Bandsintown recommend shows, but discovery and buying live in different apps, so finding a show and getting the ticket are two separate trips.
Gap 2 · TrustDICE and Ticketmaster sell tickets in-app, but discovery apps send you out to other sites to pay, and some fans don’t trust the redirect.
Gap 3 · SocialFew apps make it easy to see which friends are going and plan a show together.
Gap 4 · ArtistsEvent tools for artists are mostly desktop dashboards, with little for creating and managing a show from a phone.
Gap 5 · Can’t make itTicketmaster and DICE offer resale or waiting lists, but fans who discover a show elsewhere have no such safety net.
Live resultsSurvey · fans & artists

Then we ran an online survey about how people discover shows, buy tickets and decide to go. 68 music fans and artists answered, after we shared it in Facebook groups, on Instagram and on WhatsApp.

95.5%would go to more live shows if they saw more shows by related artists
80.6%prefer rock and metal, likely a reflection of the networks where we shared it
64.2%decide to go based on the price range
61.1%of users are aged 20–40

Survey answers show what people say they’d do, not behavior we measured. We used them as direction, not proof.

From insight to design decision

95.5% would go to more shows if they saw related artists→A home feed built around the artists you follow, and artists like them.
64.2% decide based on price→Every discount shows up front on the event page, not at checkout.
67.2% trust a payment redirect only “depending on the link”→You buy inside Spotted, with Bit or PayPal, and never leave the app.
Gap 5: no safety net when you can’t make it→Sold out isn’t a dead end: join a resale list and get notified.
03

Meet our user personas

The research became two personas, one for each side of the app: the fan and the artist.

Shannon Moore

Senior software developer at a small start-up. Always first to buy the ticket.

Fan
Age
35
Lives in
Ramat Gan, Israel
Tech level

Goal

Find easier ways to buy tickets, discover new artists, and catch local shows and festivals on her trip abroad.

Pain points

  • Too busy at work to plan weekends
  • Hears about shows only through artists’ social media
  • Wants tickets, but the show is sold out
  • Wants local artists but doesn’t know how to find them

Ross Bolton

Singer and guitarist in two local bands, about 5k Instagram followers each.

Artist
Age
27
Lives in
Portland, Oregon
Tech level

Goal

Make it in the music industry, tour Europe with one of his bands and collaborate with other artists.

Pain points

  • Spends most of the week promoting gigs on many platforms
  • Promoting shows abroad is hard in unfamiliar venues
  • Too busy with music to buy tickets himself
04

Three flows, two players

The main story is the fan’s: discover a show → pick the event → buy → get the ticket. The artist flow sits on its own side, so it doesn’t crowd that path. Tap a screen on the map to open it.

SharedFan flowArtist flowDecision
Fan or artist?
Can’t attend?

Try the prototype

▶Tap the glowing areas to move through the fan’s path, from log in to e-ticket. Scroll inside the phone on long screens.
    Open the full prototype in Figma ↗Every screen and transition, as designed
    05

    The screens

    The design system

    Once the skeleton was ready, I led the visual design: the whole graphic language, including the logo, typography and color palette.

    Logo

    Type plus an icon. The “O” in Spotted holds a symbol of a soundwave and two connected people: live music and connection.

    Spotted logo: icon, full logo and app icon
    IconFull logoAndroid / iOS app

    Color

    Nightlife, since most shows happen at night, stage spotlights, and the love for music.

    Tap a swatch to copy its hex.

    Typography

    Poppins throughout: SemiBold for headings, Regular for text. Each size has one job.

    H1Interstellar26px · SemiBoldArtist or event name at the top of its page. The one line you read first.
    H2Events for you20px · SemiBoldSection titles that split a long feed into groups.
    H3PARADISE STADIUM16px · SemiBold · 2px trackingVenue and label caps. The extra tracking keeps all-caps easy to read.
    H4Where your mates at14px · SemiBoldCard and module titles, such as the social section.
    H5Lineup12px · SemiBoldTab and chip labels.
    P1Their latest album drops just before the show.16px · RegularDescriptions and anything people read in full. 16px is the comfortable minimum for reading on a phone.
    P2Paradise Stadium, 12:00 – 16:0014px · RegularSupporting details: dates, times and places.
    P3Scan your QR code at the gate12px · RegularHelper text and hints.
    P4Freddie Mercury · Queen10px · RegularCredits and meta only, never anything you must read to act.

    Icons

    One outline style in the brand pink, used across the tab bar, event details and dashboards.

    hometicketpinusercalendarclockmapcheckstarpieediteye

    Buttons

    Real sizes, in pixels. Hover and press them.

    Input fields

    Try typing in them.

    Testing & next steps

    I walked a handful of people through the prototype informally. We haven’t run a formal usability study yet, so the next step is moderated tests on the purchase flow. These are the edge cases I’d design next:

    Payment failsKeep the seats on hold, explain what happened in plain words, and offer another way to pay.
    Transfer isn’t allowedSay so before checkout, not after, and point to the resale list instead.
    No signal at the gateKeep the QR ticket available offline, with a clear “works offline” badge.
    Show gets cancelledA push notification with the refund status and similar shows nearby.
    06

    Bonus round: beat the sell-out

    Tickets for Interstellar at Paradise Stadium are going fast. This is the moment Spotted was designed for.

    ▶Press “Start”, then tap “Buy ticket” before the counter hits zero.

    Too slow? You’ll see the sold-out flow from the research instead: join the resale list and get notified.

    ★ ★ ★
    Reward unlocked
    Golden ticket+1000 pts
    Level 01 complete

    Next up: Tray Master

    A micro-learning game that teaches surgical instruments, level by level.

    ← Level map
    Level 02 · Mobile learning game · Client project

    TRAY MASTER

    A micro-learning game for operating room teams, medical students and nurses. It turns learning to identify and sort surgical instruments into quick, rewarding play, inspired by apps like Duolingo.

    Platform
    Mobile-first 2D game
    Players
    OR teams, med students, nurses
    Client
    Sheba Medical Center
    Process
    Brief · Personas · IA · UI · Playtesting
    My role
    UX/UI design · Information architecture · Visual language
    Tools
    Figma
    Tray Master home screen
    Tray Master identification quiz
    01

    The challenge

    Hundreds of tools, all theory

    Training to recognize hundreds of surgical instruments is mostly reading: dense, and with almost no interaction.

    Playful, but never childish

    The platform had to feel like a game and invite repetition, while keeping a mature, professional, sterile look that a medical audience takes seriously.

    Where it started

    The brief from Sheba named three audiences and one problem: people learn hundreds of surgical instruments from reading, with almost nothing to practice on. Before designing screens, I mapped who would use it and when.

    Step 1Brief & audit
    Step 2Personas
    Step 3Information architecture
    Step 4UI & prototype

    Who it’s for

    OR teams & nursesNeed to know every instrument by sight, and which ones go on the tray for each surgery. Learn between shifts, in short bursts.
    Medical studentsMeet the instruments mostly in books before their surgical rotation. Need practice, not more reading.

    What I borrowed from learning games

    The client pointed to apps like Duolingo. I broke down which of their patterns fit a professional audience, and how each one became part of Tray Master.

    Pattern in learning appsIn Tray Master
    Short lessons you finish in minutes→Levels of 4 quick stages, one surgery at a time
    A path of levels that unlock→A numbered level map per surgery
    Hearts, points and a timer→The game HUD: progress, lives, time and points always in one place
    Instant right / wrong feedback→Answers fill green or shake salmon; drop zones light up and lock with a check
    Bright, cartoon style→Left out on purpose. A dark, precise look that a medical team takes seriously

    Principles I designed by

    Bite-sizedA full level fits into a short break.
    Learn → Identify → AssembleEach stage builds on the one before.
    Professional, not childishGame mechanics, clinical look.
    Never color aloneEvery state also has an icon or words.

    The personas

    Noa

    A newly qualified OR nurse in her first months, learning the instrument sets of a new department.

    OR nurse
    Age
    26
    Learns
    Between shifts, on her phone

    Goals

    • Recognize every instrument quickly, by sight
    • Know which tools go on the tray for each surgery
    • Feel ready before she scrubs in

    Challenges

    • Hundreds of instruments that look almost the same
    • Learning materials are mostly text and lists
    • Little time and lots of pressure

    Daniel

    A medical student about to start his surgical rotation, who has only seen the instruments in books.

    Med student
    Age
    24
    Learns
    On the bus, in 5-minute gaps

    Goals

    • Not freeze when asked for an instrument
    • Practice, not just read
    • See his progress

    Challenges

    • Theory-heavy material with no hands-on practice
    • Long study sessions don’t fit his day
    • Hard to tell similar tools apart

    From persona to design

    Noa needs to know what goes on the tray for each surgery→Levels are organized by surgery, and end with assembling that surgery’s tray.
    Daniel learns in 5-minute gaps→Short timed rounds with points and lives, so a level fits into a bus ride.
    Many instruments look almost the same→A “spot the difference” stage, and a library card for every tool.

    Information architecture

    Lean on purpose: one hub and three branches, with the game path doing most of the work.

    Landing · sign in
    Home
    Tool libraryLearn
    Tool typesTool cardRead more
    Choose a surgeryPlay
    Hand or footSurgery level map: carpal tunnel release, ganglion cyst removalLevel, in 4 stages:
    IdentifySpot the differenceMatchAssemble the tray
    Result:
    Success · points · level upFailed · try again
    Settings
    LanguagePrivacy policyLight modeSupport
    Always there: help (?)Mid-game: exit with a “leave the game?” check, so progress isn’t lost by accident
    02

    A learning curve in three stages

    Tool library screen
    Stage 1

    Learn

    Clean cards with focused information about each instrument.

    Identification quiz screen
    Stage 2

    Identify

    Fast multiple-choice rounds against the clock, to sharpen visual memory.

    Tray assembly screen
    Stage 3

    Assemble

    A drag-and-drop simulator: set up the instrument tray for a specific surgery by placing each tool where it belongs.

    03

    Design decisions

    Quiz screen with annotations

    Try the prototype

    ▶Tap the glowing areas: choose a surgery, start level 1, answer, and assemble the tray.
      Open the full prototype in Figma ↗Every screen and transition, as designed
      04

      The screens

      The design system

      A dark “data terminal” base with a small set of precise game colors. Everything below is live, so you can play with it.

      Color

      Turquoise for actions and lives, green only for success, salmon for time pressure and failure.

      Tap a swatch to copy its hex.

      Typography

      One Hebrew family, Almoni DL AAA, in a few clear weights: Black for screen titles, Bold for labels, Regular for instructions.

      LogoTRAY MASTERLogo · wide capsThe game’s name on the landing screen. Wide caps feel engineered and precise, not childish.
      H1תרגול זיהויAlmoni DL AAA · 32px · Black · 2%One per screen: names the mode (Identify, Assemble). Black weight reads at a glance while the timer runs.
      H2הושלם בהצלחהAlmoni DL AAA · ExtraBoldResult messages, in the status color, so the outcome lands before you read the details.
      P1סמנו את השם התואם לכליAlmoni DL AAA · RegularOne-line instructions under the title. Regular weight keeps them quiet next to the title.
      BTNמספרייםAlmoni DL AAA · BoldAnswer and button labels. Bold, so a fast tap never hits the wrong word.
      HUD300 ★Almoni DL AAA · SemiBoldPoints, timer and progress (1/4). Small, but always in the same place.

      Buttons

      One filled style for the main path, outlines for choices. Real sizes, in pixels. Answer the question to see the states.

      הכרת הכלים
      מספריים
      יד

      Try the answer states:

      Surgical scissors

      Which one is it? (Hint: “מספריים” means scissors.)

      Game HUD

      Progress, lives, time and points always sit in the same place. Tap a heart to lose a life.

      1/4
      10★ 0

      Level nodes

      Colored, numbered stops on a dashed path. The site’s own level map borrows this pattern.

      1234

      Drop zone states

      Dashed when free, lit while you hover, solid green with a check when a tool lands.

      Empty
      Hover
      Placed
      05

      Bonus round: set the tray

      This is the assembly mechanic from the game, with the same feedback.

      ▶Drag all 4 instruments into the dashed tray.

      Watch the drop zone light up, then turn green with a check when a tool lands.

      Drop here
      0/4placed
      06

      Takeaways

      Played and testedThe game was presented to its audience and played hands-on, and the players gave feedback on the experience.

      Careful interface design, a minimal, architectural visual language and game mechanics can turn technical medical material into a smooth flow. For a tool people are meant to use every day, keeping it visually simple and mobile-first matters most.

      ★ ★ ★
      Reward unlocked
      Golden scalpel+1000 pts
      Level 02 complete

      Next up: PetV

      An all-in-one pet care app, with personas, a clickable prototype and a live design system.

      ← Level map
      Level 03 · Mobile app · Concept app

      PETV

      An all-in-one pet care app. PetV organizes feeding times, vet appointments, medication schedules and more in one simple interface, so your furry companion stays healthy and happy.

      Platform
      Mobile app
      Players
      Busy pet owners
      Process
      Research · Personas · Wireframes · UI
      My role
      UX/UI design
      Type
      Concept app · not launched
      Tools
      Figma · Photoshop · Illustrator
      PetV home screen with Panda’s reminders
      PetV new task screen

      Scroll inside the phones

      The challenge

      Pet care is everywhere

      Feeding times on sticky notes, vet visits in a calendar, medication on paper. Owners juggle scattered tools to keep one pet healthy.

      One app, finally

      Build the all-in-one tool owners always wanted: feeding schedules, vet appointments, medication reminders and more, in a single easy-to-use app.

      Goal 1Streamline every part of pet care, from feeding to vet visits, medication and grooming, in one place.
      Goal 2Strengthen the bond between pets and owners with a tool that makes the responsibilities simpler.
      Goal 3Accessible to owners of every age and tech level, with an intuitive layout and simple navigation.

      Process & key findings

      Step 1Research
      Step 2Personas
      Step 3Wireframes
      Step 4Visual design

      What pet owners told us

      Tap a card to see how the design answers it.

      The personas

      Amanda Rollins

      Fitness trainer with a playful Labrador named Max, her companion on outdoor adventures.

      Dog owner
      Age
      28
      Lives in
      Vancouver, Canada

      Goals

      • Keep Max healthy and active
      • A balanced, nutritious diet
      • Track exercise, weight and health milestones

      Challenges

      • A busy schedule makes routines hard to keep
      • Little time to plan meals for Max
      • Unsure how to track health metrics

      “With my busy schedule, I need a tool that can help me track his activity, nutrition, and health effortlessly.”

      Tom Knight

      Software developer who adopted his cat Oliver from a local shelter two years ago.

      Cat owner
      Age
      30
      Lives in
      Seattle, USA

      Goals

      • Manage feeding, litter and play without effort
      • Track weight, food intake and vet check-ups
      • Find toys and enrichment for Oliver

      Challenges

      • Long hours, sometimes forgets feeding times
      • Travels for work and worries from afar
      • New to cat care and eager to learn

      “I hope to make sure he’s always well-cared for, even when I’m knee-deep in coding challenges at work.”

      From persona to screen

      Amanda: “With my busy schedule, I need a tool that tracks things effortlessly.”→Today’s reminders sit as cards at the top of Home, one tap to complete.
      Tom: works long hours and sometimes forgets feeding times→Scheduled reminders, and a burgundy deadline alert reserved for what can’t wait.
      Every pet is different→Onboarding builds the pet’s profile and needs, so tasks fit that pet.

      Information architecture

      A user journey map showed how owners would move through the app, from first sign-up to adding a new task. Tap a glowing screen to open it in the prototype below.

      Start / endScreenActionOpens in the prototype
      Splash
      First-time setup
      1. Personal details
      2. Pet type
      3. Pet profile
      4. Pet needs
      5. Important notes
      6. Analyzing
      Then on to the user splash ↓
      SettingsEdit profileMenu

      Try the prototype

      ▶Tap the glowing areas: log in, add a task for Panda with the + button, then handle the deadline reminder.
        Open the full prototype in Figma ↗Every screen and transition, as designed

        The screens

        The design system

        Shades of green for balance and freshness, a green light to go on a mission, and a peaceful mind. Everything below is live: tap, toggle and type.

        Logo

        Clean, friendly type with a paw. The “V” doubles as a check mark: a mission completed.

        Color

        Greens do the work. Burgundy appears only on notifications and reminders.

        Tap a swatch to copy its hex.

        Typography

        Two fonts that are easy to read and act on: Baloo Tamma 2 for titles only, Poppins for everything you read.

        H1Your Daily RemindersBaloo Tamma 2 · SemiBoldScreen and section titles. A rounded, friendly face, so care tasks feel light, not like chores.
        H2Welcome back, Panda!Baloo Tamma 2 · SemiBoldGreetings and card titles: the pet’s name is the hero.
        P1Give Panda his daily pill · Omega 3Poppins · MediumTask names. Medium weight so you can scan a list of tasks quickly.
        P2Schedule · 11 January 2024 · 10:30 amPoppins · RegularDates, times and details, one step quieter than the task itself.

        Icons

        Clean filled icons for quick understanding and navigation.

        MedicineTreatCalendarClockTeethSettingsFoodReminder

        Buttons

        Filled for the main action, outlined for the second choice. Real sizes, in pixels.

        Create New Task
        Back
        Complete
        D
        +

        Controls

        Filled for the main action, outlined for the second choice. Try the toggles.

        Category
        Range Time5:15

        Bonus round: Panda’s day

        Panda has four tasks today. Look after him the PetV way.

        ▶Tap “Complete” on all 4 tasks before the reminder pops up. Changed your mind? Tap a done task to undo it.

        Miss one for too long and you’ll meet the burgundy deadline alert, the only place PetV uses red.

        The result

        By turning the research into design, PetV meets the real needs and pain points of pet owners: it simplifies pet care, gives peace of mind, and strengthens the bond between pets and their people through one friendly, complete platform.

        ★ ★ ★
        Reward unlocked
        Paw of approval+1000 pts
        Level 03 complete

        Next up: The Biased Oracle

        A diagnostic adventure about when not to trust medical AI. This level unlocks soon.

        ← Level map
        Bonus level · Web design

        WEB WORLDS

        Websites I designed and redesigned. Pick a world to open its case study and a working prototype you can play with.

        ← Level map
        That’s me!
        Player profile

        Nofar Rettig

        Class · UX/UI & Digital DesignerApps · Games · WebBase · Tel AvivDesigning since 2018

        I’m a UX/UI and digital designer. I started in branding, motion and digital design for TV, fintech and AI companies, and today I design apps, games and websites: clear design systems, a strong visual voice, and interfaces that make complex things easy, and fun, to use.

        I’m open to full-time roles in product teams and take on freelance projects for brands and businesses. I love typography and editorial detail, and I’m happiest turning a tricky subject into an experience people remember.

        See my levels
        01

        Teams I’ve played with

        02

        Quest log

        Where I’ve played so far. Open a quest to see what I did there.

        2018 – nowUX/UI & Digital DesignerFreelanceActive quest

        UX/UI and digital design for clients: apps, games and websites from user flows to polished UI, alongside high-end branding and motion, all built on precise, system-based visual languages.

        • Design apps, games and websites end to end: user flows, wireframes, prototypes and UI.
        • Build design systems that keep every screen consistent.
        • Lead branding projects with cohesive visual systems.
        • Create motion and cinematic content that brings brands to life.
        2021 – 2023Digital DesignerReshet 13 · Tel AvivCompleted

        High-impact motion graphics and visual content for TV broadcasts and digital platforms, in a fast-paced newsroom-style environment.

        • Designed and animated on-screen graphics, title sequences and promo packages.
        • Created campaigns and digital ads for the marketing unit.
        • Delivered broadcast-ready work under tight deadlines.
        2020 – 2022Digital Design LeadInvesting.com · Tel AvivCompleted

        Led the design strategy for all digital and marketing assets, keeping one professional identity across global platforms.

        • Managed web and digital assets reaching millions of users worldwide.
        • Designed social, display and web interfaces with strict brand consistency.
        • Worked with marketing teams to raise conversion and brand authority.
        2019 – 2020Visual SpecialistD-ID · Tel AvivCompleted

        Visual execution for AI-driven products: advanced retouching and digital assets at the highest standard.

        • Expert-level Photoshop retouching and image processing.
        • Specialized projects that needed technical precision and security awareness.
        • Polished assets supporting marketing and product goals.
        03

        Training grounds

        2023 – 2024UX/UI DesignHackerU CollegeLatest unlock
        2014 – 2018B.A. Graphic DesignTiltan College of Design & Multimedia
        2010 – 2012Photography & Digital EditingCamera Obscura College
        04

        Abilities

        Expertise
        Perks

        Tap an ability to equip it.

        05

        Inventory

        PsPhotoshop
        AiIllustrator
        AeAfter Effects
        PrPremiere Pro
        LrLightroom
        Figma
        Claude
        ChatGPT
        Gemini
        Higgsfield
        Wix Studio
        06

        Languages

        100%Hebrew
        95%English
        50%Spanish
        07

        Side quests

        Tap one. Each has a little surprise.

        ★ ★ ★
        Ready for player 2?

        Let’s work together

        Whether you’re hiring for your team or need a designer for a project, I’d love to hear about it.

        Back to the levels