Hi, I'm Melanie Sue
Senior UX/UI & Product Designer.

Designing scalable
products that create
measurable impact.

From first interview to shipped design system, I turn research and business goals into products people adopt and keep using.

What I
Bring

Products that drive adoption, engagement and growth.

Drag or scroll→
Portfolio

Digital products across apps, web platforms and design systems.

I follow the design thinking method, a human-centered way to solve problems: understand people, define the challenge, explore ideas, then prototype and test early. I test with real data to measure real impact, always balancing business goals and user goals.

Empathize
Define
Ideate
Prototype
Test

How I work

Melanie Sue MatzerUX/UI & Product Design

Let's do something
amazing together

Have a project in mind? I'd love to hear about it.

Plena app home screen
Paseo cultural por MijasHora y fecha
Aeróbicos en piscina15:00 · 23 jun
Caminata por Mijas17:00

Designing for
Autonomy

UX Solutions for Senior Coliving Spaces

FigmaPhotoshopIllustratorPerplexity
Project Type:Master's Thesis Challenge (TFM)
Role:Service designer / Senior UX UI
Company:Plena Coliving - Mijas

Many older adults arrive at coliving spaces full of energy and the desire to connect, only to face repetitive routines and limited opportunities to participate meaningfully. The challenge is to rethink how these environments can truly adapt to their needs—making daily life more engaging, purposeful, and aligned with their desire for autonomy and connection.

Design Process

Design thinking method

Empathize
Understand the user and their needs
Define
Synthesize findings
Ideate
Generate creative solutions
Prototype
Bring ideas to life
Test
Validate solutions
Empathize — understand the user and their needs
Define — synthesize findings
Ideate — generate creative solutions
Prototype — bring ideas to life
Test — validate solutions
Elena, the persona
"I want an active, autonomous, and meaningful old age."
She's curious, emotionally aware, and still eager to learn and explore. While she values community and enjoys meaningful social interaction, she also fiercely protects her autonomy.

Goals

  • Activities that match her energy levels and mood
  • A flexible routine that doesn't feel imposed

Insights

Of older adults formed new social connections through group workshops, showing that participation directly strengthens their sense of belonging and reduces isolation.

0%

Of seniors felt more valued after engaging in recreational or educational programs—proving that personalized, stimulating experiences boost emotional well-being and social inclusion.

0%
Plena booking screens: spaces and activities

Design a personalized experience that promotes an active and purposeful life

Plena splash screen

Wireframes

Design solution

Wireframe user flow

Prototype

High fidelity

Personalized onboarding with Plena Connect
Plena onboarding on a phone

Onboarding strategy

The onboarding process in Plena Connect is designed to get to know each resident in a meaningful, holistic way. Upon first use, residents complete a simple guided flow where they share key information about their lifestyle, interests, physical condition, and emotional state.
Interests selection screen
Easy booking onboarding screen Daily mood check-in

Understanding the App

Users are introduced to the app's core features through a clear, step-by-step tutorial that shows them what they can see and do—from joining activities to reserving spaces or exploring local services. The language is direct, warm, and easy to follow, ensuring accessibility for users with varying levels of digital confidence.

UI Design

Visual design

01 / 04

Reserve
activities

Choose how you want to participate

Sign up for internal activities based on your interests and availability, from yoga and creative workshops to discussion circles. Every activity is an opportunity for well-being, learning and connection, always optional, never imposed.

Coliving & localBrowse activities inside the residence and around Mijas, all in one place.01
Book in a tapSee the time and date, then join the ones that fit your day.02
Choose how you want to participate

Reserve
spaces

Make shared areas yours

Reserve common areas such as the garden, gym or multipurpose rooms. Enjoy them at your own pace, for quiet reflection, movement or social gatherings, without overlaps or interruptions.

Every shared areaPool, restaurant, coworking and more, with photos and details before you book.01
No overlapsPick a slot and the space is yours, so nothing gets in the way.02
Make shared areas yours

Reserve
meals

Eat what you want, when you want

Browse daily menus, order specific meals or create your own meal plans. Flexible pricing makes it easy to choose from a variety of plates and combinations, promoting healthy eating that fits your tastes and routine.

Menus by needFilter by plans, healthy or vegetarian dishes and see price and prep time.01
Order on repeatReorder your favorites and follow your delivery in real time.02
Eat what you want, when you want

Smart planning &
community

Meaningful connection

