Learn
Clean cards with focused information about each instrument.
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.
Spotted helps you search, schedule, buy and attend shows by the artists you love, with minimum effort and maximum experience.
Scroll inside the phones
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.
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.
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.
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.
Survey answers show what people say they’d do, not behavior we measured. We used them as direction, not proof.
The research became two personas, one for each side of the app: the fan and the artist.
Senior software developer at a small start-up. Always first to buy the ticket.
Find easier ways to buy tickets, discover new artists, and catch local shows and festivals on her trip abroad.
Singer and guitarist in two local bands, about 5k Instagram followers each.
Make it in the music industry, tour Europe with one of his bands and collaborate with other artists.
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.
Once the skeleton was ready, I led the visual design: the whole graphic language, including the logo, typography and color palette.
Type plus an icon. The “O” in Spotted holds a symbol of a soundwave and two connected people: live music and connection.
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.
Poppins throughout: SemiBold for headings, Regular for text.
One outline style in the brand pink, used across the tab bar, event details and dashboards.
Real sizes from the file. Hover and press them.
Try typing in them.
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:
Tickets for Interstellar at Paradise Stadium are going fast. This is the moment Spotted was designed for.
Too slow? You’ll see the sold-out flow from the research instead: join the resale list and get notified.
A micro-learning game that teaches surgical instruments, level by level.
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.
Training to recognize hundreds of surgical instruments is mostly reading: dense, and with almost no interaction.
The platform had to feel like a game and invite repetition, while keeping a mature, professional, sterile look that a medical audience takes seriously.
Clean cards with focused information about each instrument.
Fast multiple-choice rounds against the clock, to sharpen visual memory.
A drag-and-drop simulator: set up the instrument tray for a specific surgery by placing each tool where it belongs.
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.
Turquoise for actions and lives, green only for success, salmon for time pressure and failure.
Tap a swatch to copy its hex.
A bold, rounded Hebrew display face for titles and labels, with a calm regular weight for instructions.
One filled style for the main path, outlines for choices. Answer the question to see the states.
Which one is it? (Hint: “מספריים” means scissors.)
Progress, lives, time and points always sit in the same place. Tap a heart to lose a life.
Colored, numbered stops on a dashed path. The site’s own level map borrows this pattern.
Dashed when free, lit while you hover, solid green with a check when a tool lands.
This is the assembly mechanic from the game, with the same feedback.
Watch the drop zone light up, then turn green with a check when a tool lands.
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.
An all-in-one pet care app, with personas, a clickable prototype and a live design system.
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.
Scroll inside the phones
Feeding times on sticky notes, vet visits in a calendar, medication on paper. Owners juggle scattered tools to keep one pet healthy.
Build the all-in-one tool owners always wanted: feeding schedules, vet appointments, medication reminders and more, in a single easy-to-use app.
Tap a card to see how the design answers it.
Fitness trainer with a playful Labrador named Max, her companion on outdoor adventures.
“With my busy schedule, I need a tool that can help me track his activity, nutrition, and health effortlessly.”
Software developer who adopted his cat Oliver from a local shelter two years ago.
“I hope to make sure he’s always well-cared for, even when I’m knee-deep in coding challenges at work.”
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.
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.
Clean, friendly type with a paw. The “V” doubles as a check mark: a mission completed.
Greens do the work. Burgundy appears only on notifications and reminders.
Tap a swatch to copy its hex.
Two fonts that are easy to read and act on.
Clean filled icons for quick understanding and navigation.
Filled for the main action, outlined for the second choice. Try the toggles.
Panda has four tasks today. Look after him the PetV way.
Miss one for too long and you’ll meet the burgundy deadline alert, the only place PetV uses red.
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.
A diagnostic adventure about when not to trust medical AI. This level unlocks soon.
Websites I designed and redesigned. Pick a world to open its case study and a working prototype you can play with.
A friend who builds websites made a site for a fictional car business: a luxury showroom, a private racetrack and a driving school under one roof. He asked me for a redesign, and I rebuilt the whole experience in Figma.
I went through every page of the original. Here are the key pieces, rebuilt from its code next to my redesign. Flip each one.
16 equal buttons, staff pages mixed in, no hierarchy.7 grouped links, a drive-mode switch and one clear call to action.
A purple box of text lines. The car is an afterthought.The car on a lit stage, name and price first, two clear actions.
Asks for an ID number first, with no car in context.Buy from the car page: options, extras and a live total.
A flat menu of 16 links, with the staff login and admin pages one click from the public homepage.Seven sections grouped by what visitors came for. The buying flow sits under the car page, and staff login moved to the footer.
Every token has a Comfort and a Track value. Flip it and the whole system changes.
The red slash from the original logo became the only accent color.
Neutrals for calm, one red for action.
Tall, condensed Antonio for display. Manrope and Noto Sans Hebrew for reading.
Pills everywhere. Red only for the main action.
Numbers in Antonio, so specs read like a dashboard.
The core component, in both modes.
A concept site for a fictional brand that designs, assembles and stress-tests custom gaming PCs. There was no existing site to redesign: I designed it from a blank page.
One long page that tells a story in order: show the craft, let people build, then explain the service and ask for the quote.
The page opens with a PC that builds itself as you scroll, layer by layer. Before anyone sees a price, they see what “hand assembled” means.
Three presets, 1440p Esports, Creator and 4K Flagship, fill every slot. People adjust a working build instead of facing eight empty choices.
Parts that don’t fit stay on screen, greyed out with the reason: “Wrong socket”. The power supply is checked against the load with 25% headroom, and the cooler against the processor.
Every real unit, watts, gigabytes, sockets, is set in a monospaced font, so numbers line up and scan like a component data sheet.
“Request this build” sends a quote request, not a payment. The summary says it plainly: no payment is taken online.
A small version of the configurator’s rules. Pick a processor and watch the boards, the power supply and the total react.
Graphite blacks, like the inside of a case. One accent, ultraviolet, taken from the RGB in the product photos. Three status colours for the checks.
Three voices: a technical display face, a calm reading face, and a mono for every number.
Sharp 2px corners. Ultraviolet only for the main action.
The core component, in its three states.
Status lines borrowed from a PC’s boot screen, used for the power-on test.
This concept hasn’t been tested with users yet. These are the first questions I’d take to real buyers:
Toronto Cupcake is a real bakery that sells cupcakes online for delivery around Toronto. As a solo project in my HackerU UX/UI course, I redesigned its online ordering, from browsing the menu to building a dozen box, and gave the brand a new logo.
Small text, tiny add-to-cart buttons on every cupcake, an info popup with no way to buy, and a separate checkout page you were pushed into.
Every cupcake card has its own quantity stepper and two actions: Add to cart or Add to box.
Adding an item keeps you where you are. The cart count updates, and checkout happens when you’re ready.
The dozen box became a short builder with progress dots, Back and Next, so a big order feels simple.
A confirmation with the box itself, and two next steps: Complete box or Create new.
One sweet pink for actions and highlights, soft grey surfaces so the cupcakes are the colour on the page.
A friendly geometric sans for everything, and a hand-written script for the bakery’s warmth.
Filled pink for the main action, outlined for the second choice.
The engine is screaming. Shift at exactly the right moment and hit 100 km/h.
Too early and you lose speed. Too late and you hit the red line.
More web worlds are on the way. In the meantime, my inbox is open.
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.
Where I’ve played so far. Open a quest to see what I did there.
Multidisciplinary design for clients: high-end branding, UX/UI and motion, turned into precise, system-based visual languages that stay clean on every platform.
High-impact motion graphics and visual content for TV broadcasts and digital platforms, in a fast-paced newsroom-style environment.
Led the design strategy for all digital and marketing assets, keeping one professional identity across global platforms.
Visual execution for AI-driven products: advanced retouching and digital assets at the highest standard.
Tap an ability to equip it.
Tap one. Each has a little surprise.
Whether you’re hiring for your team or need a designer for a project, I’d love to hear about it.
This is a personal portfolio. It has no sign-up, no forms and no ads, and it does not use cookies, analytics or any other tracking.
The only thing the site saves is in your own browser: whether you turned the sound on and whether you chose light or dark mode. It never leaves your device, and you can clear it any time by clearing this site’s data in your browser.
The site is hosted on Netlify, which, like any web host, may keep standard technical server logs (such as IP address and time of visit) for security and operation. If you email me, I use your message only to reply to you.
Questions? nofar@nofarrettig.com
I want everyone to be able to explore my work. While building this site I took these steps:
Some parts are visual by nature, like the drag-and-drop mini game and the clickable prototypes. Every case study also explains the same content in text.
If something doesn’t work for you, please tell me and I’ll fix it or send you the content another way: nofar@nofarrettig.com
Last updated: November 2026
Unlock every level now and go straight to the work. You won’t collect points on the way, but every case study and mini game stays open to you.
Jump straight into any case study. The map stays locked, so the game is still there when you want to play.
A direct line to the designer. You’ve seen how I think, from research to pixels. Take my CV, or skip the line and write to me.
Level 4, The Biased Oracle, is on its way. Come back for it.Open to full-time roles and freelance projects.