top of page
logo white TEXT.png

GAMIFIED TEST 

map_hi-fi_2.png

  • THE WHY (The Problem) Traditional admission exams cause high anxiety and have low completion rates among young applicants. The Academy needed to modernize its evaluation process to measure soft skills accurately without the stress of a standardized test.​

​

  • THE WHAT (The Solution) "Agentes de lo Cotidiano": A browser-based 3D RPG (Role-Playing Game) where applicants navigate a fictional world, completing missions that secretly function as psychometric and opinion assessments.

​​

  • THE HOW (The Process) We applied Gamification Mechanics combined with strict User-Centered Design. By moving from low-fidelity wireframes to high-fidelity Unity assets and validating with real users, we created a seamless experience that feels like a game but functions as a rigorous data-collection tool.

​

​

Role and Responsibilities:

  • Lead UX/UI Designer

  • User Researcher



 

Tools Used:

  • Figma

  • Adobe Photoshop

  • ZBrush

  • Blender

  • Unity

Project duration:

  • 3 months

1. The Challenge (Business Strategy)

 

As a new player in the competitive audiovisual market in Medellín, Stereo Studio needed to differentiate itself instantly. The challenge wasn't just "making a logo," but designing a complete service experience that felt professional, accessible, and creative for local artists and corporate clients.

 

2. Market Research & Benchmarking

 

Before designing, I conducted a Competitive Audit of 10 other studios in the region.

  • Discovery: Most competitors had "dark," "grungy," or disorganized visual identities that intimidated corporate clients.

  • Opportunity: We identified a gap for a studio with a clean, minimalist, and "tech-forward" aesthetic that would appeal to both rock bands and advertising agencies.

FLOW.png
Early stage user flow diagram defining the navigation from login to final feedback.

3. The Design Process: From Low-Fi to Hi-Fi

​​

I utilized a "Mobile-First" approach logic adapted to PC, focusing on functionality first. I created low-fidelity wireframes in Figma to validate the layout and interaction zones before investing time in expensive 3D asset production.

 

A. The Onboarding (Login) We kept the login simple to reduce friction, but transitioned from a standard form to an immersive entry point that sets the narrative tone immediately.

[INSERT IMAGE HERE: Side-by-side comparison of 'login_lofi.png' and 'login_hifi.jpg'] Caption: Evolution of the Login screen. The Lo-Fi wireframe (left) established the hierarchy, while the Hi-Fi version (right) integrated the brand's atmosphere.

login_lofi.png
login_hifi.png
Evolution of the Login screen. The Lo-Fi wireframe (left) established the hierarchy, while the Hi-Fi version (right) integrated the brand's atmosphere.

B. Character Customization (Engagement) This was a critical feature for user retention. The challenge was organizing complex customization options (skin, hair, clothes) without cluttering the screen.

​

  • UX Solution: We used a tabbed system on the right panel to keep the 3D character as the focal point.

character_creation_lofi.png
character selection.png
The 2D schematic (left) ensured that navigation paths were clear before the 3D environment (right) was built.

4. Scalability: The Design System

 

To ensure the development team in Unity could implement the UI quickly, I created a modular Design System. This reduced implementation time by allowing developers to reuse buttons, panels, and icons across different levels.

components_ui.jpg
UI Kit and Component library used to maintain visual consistency and speed up Unity implementation.

5. Research Methodology: How We Validated the UX

 

To ensure the assessment was fair and accessible, we conducted Qualitative Usability Testing before the final launch.

​

The Methodology:

  • Participants: We recruited 8 users within the target demographic (ages 18-25).

  • Technique: We used the "Think Aloud" Protocol. Users were asked to verbalize their thoughts while navigating the interface, allowing us to identify frustration points that analytics alone wouldn't catch.

  • Setup: Moderated remote sessions (via Discord/Google Meet) where I observed the user's screen in real-time.

  • ​

Key Findings & Iterations:

  • Observation: In the "Character Creation" screen, 3 out of 8 users tried to click the 3D model to rotate it, but the feature wasn't implemented, causing frustration.

  • Action: We added clear "Rotate" UI arrows and a visual cue to indicate interactivity.

  • Observation: On the Map Screen (map_lofi.png), users struggled to identify which levels were unlocked vs. locked.

  • Action: We implemented a color-coded state system in the final UI (Grey = Locked, Color = Active) to reduce cognitive load.

LOGIN.png
bottom of page