Case Studies
A multilingual UNDP research survey shaped into a web-native interactive experience, using familiar form controls, Three.js feedback, and personalized result assets to make abstract social questions easier to move through.
Published · Updated
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.
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.
I led creative and product direction as founder and Creative Director at Motion Miracles. I worked hands-on across interaction design, visual prototyping, art direction, and production handoff.
My work covered the survey flow, slider and selector behavior, responsive states, early Blender and Three.js tests, character and scene direction, result screens, and social share assets.
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.
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.
The final survey followed that idea. Respondents used standard controls. The scene translated the answer into distance, location, or selected state.
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.
These prototypes gave the team something concrete to reject, adjust, or carry forward before production work started.
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.
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.
That set the baseline for the final build. The survey could look custom without asking people to use custom controls.
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.
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.
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.
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.
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.
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.
These mockups guided production. Scenes could change by question. The answering pattern stayed stable.
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.
The final flow did not need every screen to do the same amount of work. It needed each question to be understood quickly.
After submission, the survey had to turn answers into a result, explain that result, offer resources, and make sharing easy.
The result screens kept the same visual language while the survey moved from answers to output.
Preview cards, generated copy, and result artwork carried the result beyond the survey without needing a separate asset set for every channel.
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.
