# Gamified Social Impact Survey for UNDP Source: https://anishwij.com/blog/undp-survey Category: Case Studies Published: 2026-06-08T12:00:00.000Z Updated: 2026-06-20T02:40:42.000Z A multilingual UNDP research survey redesigned as an accessible, gamified web experience with familiar controls, Three.js feedback, and personal results. [UNDP survey live preview](https://undp-survey.vercel.app) — A multilingual survey combining familiar form controls, interactive 3D feedback, and personalized results. ### Project at a Glance **Client** UNDP **Studio** Motion Miracles **Status** Completed and published in 2022 **Role** Founder and Creative Director **Scope** Creative and product direction, gamified interaction design, visual development, and production handoff. **Tools** Figma Three.js Blender ### Overview UNDP had already defined the research. The questions, result logic, and output categories were in place. My job was to shape how people moved through it. A plain form could have collected the data, but these were personal questions about closeness, belonging, comfort, control, and identity. The interface had to make each answer easy to understand without slowing people down. We kept the survey recognizably a survey. Sliders, selectors, buttons, and direct choices stayed in place. The 3D layer supported those controls by turning answers into distance, position, progress, and selected states. The survey could feel more alive, but it still had to work as a fast, accessible web experience in the browser, on phones and desktops. Video: [Survey interaction preview](https://anishwij.com/media/blog/case-studies/undp-survey/video/undp-preview-video.mp4) — Walkthrough of the final survey controls, 3D response states, and completed flow. ### My Role I led creative and product direction as founder and Creative Director at Motion Miracles. I guided interaction design, visual development, art direction, and production handoff. My direction covered the survey flow, slider and selector behavior, responsive states, character and scene design, result screens, and social share assets. The team handled the Three.js prototyping and implementation. I also worked with the creative leads and production teams to keep the survey behavior consistent as the work moved from prototype to final build. ## Starting From the Survey UNDP brought the research direction, question structure, and result logic. That set the boundary for the work. We were not changing the survey. We were designing the path through it. The useful pattern came from the questions themselves. If a question asked about closeness, the screen could show closeness as distance. The slider still captured the answer, but the scene helped explain the value. That became the working rule. Keep the control familiar, then let the scene clarify what changed. Early brief material for closeness, location setup, and final results. The task was to make those ideas visible without changing the survey logic. ![Client slide showing circle-pair closeness options for relationship questions](https://anishwij.com/media/blog/case-studies/undp-survey/client-resources/radio-input-slide.webp "Original closeness idea") ![Client slide showing a location selection requirement for the survey](https://anishwij.com/media/blog/case-studies/undp-survey/client-resources/region-selection-slide.webp "Location setup") The final survey followed that idea. Respondents used standard controls. The scene translated the answer into distance, location, or selected state. Final examples where the controls collect the answer and the scene shows what changed. Video: [Closeness as distance](https://anishwij.com/media/blog/case-studies/undp-survey/experience/close-to-mother.mp4) — Final survey closeness interaction showing a person moving a slider for closeness to their mother Video: [Location as setup](https://anishwij.com/media/blog/case-studies/undp-survey/experience/region-selection.mp4) — Final survey location selection interaction showing a map-like setup flow ## Making the Interaction Tangible Before the final interface was set, I used Blender and rough interaction comps to make the direction concrete enough to critique. The point was not final art. It was to test whether characters, scenes, and motion could support the survey without asking respondents to learn a new way to answer. Early character, scene, and input studies from the pre-production pass. Video: [Character and motion](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/rig-running.mp4) — Behind-the-scenes Blender character rig and animation setup from the 3D production pass ![Early mobile prototype showing a closeness slider with two abstract characters](https://anishwij.com/media/blog/case-studies/undp-survey/concept/slider-input-enhanced.webp "Closeness slider") ![Early mobile prototype showing a select input screen](https://anishwij.com/media/blog/case-studies/undp-survey/concept/select-input-enhanced.webp "Selector") ![Early mobile prototype showing a radio-style choice screen](https://anishwij.com/media/blog/case-studies/undp-survey/concept/radio-input-enhanced.webp "Direct choice") These prototypes gave the team something concrete to reject, adjust, or carry forward before production work started. ## Testing How the Answers Should Work The prototypes made the tradeoff clear. The survey could support more custom interaction, but the questions were already personal. The answer pattern needed to stay close to familiar form flows like choosing, sliding, continuing, and submitting. Each prototype had to pass the same test. The visuals could support the answer, but they could not make respondents learn a new interaction before answering. Character-led prototype exploring relationship distance before the answer moved back to standard inputs. Video: [Character-led test](https://anishwij.com/media/blog/case-studies/undp-survey/prototyping/prototyped-concept-mechanic.mp4) — Prototype concept mechanic showing early survey interaction behavior The character-led prototype set the boundary. It made relationship distance visible, but it also asked respondents to read character movement before answering. We kept the idea of visual feedback and moved the primary answer back to standard inputs. The final version kept familiar inputs in charge on mobile and desktop. Respondents answered through standard form controls, and the illustration reacted after the selection instead of replacing labels, tap targets, focus states, or the submit flow. Rough mobile prototype for answer flow, feedback timing, and control clarity before final artwork. Video: [Mobile control test](https://anishwij.com/media/blog/case-studies/undp-survey/prototyping/prototype-input-mechanics.mp4) — Mobile prototype testing survey slider and input behavior before final artwork That set the baseline for the final build. The survey could look custom without asking people to use custom controls. ## Art Direction and Screen Design Before the brand palette was applied, I explored the visual language through rendered concepts, silhouettes, and simple scene shapes. The visuals needed to add context without distracting from the question or the control. Early closeness render exploring character distance, soft forms, and screen hierarchy. ![Early rendered belief closeness concept with blue characters and a neutral background](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/belief-closeness-color.webp "Early relationship scene") The same early pass expanded into models, props, and settings. Houses, interiors, flags, maps, and character staging helped define how one visual world could support questions about home, country, community, family, and identity. Early model and prop studies for home, community, country, and family questions. ![3D model sheet showing house and outdoor environment props](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/house-models.webp "House and place models") ![3D model sheet showing a home interior scene with a character](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/home-models.webp "Home interior models") ![3D model sheet showing characters beside Maldives and Sri Lanka flags](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/flag-models.webp "Country references") The brand palette came in next through the project guidelines. Neon yellow, pink, blue, and soft gradients gave the survey more energy, but they also shaped the production choices. Gradients, simple materials, and restrained model detail helped the scenes feel branded without adding large texture files or making the questions harder to read. Brand palette from the project guidelines before the branded screen pass. ![Colour palette guideline showing primary and secondary brand colors](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/color-palette.webp "Color palette") After the palette was set, the first concept art piece was the Adventurer. Its rounded shape, high-saturation color, and soft 3D form gave the result screen and share assets a visual anchor before the same look moved into survey scenes. Adventurer concept after the brand palette was set. ![Adventurer concept artwork with an abstract yellow character wearing a backpack](https://anishwij.com/media/blog/case-studies/undp-survey/branding/adventurer.webp "Adventurer result concept") The next step was applying that palette to product screens. The colors tied the survey back to the wider project, but they also forced decisions about contrast, text placement, control color, and how much saturation each scene could hold. Branded screen concepts applying the brand palette to the question interface. ![Interface mockup for the survey](https://anishwij.com/media/blog/case-studies/undp-survey/art-direction/ui-mock.webp "First branded screen") ![High-energy branded concept for a religious belief closeness question](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/religion-closeness-branding.webp "Branded relationship scene") The final mockups applied the same palette and shape language across different question types. Language used speech bubbles. Community used place and distance. Country used map references. Family questions kept the same closeness mechanic inside a more personal scene. Palette-based mockups for language, community, country, and family closeness questions. ![Mockup render showing a language closeness question with multilingual speech bubbles](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/moc-language-closeness.webp "Language relationship mockup") ![Mockup render showing a local community closeness question with houses and a heart](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/moc-local-community.webp "Community closeness mockup") ![Mockup render showing a country closeness question with a stylized Sri Lanka map](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/moc-country-closeness.webp "Country relationship mockup") ![Mockup render showing a closeness question about the person's mother](https://anishwij.com/media/blog/case-studies/undp-survey/mocks/moc-mother-closeness.webp "Family closeness mockup") These mockups guided production. Scenes could change by question. The answering pattern stayed stable. ## Building the Final Flow Production was about applying the rule consistently. Relationship and belonging questions got richer scenes because distance helped explain the answer. Direct questions stayed close to standard form inputs because extra motion would have made them less clear. Final question states across scenes, standard inputs, and plain confirmation screens. ![Final survey closeness slider asking how close the person feels to their mother](https://anishwij.com/media/blog/case-studies/undp-survey/experience/slider-close-to-mother.webp "Closeness to a parent") ![Final survey closeness slider asking how close the person feels to their home](https://anishwij.com/media/blog/case-studies/undp-survey/experience/slider-close-to-home.webp "Closeness to home") ![Final survey closeness slider asking about community](https://anishwij.com/media/blog/case-studies/undp-survey/experience/slider-close-to-community.webp "Closeness to community") ![Final survey closeness slider asking about people who speak other languages](https://anishwij.com/media/blog/case-studies/undp-survey/experience/slider-close-to-other-languages.webp "Closeness across language") ![Final survey closeness slider asking about people with other beliefs](https://anishwij.com/media/blog/case-studies/undp-survey/experience/slider-close-to-other-beliefs.webp "Closeness across beliefs") ![Final survey radio-style question asking about close friends](https://anishwij.com/media/blog/case-studies/undp-survey/experience/radio-close-to-friends.webp "Direct choice") ![Final survey radio-style question about control over things in the person's area](https://anishwij.com/media/blog/case-studies/undp-survey/experience/radio-control-over-things-region.webp "Control and belonging") ![Final survey boolean question asking whether a video was watched](https://anishwij.com/media/blog/case-studies/undp-survey/experience/boolean-extreme-lives-video-watched-question.webp "Simple confirmation") The final flow did not need every screen to do the same amount of work. It needed each question to be understood quickly. ## Results and Share Assets After submission, the survey had to turn answers into a result, explain that result, offer resources, and make sharing easy. Result flow from calculation to output, explanation, and follow-up resources. ![Final survey calculating results screen](https://anishwij.com/media/blog/case-studies/undp-survey/experience/calculating-results.webp "Calculating results") ![Final survey completed quiz screen](https://anishwij.com/media/blog/case-studies/undp-survey/experience/completed-quiz.webp "Submit results") ![Final survey personalized Adventurer result screen](https://anishwij.com/media/blog/case-studies/undp-survey/experience/results.webp "You're the Adventurer") ![Final survey You are the Adventurer result explanation screen](https://anishwij.com/media/blog/case-studies/undp-survey/experience/results-further-information.webp "Result explanation") ![Final survey further resources screen](https://anishwij.com/media/blog/case-studies/undp-survey/experience/results-further-resources.webp "Further resources") The result screens kept the same visual language while the survey moved from answers to output. Share assets for carrying the result outside the survey. ![Circle of Influence Take Quiz card with UNDP and EU logos](https://anishwij.com/media/blog/case-studies/undp-survey/opengraph/main-opengraph.webp "Quiz preview card") ![Generated Twitter post draft for sharing a quiz result](https://anishwij.com/media/blog/case-studies/undp-survey/share/twitter-generation.webp "Generated share post") ![Adventurer result share card with abstract yellow character](https://anishwij.com/media/blog/case-studies/undp-survey/opengraph/adventurer.webp "Adventurer result card") Preview cards, generated copy, and result artwork carried the result beyond the survey without needing a separate asset set for every channel. ## The Rule That Held The controls did the answering. The visuals explained what the answer meant. That rule kept the project from becoming decoration. Characters, scenes, motion, and result assets earned their place when they helped someone answer a question, read feedback, or recognize their result after the survey.