Realismagico Logo
Go back

Realismo Mágico: Gamifying the Latin American Literary Experience

Client: Realismo Mágico
Duration: 7 months
Role: Web design, Product design, Brand design, Mobile app, Desktop app
Tools: Figma, Wordpress, Elementor, WooCommerce
Jump to solution

Challenge

Despite the rich cultural heritage of cities like Barranquilla, local authors are "starving in plain sight." The Monetization Gap: Competitors like Wattpad offer community but no instant sales; MercadoLibre offers sales but kills discovery for unknown authors. The Distribution Barrier: Physical bookstores take up to 40% commission and offer limited shelf life. The Engagement Slump: Traditional digital text struggles to compete with the high-dopamine interactivity of social media and gaming.

Realismagico book marketplace UI design | Home + Post screen for desktop

Strategy: The “Magical Realism” Funnel

Our approach was to build a “Unicorn” startup for the Caribbean region by leveraging the cultural weight of Barranquilla.

  • Gamification as the Hook: Using interactive stories (puzzles, multiple endings, “Disney Princess” style path-finding) to increase time-spent-on-site.
  • Hyper-Local Advantage: Positioning the HQ in Barranquilla—the home of Gabriel García Márquez—to tap into a passionate, creative talent pool at a lower cost than Bogotá or the USA.
  • Economic Disruption: Offering a 10% transaction fee, drastically undercutting the 40% industry standard, ensuring more money stays in the creator’s pocket.

The Design Process

I architected a design-to-commerce ecosystem that transforms passive ‘players’ into invested ‘collectors.’ By blurring the lines between digital engagement and physical ownership, I established a competitive edge that redefines the traditional retail journey.

1. Competitor’s Map

Realismagico Competitors Map

Here lies a vast market potential in offering design-driven products that focus on selling unique experiences, not merely the product itself. This encompasses the entire customer journey, from the initial purchase experience to post-sale functionality. By carefully crafting product packaging, brand communication, and value-added transmedia experiences, businesses can elevate the value of physical purchases into the digital realm. This can be achieved through animations, videos, applications, music, and other interactive elements that seamlessly complement the physical product.

2. User Personas

User personas created for UX design process for Realismagico

These three personas represent a diverse cross-section of consumers, but they share a powerful common thread: a desire for identity-driven escapism. Whether they are looking for professional fulfillment, familial security, or digital fame, they all view “content” and “design” as the primary tools to navigate their reality.

3. Sitemaps & Information Architecture

Sitemap created for UX design process for Realismagico Book marketplace app

3 Key Pillars of our Strategy

  • The “Blue Ocean” Advantage: While competitors stay crowded in the “Design Products” sector, we move into the unoccupied “Experiences/Stories” quadrant. This makes our brand a “portal” rather than just a shop.
  • The Content-to-Commerce Loop: Our platform uses Individual Posts (videos, stories, and art) as an SEO “hook.” These posts attract users like Karina (The Artist) and Miguel (The Gamer) through organic search, turning a casual browser into a loyal customer by offering value before the sale.
  • The Creator Ecosystem: By allowing users to transition from “Collectors” to “Authors,” we create a self-sustaining engine of user-generated content. This satisfies the “alternative” identity of users like Gustavo (The Manager/Rocker), who want to engage with a subculture, not just a storefront.
Realismagico user flow

4. User Journey Mapping

User journey map identified for Realismagico web app

Opportunity
Website with elaborate filters to find relevant content easily; optimize content with innovative media focused on smart devices, create interactive stories or page scrolling with dynamic elements to make each reading unique and experience the story being told in a more engaging way.

User journey map identified for Realismagico web app

Opportunity
Website with elaborate filters to find the desired book; be able to show interactive stories of each book, to give a more faithful idea of what it is about, offer digital experiences on the same website both to facilitate the purchase, and so that those who made it can see and interact with the story digitally while They wait for the physical product.

5. Wireframes & User Flow

Focused on the Store-within-a-Story concept—ensuring the “Buy Book” call-to-action felt like a natural climax to the digital reading experience rather than an intrusive ad.

Flowchart done with wireframes for Realismagico web app

6. High-Fidelity Design & Prototyping

Created a responsive web app in Figma that simulated the “Scrape to Reveal” and “Drag-and-Drop” story mechanics, ensuring the mobile experience felt like a game, not just an e-reader.

Realismagico book marketplace UI design | Post for iPad

Execution: From Barranquilla to the World

As Product Designer, I acted as the bridge between vision and functionality:

  • Platform Build: Developed the responsive marketplace using WordPress, Elementor, and WooCommerce.
  • Social Integration: Built custom public profiles where “Algorithm Badges” suggest stories based on user “path” history.
  • Regional Launch: Focused on Barranquilla as the epicenter, leveraging its status as a cultural “Main Stage” to attract the first wave of award-winning authors.
Realismo Mágico UI Design for Mobile Phone

Results: Scaling the Narrative (Goals)

The launch of the MVP replaced a fragmented, manual process with a streamlined digital environment, delivering significant efficiency gains.

User Acquisition
15% MoM increase
in new user registrations

Sales Impact
10% MoM growth
in book sales, validating the “play-to-buy” model

Author Empowerment
3 interactive posts
per writer, driving lead generation for physical book sales

SEO Dominance
3/10 Page Rank
outperforming local indie bookstore websites

Community Trust
95% NPS
with high praise for the “path-sharing” social feature

Interactive Prototype (Web App)

Learnings & Insights

The biggest takeaway was the “Gamification Paradox”: Users don’t just want to read; they want to influence. By giving readers agency over the story, we increased the perceived value of the physical book. Furthermore, we validated that Barranquilla is the perfect “Sandbox” for cultural startups—offering a unique blend of high-level creative talent and lower operational costs, positioning Realismo Mágico to become the next Colombian “Unicorn.”

Join our newsletter

Design smarter, not harder. Get the updates.

We prioritize your data's security in our terms

Share this post