Where technology meets human interaction. Chat with the AI assistant for personalized recommendations, or let it plan a full week around your energy, mood and preferences. Then connect with fellow residents through chat.

Plena, your assistantAsk what to do today, or let it plan your whole week.01
Meet your neighborsChat, set up spontaneous meetups and share suggestions.02
Meaningful connection

Expected Results

Benefits

Higher Participation in Activities

Residents join activities more frequently when they feel the options are personally meaningful and aligned with their interests.

Improved Physical and Emotional Well-being

Personalized activities positively influence overall health, energy, and mood.

Reduced Isolation within the Coliving Community

The platform encourages connections between residents with compatible interests, creating natural opportunities for interaction.

Stronger Sense of Purpose and Belonging

Each resident feels like an active and valued member of the community, which reinforces their engagement.

Longer Resident Retention

A fulfilling and personalized experience increases satisfaction, leading to longer stays and a deeper commitment to the coliving model.

New Revenue Streams for the Coliving Space

Integrating external services creates profitability opportunities without increasing operational costs.

Treasure Game — gamified donation app for Fundación Ronald McDonald

Treasure Game app screens on a tropical dark teal background
FigmaPhotoshopIllustrator
Gamified donation appA treasure hunt that turns every donation into a game for McDonald’s teams across the country.

Faced with a decline in donations, the Ronald McDonald Children's Foundation needed to revitalize its annual Donation Box Contest—a nationwide campaign that relies on spontaneous generosity from McDonald's customers through physical donation boxes.

Duration:Jan – July 2020
Company:Fundación Ronald McDonald

Objective

Increase engagement and participation in the annual Donation Box Contest through gamification

Target Users

McDonald's restaurant staff, aged 18–24

Design Process

Design thinking method

Empathize
Define
Ideate
Prototype
Test

Design Challenge

How might we design an engaging gamified experience that motivates young McDonald's employees to lead donation efforts with purpose and ownership?

Character selection screen of the Treasure Game app shown on isometric phones
Empathize

User Persona

Carlos

Heavy app user; loves visual, social, and reward-based experiences.

24 yearsCompetitive+SocialEmpathetic+
Carlos, McDonald's employee smiling at his phone
McDonald's team laughing together
90%

of McDonald's employees in Guatemala are under 24

Team player

Goals

Feel valued and connected

I'd love to help boost donations, especially if it means more support for children.

Insights

Key Insights

23%
Gamified fundraising experiences lead to a 23% increase in completed donation actions.
90%
Gamified work experiences can boost employee engagement by around 48%, with 90%.
22%
Adding competitive team dynamics and visible progress bars can increase donation rates by 22%.
Define

Problem Statement

The foundation's donation box campaign lacked engagement from the employees who interact with customers daily. Without emotional connection or clarity of impact, young team members saw the donation box as background noise.

Frustrated McDonald's employee with arms crossed

Pain Points

1Unclear Donation Process
2Lack of User Awareness
3Low Incentive for Participation
Ideate

Design Goal

Create an engaging, gamified experience that connects young McDonald's employees with the purpose behind the annual donation campaign, turning passive participation into active ownership

Character selection and team naming screen

Wireframe

Design solution

Prototype
Onboarding screen: Dona, juega y avanza

UI Design

High fidelity
Create a playful and intuitive mobile experience that employees could use during short breaks, turning donation tasks into a fun, rewarding game.
Mission personalization screen in isometric view

Color Palette

#628CC8 #0C373D #E43247 #B0CA1F #FBBA07

Each McDonald's restaurant must represent one team. Employees join forces to complete donation challenges together, fostering collaboration and a healthy sense of competition across branches.

Notification: ¡Felicitaciones! Tu equipo recolectó 10% más de la meta

Team-Based Competition & Motivation

Clara, team naming screen
Two children smiling

Complete challenges, and increase donations

Donar
Notification: ¡Meta Completada!
Message popup: Vamos equipo, juntos podemos ayudar a muchos más niños

Gamification Design

Designed and implemented gamification elements strategically, integrating incentives to motivate users to actively participate and promote the campaign. Balanced game mechanics with a seamless user experience to ensure both engagement and ease of use.

We designed an interactive island map to guide users through challenges visually. Inspired by casual games, each level unlocks progress, encouraging completion and motivation.
Illustrated island map with a tiki totem
Expected

Results

+60%Employee Participation
+40%Donations via collection boxes
+35%Awareness of foundation's mission

