Telerik REPL for Blazor - Case Study of Initial Design
Overview
Project Type
Web
Company
Role
Senior UX Designer 2021-2022
The Opportunity
Telerik REPL for Blazor was envisioned as a developer playground, an in-browser environment to write, test, and share Blazor and .NET code with zero setup. But launching a new product under tight deadlines takes more than just clean UI. It takes strategy, empathy, and design leadership.
I joined the mission to design Telerik REPL from scratch: crafting its identity, shaping the first release, and building something the developer community would actually want to use.
The Challenge
This wasn’t just about spinning up a code editor.
We needed to:
Define a brand identity for a new product in the Telerik family.
Drive awareness and lead generation by launching during a major Microsoft developer event.
Build trust and usability fast so developers would adopt it and keep coming back.
Oh, and all of this? On a compressed timeline.
Research & Personas
Before sketching a single wireframe, I needed to understand:
Who are we designing this for? Why would they care?
Through competitor analysis and user research, I defined four key personas:
Experienced Devs – want to try ideas fast, no setup.
Newbie Devs – need a friendly learning environment.
Community Influencers – looking to demo and share examples easily.
Students – low budget, high curiosity, and just getting started.
Each persona had different needs, but they shared one goal: to get ideas running in the browser with ease and flexibility. This insight drove every design decision from first draft to launch.
The Design Process
1. Start with flow, not UI.
I mapped the entire user journey in a flowchart, identifying key moments: writing code, running it, visualizing output, and sharing snippets. From this, I created low-fi wireframes to test basic layout and user stories.
2. Feedback early, feedback often.
Initial usability testing flagged a big UX flaw: users were confused by how Telerik UI components were added—resources were split between two sides of the interface with no clear logic.
💡 I redesigned the experience by contextually grouping all external resources into the left-side drawer, creating a consistent, intuitive mental model. Follow-up tests confirmed this change made the experience far more cohesive.
3. Hi-fi prototyping with dev-ready precision.
Using UXPin and Figma, I designed hi-fi prototypes that reflected both user needs and brand identity. I worked closely with engineers and product managers, ensuring that the development phase was tightly aligned with our original intent.
New features like package management, embedding, sharing, and downloadable snippets were added iteratively. I actively participated in daily standups, gave feedback on implementation, and adapted designs based on feasibility without compromising usability.
Results That Speak
In the first 3 months post-launch:
11,906 standalone sessions from 10,117 unique users
15,601 in-documentation edits
25,045 previews triggered
Devs across levels adopted REPL as their go-to playground
Beyond metrics, the REPL became an essential part of the Telerik ecosystem—streamlining support, enhancing documentation, and enabling interactive demos that replaced static screenshots.
Lessons Learned
Cognitive clarity wins. Grouping functions by mental model improves usability, especially for dev tools.
Get the flow right first. UI polish means nothing if the journey doesn’t make sense.
Context is queen. Tools need to feel natural in their environment. Design for the why, not just the what.
What’s Next
Optimizing performance and loading speeds
Using REPL as a traction channel within the dev community
Exploring educational use for new developers and students
