Ive Penkova Designs

Telerik REPL for Blazor - Case Study of Initial Design

Telerik REPL for Blazor - Case Study of Initial Design

 

Overview

Progress Telerik REPL for Blazor is a playground for you to test all your ideas and share cool tricks. Share examples, edit demos on the spot, play around with existing components, show off your work and save time with hassle free coding.

Project Type

Web

Company

Progress, Senior UX Designer 2021-2022

Project Briefing

The Telerik REPL product is a new one for the family of Telerik products. The design work needed was related to its launch in Nov 2021.

Responsibilities

  • Understand product specifications and user psychology

  • Participate in refinement of the requirements.

  • Plan and conduct user research and competitor analysis

  • Define the right interaction model and evaluate its success

  • Create user stories and storyboards

  • Create prototypes and wireframes

  • Create visual and interaction design

  • Conduct usability testing

  • Collaborating with Designers, Developers, Product Managers and other stakeholders to create intuitive, user-friendly software

Tools
Figma, Adobe XD, UXPin

Design challenges

Telerik REPL needed to be done from scratch and in tight deadlines for its first release. The product had to build trust and acquire loyal customers.

1. Shaping an online identity

2. Generating leads

3. Building the product

Shaping an online identity

To achieve brand recognition the Telerik REPL product was based on a Telerik style guide. The design system was extended to match the needs of the product.

Generating leads

Inform potential customers about the benefits of Telerik REPL and to trigger their interest to use, generating as many leads as possible. The launch was also planned at the same time as a Microsoft developer community event.

What we aimed for with the product was:

  • Brand/ Product awareness - the product will be used among large audience of non-customer developers, since it will provide option to write C#/ ASP.NET Core/ Blazor code in browser (KPI: adoption, usage, Google analytics, monthly active users)  

  •  Enhance Telerik UI product with interactive demos - customers can directly apply their specific customization to a component demo and see the result immediately. This leads to short product evaluation/purchase. 

  •  Support Team efficiency & Customer Satisfaction - support team will be able to quickly reproduce and give customers specific examples with a link (instead of creating projects and adding needed dependencies etc. for each case). 

  •  API/Documentation/Knowledge Sharing optimization - reference links from the REPL representing the needed functionality and ‘how to’ examples could be used in the documentation of the Telerik UI product line and thus the static screenshots will be replaced.

  •  Interactive marketing materials – marketing component pages, what's new, landing pages, other campaign pages could use embedded Telerik REPL examples.

  • Telerik REPL can be used as a market/ad/ traction channel among the .NET and Blazor community  

  • Opportunity to grow Telerik REPL as a new differentiating tool/ product - possible options:  

    • Target getting started/hobby developers: Become ASP.NET Core and Blazor code learning platform - again brand awareness and we target large group of starter developers within and outside of our customer base (target kids, students, new to development)  

    • Target professional developers: Complementing the components with additional features such as theming, testing, comparing release version, mocking, populating with data (for example like Storybook); 

Defining personas

Experienced Dev - They aim to achieve progress in no time with no additional setup required using our feature-rich UI components suitable for any scenario.

Newbie Dev - Learning a new framework to work with is never an easy task. With the Telerik REPL they can test out new solutions and adapt existing UI components to see if this is the framework for them

Influencers in the community -They aim to help other developers grow by sharing their work, build examples for their blog posts or presentations, answer questions to help other devs, share code snippets and much more using the Telerik REPL.

Students - Taking their first steps as a developer, little to none budget for professional tools. The Telerik REPL along with our getting started materials will guide them every step of the way. 

Building the product

The design process started with a flow chart sketch to figure out the user stories and a lo-fi wireframe to define the base functionality - write .Net and Blazor code and run it in the browser, visualize the result, share the snippet.

The flow chart and the lo-fi wireframe were discussed with the product managers and the engineering team and we decided to proceed with a hi-fi wireframe to include more details for consideration. I worked on the hi-fi prototype in UXPin.

The wireframe was then tested with developers with different backgrounds and one common issue was present in all interviews - the position of the Telerik UI related pickers. The users were confused as they had the ability to add resources on the left (in the drawer) and then the Telerik UI resources were positioned separately on the right. The users didn’t understand what the pickers did as they were out of context positioned there. Another point made by the users was that not every person using the REPL tool would be a Telerik UI customer. As a result I worked on the flow chart some more and decided to contextually unite the external resources in the drawer.

The updated version was tested again with developers and was received well. After achieving a solution that fulfilled potential user needs, I worked in iterations together with a team of developers and product managers in order to make sure the final implementation reflected what was defined during the concept and initial design phase. Functionalities like package and static assets management, integration of Telerik UI product within, share, embed and download snippets, error management, add and remove files were added one by one.

Success criteria

For the first 3 months since its launch, the Telerik REPL was used on its own 11906 times by 10117 users. In terms of its integration in the documentations of the Telerik UI products, the Telerik REPL was used 15601 times to edit an example and 25045 times to preview an example.

Lessons learnt

  • From cognitive point of view, grouping together functionalities which have common processes is easier understood by the users.

  • Figuring out the flow is really important before moving on to the UI

  • Next steps for the project: performance improvements and using the tool as a traction channel (ads positioning)