Cuchubal

Group savings management app, made to keep every turn, contribution and payout clear for everyone in the circle.

Project typeMobile App
Cuchubal home screen: active groups and total earnings

Cuchubal brings the traditional rotating savings circle to your phone. Members contribute on a schedule, take turns receiving the pot, and everyone can see who has paid and who is next.

Based on the data provided

User Persona

Built from the data provided, this persona captures how people in a savings circle organize, pay and trust each other.

Young woman smiling at her phone
“Trust is good,
clarity is better.
MR

Marta R.

Circle organizer
  • Age: 38
  • Location: Guatemala City
  • Country: Guatemala

Marta organizes a monthly savings circle with neighbors and coworkers. She is trusted by everyone, and tired of tracking payments in notebooks and group chats.

Personality
ExtrovertIntrovert
PlannerSpontaneous
CautiousRisk-taker
User Goals
  • Keep every contribution on schedule
  • Know exactly whose turn is next
  • Share proof of payment with the group
Interests
FamilyWorkNeighbors
Design goal

Save together,
stay on track.

One home for every circle you belong to: see your next turn, your next contribution and the pot at a glance.

Create a circleJoin with a code

Family circle

Work friends

Neighbors

Home savings

Next turn in 12 daysQ 2,400
Reminders

Never miss
a turn.

Gentle nudges keep contributions on time, and celebrate every payout.

Notification Center
Cuchubal42 min ago

Your turn is next. Your payout arrives on Friday.

Payment received2 h ago

Luis added his contribution.

ReminderYesterday

Your contribution is due tomorrow.

Smiling woman holding her phone
Cuchubalnow

You received your share of the cuchubal! Q 2,400 from Los Chapines is already in your account.

High fidelity

UI Design

A calm, playful interface that makes money feel simple: big numbers, clear states and one obvious action per screen.

Home

Earnings, active groups and quick actions

Create a group

Name, dates, amount and frequency

Choose participants

Pick who joins from your contacts

Define rules

Turn order, fines and an emergency fund

Ready to go

Members get invited and the cuchubal starts once everyone accepts

Color palette

Fresh & trustworthy

Cream#F0FFD4
Mint#28EBA7
Periwinkle#9094FF
Lime#D0FF73

Elegancein motion

Mazda Guatemala by IVESA, redesigned as a premium, performance-driven digital experience.
More than a redesignBetter usability, clearer content structure and stronger lead generation.
Mazda Guatemala website home on a laptop
01[ About the project ]
Project goal

Create a premium, performance-driven experience aligned with Mazda's global brand, while adapting to the local market context.

Premium experienceUsabilityContent structureLead generationGlobal brand alignment

Mazda Guatemala's website was redesigned to elevate the brand's digital presence while improving usability, content structure and lead generation performance.

ProjectMazda Guatemala website
ClientIVESA
TypeWebsite redesign
ToolsFigma, Photoshop
[ Typography ]02
A
Mazda
Type
RegularItalicBold
H1 — Mazda Type42 px
H2 — Mazda Type36 px
H3 — Mazda Type24 px
[ Color ]03

A restrained palette of deep black and clean white, warmed by a bronze accent that evokes premium craftsmanship.

#000000
#8B693E
#FFFFFF
04[ Homepage ]
Mazda CX-5 hero carousel on the redesigned homepage
Hero carouselFeatured models with a clear call to action.
Floating navigationSearch and account access always within reach.
05[ Key pages ]

Designed page by page, built to guide

Mazda Guatemala page design
06[ Site map ]

Every path in one map

Mazda Guatemala
Inicio
  • Hero
  • Nuestros vehículos Autos · SUVs · Pickups
  • Tu próximo Mazda
  • Seguridad y confianza
  • Centro de servicio
  • Vehículos destacados
  • Agencias y talleres
Modelos
  • SUVs
  • Autos
  • Pickups
  • Comparador de versiones
  • Página de modelo CX-5 · Mazda 2
Centros de servicio
  • Encuentra tu centro de servicio
  • Agencias Mazda
  • Talleres certificados
Repuestos
  • Repuestos originales
Nuestra historia
  • Más que autos
  • Hiroshima: ciudad del desarrollo artesanal
  • Kumano: la suavidad del detalle
  • Valores
FooterContáctanosUsados IvesaHorariosRedes sociales
07[ Why this site ]

