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.
    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.

    Accessibility check: #E42C64 reaches 3.9:1 on #F4F4F4, enough for buttons and large text but not for small text. For small pink text, a darker #C41E52 (5.2:1) keeps the look and passes WCAG AA.

    Typography

    Poppins throughout: SemiBold for headings, Regular for text.

    H1 Interstellar26px · SemiBold
    H2 Events for you20px · SemiBold
    H3 PARADISE STADIUM16px · SemiBold · 2px tracking
    H4 Where your mates at14px · SemiBold
    H5 Lineup12px · SemiBold
    P Their latest album drops just before the show.16px · Regular
    P Paradise Stadium, 12:00 – 16:0014px · Regular
    P Scan your QR code at the gate12px · Regular
    P Freddie Mercury · Queen10px · Regular

    Icons

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

    hometicketpinusercalendarclockmapcheckstarpieediteye

    Buttons

    Real sizes from the file. Hover and press them.

    288 × 42 160 × 42
    67 × 27 59 × 57

    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
    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.

    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.
      04

      The screens

      The design system

      A dark “data terminal” base with a small set of precise game colors. Everything below is rebuilt in code from the Figma file, 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

      A bold, rounded Hebrew display face for titles and labels, with a calm regular weight for instructions.

      TRAY MASTERLogo · wide caps
      תרגול זיהויScreen title · bold
      סמנו את השם התואם לכליInstruction · regular
      מספרייםAnswer label · bold
      הושלם בהצלחהSuccess · bold green

      Buttons

      One filled style for the main path, outlines for choices. Answer the question to see the 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

      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.

        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.

        Your Daily RemindersBaloo Tamma 2 · SemiBold · titles
        Welcome back, Panda!Baloo Tamma 2 · SemiBold
        Give Panda his daily pill · Omega 3Poppins · Medium
        Schedule · 11 January 2024 · 10:30 amPoppins · Regular

        Icons

        Clean filled icons for quick understanding and navigation.

        MedicineTreatCalendarClockTeethSettingsFoodReminder

        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 – nowGraphic DesignerFreelanceActive quest

        Multidisciplinary design for clients: high-end branding, UX/UI and motion, turned into precise, system-based visual languages that stay clean on every platform.

        • Lead end-to-end branding projects with cohesive visual systems.
        • Design intuitive, user-centered interfaces and responsive web experiences.
        • Create motion and cinematic content that brings brands to life.
        2021 – 2023Digital DesignerReshet TV · 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
        ClClaude
        GPTChatGPT
        GeGemini
        HfHiggsfield
        WixWix
        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