Built to turn curiosity into a visit to the dealer

Mazda CX-3 tail light at dusk
Why this site

Elegancia que se mueve contigo.

Mazda Guatemala · IVESA
Mazda CX-3 driving past stone arches
Structure
07
Sections, one clear path from discovery to dealer.

A premium brand needs a clearer way to be found.

More usability, a clearer content structure and stronger lead generation, with a premium experience adapted to the local market.

Explore the pages
Mazda CX-60
Site structure

One clear path, from discovery to dealer

01Hero02Our vehicles03Your next Mazda04Safety and trust05Service center06Featured vehicles07Dealers and workshops
UX DesignUI Design

Pradera, one digital home for every center

A website redesign for one of Guatemala's leading commercial center networks, built to unify the brand, simplify navigation across locations and bring the community closer.

Website designFigma · Photoshop
Pradera website on desktop Pradera website on mobile Desktop + Mobile

Pradera is a network of shopping centers redesigned as one connected platform to help people find stores, food and fun across Guatemala.

Project overview

The objective was to redesign the digital platform to unify the brand ecosystem, improve user navigation across locations and strengthen community engagement through a scalable and modern web experience.

Pradera shopping center
Locations11 centers across the country, one digital home.
Pradera mobile unique cards
Chiquiclub

The kids’ club: games, events and rewards for the youngest visitors.

Pradera mobile timeline
Key task

Context

Pradera operates multiple shopping malls across the country, each with its own digital needs. The challenge was to create a centralized digital presence that could represent all of them while maintaining clarity, accessibility and operational consistency.

Solution

One scalable platform with clear navigation by location, a vibrant visual system and content structured around what visitors look for: shops, food and entertainment.

FactsAbout
PraderaProject
Website redesignType
UX and UIFocus
Figma, PhotoshopTools
One platform, multiple touchpoints.

Everything a visit needs, in one place.

  • Shops

    Find the best national and international brands.

  • Dining

    Enjoy a wide variety of restaurants and cafés.

  • Entertainment

    Spaces designed for fun and special events.

Pradera website on a desktop monitor
02[ Key pages ]

Designed page by page,
full of life

Pradera page design
03[ Color ]

A palette full of life, anchored by a deep navy

#2B2D44
#BEEF00
#7B3CBD
#F5416C
#00C4B3
#F7A700
#FF5F00
#C3D500
Design04Mobile

Mobile Design

Mobile timelineMobile unique cards
Timeline of Pradera's history with arrows to browse each stage
Photo cards that highlight what makes Pradera unique
Shops, Dining and Entertainment as color-coded cards
Clear typography on a warm cream background

11 centers across 8 departments. Find yours.

Designed mobile first, built to scale

Most of Pradera's visitors browse from their phones, so every screen started on mobile. The same system then grows into a fully responsive desktop experience, designed with the same care, so the site feels at home on any device.

Explore the key pages
Pradera on a laptopPradera on a phone
Website designE-commerceUX / UI

Playful on the outside,effortless to buy.

An e-commerce experience that turns the personality of a fast-growing cookie brand into a seamless, conversion-driven store.

Holy Chip product page
Holy Chip cookie stack
Fresh from
the oven
Add to cart
in one tap
01 Overview

Translating a vibrant brand into a seamless, conversion-driven platform.

Lulis is a fast-growing cookie brand focused on playful identity, premium ingredients, and highly visual product appeal.

The objective of this project was to design an e-commerce experience that translated the brand's vibrant personality into a seamless, conversion-driven digital platform.

Project
Cookie brand e-commerce
Deliverable
Website design
Focus
UX / UI & visual design
Tools
Figma, Photoshop
Peanut butter cookie stack

Playful identity

Saturated colour blocks, geometric shapes and loud headlines carry the brand's personality into every screen.

Cookie close-up

Premium ingredients

Close, appetite-first photography lets texture and fillings do the selling.

S'mores cookie stack

Highly visual product appeal

Large product shots on bold backgrounds make every flavor feel like a collectible.

The challenge

Balance bold visual storytelling with structured usability, so the website feels immersive and fun while remaining intuitive, fast, and optimized for purchase.

The approach

Let the brand shout in the hero and photography, then keep the shopping path calm and predictable.

  • A three-panel hero with one big headline sets the mood in seconds.
  • Category tabs and quick-add steppers keep the catalog easy to scan.
  • Pack-size choices and a single high-contrast button focus the product page on buying.
02 Design walkthrough

Explore the screens

Drag the cards or pick a tab to move through the key moments of the shopping journey.

Lulis home page
Lulis catalog
Lulis product page
Lulis more flavors
Lulis Cookie Care and footer

03 Conversion

Small details, big appetite.

Every component is built to make the next step obvious: choose a pack, add to cart, keep browsing. Try them.

¡Listo! 3 Holy Chip en tu carrito
Holy Chip cookie stack
Elige cuantas quieres
HOLY CHIPQ20.00
0
Ingredientes 100% naturales
Libre de lácteos
Libre de harina de trigo

Galletas recién horneadas hasta la puerta de tu casa

04 Brand foundations

A system built from the brand book

Gopher BoldHeadlines
GilroyBody text and accents
Aa
Essence
  • Fun
  • Trendy
  • Bold
  • Fresh
  • Dynamic

Fun to browse, easy to buy.

A bold brand and a structured interface working together, so every visit ends with a full box of cookies.

Explore the screens
Lulis home on a laptop

The brand book,brought to life.

An interactive digital brand book for Oriflame associates, connected to Canva so they can turn the brand into business cards, brochures and more. Designed for desktop, tablet and mobile.

Responsive designFigma
Oriflame brand book on laptops and tablets
01 Overview

A brand book that lets associates create, not just read.

This project was conceived for Oriflame associates: an immersive digital brand book that explains the logo, color palette, typography and story of the brand through an interactive narrative.

It goes beyond guidelines. The platform connects with Canva, so associates can sign in and use ready-made brand templates to design their own business cards, brochures and other materials, always on brand.

Brand book + Canva

Learn the brand.
Then make it.

Business cardsBrochuresFlyersSocial posts
Oriflame brand book on two phones
Oriflame brand book on a laptop
Responsive

Made for desktop, tablet and mobile.

02 Design process

Five planes, one brand book.

The five elements of UX design guided every decision, from the first goal to the final pixel.

01

Strategy

Why the brand book exists and who it serves.

02

Scope

What the platform includes, and what it leaves out.

03

Structure

How sections connect and how people move between them.

04

Skeleton

Wireframes that set the layout, navigation and hierarchy.

05

Surface

Color, type and imagery that make it feel like Oriflame.

03 Wireframes

Layout first, beauty second.

Desktop version

Wireframe: company intro, 50 years and timeline
Wireframe: values and beauty is in you
Wireframe: most recognized brands
04 Design walkthrough

Explore the screens

Click a panel to open a chapter, drag sideways, or use the arrows.

Welcome
Company
Company, in blue
What makes us unique
History: 1967
History: 1970
History: 1982
Giordani
NovAge
Primary colors
Secondary colors
Secondary colors, continued
Awaken your creativity
Discover

Oriflame typography page on a tabletBeauty by Sweden page on a tablet
05 Typography
Aa

Oriflame Sans Print

H1 · 90 px
Oriflame Sans Print
H2 · 80 px
Headlines with air
H3 · 70 px
Light and geometric
H4 · Subtitle, 20% tracking
Colors that identify us
Body

More than a beauty company, we are a community that changes lives, inspired by your dreams.

06 Color

Colors that identify us.

Hover or tap a color to read it. Primary colors carry the brand, secondary colors add energy for events and seasonal pieces.

Primary

Secondary · Fresh

Secondary · Warm

Beauty by Sweden,
one screen at a time.

Website designNonprofitDesktop + mobile

Turning visitors
into supporters.

A website for Achungo Children’s Center, a nonprofit educating vulnerable children in rural Kenya, built to help volunteers and donors take a first step.

See the screens
Achungo Our Story timeline on a laptop
01 · Overview

A website that explains the mission, then asks for help.

Achungo Children’s Center educates more than 800 vulnerable children in rural Homa Bay County, Kenya. The challenge was to communicate that work to people who have never visited.

  • Tell the story with real photography and real numbers
  • Show where every dollar goes, with trust badges nearby
  • End every page with one clear next step
Achungo on a phone
02 · Audiences

Two audiences, one clear path each.

Volunteers who might travel or pray with the team, and people or companies who might give. Each action has its own section, its own color and a button.

  • Volunteers: travel in January or June, or join the weekly prayer
  • Donors: give monthly or once, from $25
  • Sponsors, companies and foundations: secondary school, stock, matching and planned gifts
Achungo on a laptop
03 · Identity
Typography
Aa
Poppins
Color
Earth tones, one green signal
Buttons
Give NowGive NowLearn more
AchungoChildren’s Center

Educate a child.
Transform a community.

790+Students learning across Achungo campuses
04 · Interface

Every screen has one clear action.

Three students smiling at school
Next tripService trip to Kenya

January and June · 10 days

Give monthlyYou can help write the next chapter.
$25$50$100

$100 pays for a year of education.

SponsorSecondary student

Three years of school

Trusted byECFA · Candid · Charity Navigator
05 · Design walkthrough

Explore the pages.

Scroll inside each frame to read the full page, just like a visitor would.

Home
Achungo home page, full length
Scroll ↓

Numbers first, then the story: key figures, a “What we do” panel, programs in color bands and a donation card.

Our Story
Achungo Our Story page, full length
Scroll ↓

The founder’s story, community numbers, an interactive timeline, Kenyan operations, mentors and a clear note on stewardship.

06 · Desktop + mobile

One site, every screen.

Supporters arrive from emails, social posts and search on any device. The layout, buttons and donation card adapt so the main action stays within reach.

DesktopMobileGive Now
Achungo donation and home screens on two phones
Give is always close

A green “Give Now” button sits in the navigation on every page.

Real photography leads

Large, warm photos of students come before any explanation.

Trust before the ask

Candid, ECFA and Charity Navigator badges sit next to the donation options.

Website redesignUX & contentB2B

A flexible BPO,
finally explained.

A redesign of Omni Interactions’ website that sharpens the UX, the wording and the communication for the leaders who buy customer-support capacity.

See the screens
01 Overview

A site that explains the offer, not just the company.

Omni Interactions is a BPO built around a fractional, on-demand workforce. The challenge was to make that model easy to grasp in seconds for the people who decide on customer-support capacity.

The redesign reworks the UX, rewrites the messaging around the buyer’s problem, and puts proof and clear next steps on every page.

Client
Omni Interactions
Type
Website redesign
Focus
UX, wording & communication
Audience
CX & operations leaders
02 Approach

Three levers, one clearer story.

1

Wording

Headlines name the buyer’s problem first, in plain language, instead of describing the company.

“Stop staffing for peaks. Start scaling to demand.”
2

UX

One idea per section, scannable cards and tabs, and a single, consistent action to take next.

“See how it works” · “Book a demo”
3

Communication

Proof comes early: results, compliance and real use cases sit right next to every claim.

97% CSAT · SOC 2 · HIPAA · PCI
Built forCX & operations leadersFortune 500s & high-growth companiesGovernment agencies
03 Key decisions

Clear words, easy actions, proof up front.

Three decisions shaped every page: lead with the buyer’s problem, make each step easy to scan and act on, and show evidence before the ask. They hold up on desktop and on mobile.

1

Lead with the problem

Headlines name the pain first: peaks, idle cost, rigid contracts.

Lead with the problem
2

Name the real issue

One clear idea per section, shown next to the visual that proves it.

Name the real issue
3

Same message on mobile

The promise stays short and readable on a small screen.

Same message on mobile
4

Steps, not paragraphs

Numbered steps make the model easy to follow in seconds.

Steps, not paragraphs
5

Tabs that show scale

Intraday, weekly, monthly: coverage explained in one tap.

Tabs that show scale
6

Scannable on mobile

Stacked cards and steps keep the flow simple to thumb through.

Scannable on mobile
7

Short, tappable cards

Key differentiators in a few words each, one per row.

Short, tappable cards
8

Metrics first

Four headline results give quick evidence before any claim.

Metrics first
9

Compliance in plain sight

SOC 2, HIPAA and PCI answer procurement questions early.

Compliance in plain sight
10

Real use cases

Industry examples with real numbers, ready to scan on mobile.

Real use cases
04 About

A human page behind the model.

The About page puts the team first, then explains what makes Omni different and the values behind the work.

What makes Omni different
Our culture
05 Look & feel

Calm, trustworthy, with one bright signal.

Navy#314F81
Teal#17AC96
Orange#FFA447
Cloud#F6F6F6

Navy and teal carry the message, soft grey gives the content room, and orange is saved for the main conversion action.

06 The pages

Explore the screens

Scroll inside each page to see it from top to bottom.

Omni home page
Omni solutions page
Omni about page
Scroll ↓
Gamified learning ecosystemWeb platform · UX / UI · Gamification

Humanizing the digital experience ✱

Spyro Challenge helps developers and professionals build UX knowledge through interactive modules, challenges and a card game.

See the screens
Spyro Challenge courses page on a laptop
01 The challenge

CRM systems are too complex, and nobody enjoys learning them.

In an increasingly digital world, CRM systems have become essential tools for managing business operations. Yet many of these platforms fail to meet user expectations: clunky interfaces, steep learning curves and limited personalization create friction, frustration and, ultimately, abandonment.

The challenge was to design a more human-centered experience that is intuitive, engaging and easy to integrate into daily workflows.

Spyro Challenge login on a laptop
Project
Spyro Challenge
Type
Web platform, UX/UI design
Focus
Gamified learning & CRM adoption
Audience
Developers & professionals
02 Insights

Interview results, in numbers.

0188%

of users abandon a software platform if it feels too complicated or unintuitive.

0250%

of industrial users say poorly designed software causes frustration and disinterest, directly affecting productivity.

03Hands-on

Users in professional environments respond better to gamified, scenario-based learning than to static manuals or theory.

03 Needs

Meet Luis, the user behind the numbers.

Luis, backend developer“I don’t have time to fight with software. I need tools that work with me, not against me.”

Needs

Luis is a highly capable backend developer who writes clean, scalable code. His daily work revolves around logic, databases and system architecture. When it comes to UX/UI, though, he often feels out of his depth. He is frequently asked to implement design decisions without fully understanding the user experience behind them.

04 Problem & solution

From a manual to a game worth playing.

Problem

CRM systems in industrial and technical environments are often complex, unintuitive and not designed with users in mind. This leads to frustration, high abandonment rates, long onboarding processes and poor collaboration between designers and developers. Many developers are expected to implement interfaces without understanding UX principles, causing misalignment, inefficiencies and low user satisfaction.

Solution

Spyro Challenge is a gamified learning ecosystem designed to humanize the digital experience. It equips developers and professionals with accessible UX knowledge through interactive modules, challenges and a physical card game. By combining gamification, personalization and interactivity, it simplifies UX concepts, boosts CRM adoption, strengthens cross-team collaboration and makes learning engaging, practical and continuous.

Three ingredients

  • Gamification
  • Personalization
  • Interactivity

The outcome

UX concepts become simple, CRM adoption grows, cross-team collaboration gets stronger and learning stays engaging, practical and continuous.

05 How it works

Four steps, zero homework feeling.

01

Take the level test

02

Learn in short modules

03

Practice with scenarios

04

Earn badges and level up

06 UI design

Clean, intuitive, and a little bit playful.

The UI was designed to feel approachable for people who may not know UX concepts. It blends game-inspired visuals with practical learning components, so progress feels motivating, not like homework.

1

Modules, not manuals

Each module focuses on one UX/UI principle and is separated into easy-to-navigate lessons.

Learn page
2

Courses at a glance

Cards with module counts and certification tags let people track what to learn next.

Courses page
3

Find your level

A short test personalizes the learning path by role, level and knowledge.

Level test card
4

Practice by playing

Scenario questions turn theory into quick, hands-on challenges with instant feedback.

Practice question
5

Celebrate progress

Badges, scores and a clear “Continue” keep momentum after every challenge.

Completion screen
07 Gamification layer
Reward

Progress bars, badges and trophies

Visible achievements reflect each user’s progress.

Motivate

A level-up system

Continuous learning is rewarded, one challenge at a time.

Delight

Visual feedback and animation

Small moments of satisfaction after completing a challenge.

08 Typography & color

Bright, friendly, never childish.

TypefaceKross Neue Grotesk
Headline 48 / 36 / 28 / 24Body 20 / 16 / 14

Headlines use −1% letter spacing; body text uses 0 to 0.5%.

Purple#9541FB
Lime#C8F53D
Forest#006D5B
Lilac#C6A0F5
Mint#D4FEB7
White#FFFFFF
09 The screens

Explore the platform

Scroll inside the Learn page to read it from top to bottom.

Learn page
Courses page
Practice question
Completion screen
Scroll ↓
10 Results & impact

Learning that actually sticks.

01+35%

CRM adoption. Thanks to gamified learning, users feel more confident and engaged with the platform, reducing resistance to change.

02+25%

Better team collaboration. A shared understanding of UX principles fosters smoother communication between developers, designers and business teams.