Visual Query Builder for Business Insights
Enabling Self-Service Querying with Intuitive UX and Rapid Prototyping
![[Page 3] Credit Suisse | Intro | UI/UX Design | Frontend Development](http://images.ctfassets.net/xooissnm36jt/LoWhgQrXDL1yERqvO3wUu/892440393973175803837f2a13c596ee/Frame_2611231__1_.svg)
![[CS] Image for Header](http://images.ctfassets.net/xooissnm36jt/7kngRigZdleGCELrlZWymx/84a60cf0a91c3163db58c4482009afc8/Banner__30_.svg)
![[CS] Image for Header](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)
Visual Query Builder for Business Insights
Enabling Self-Service Querying with Intuitive UX and Rapid Prototyping
![[CS] Image for the challenge](http://images.ctfassets.net/xooissnm36jt/4QRUl7YmeAZrC8o1qPK5cS/2b375a3ea54daee99be14069fe1c83d7/Group_54__29_.svg)
The Challenge
A global financial institution needed a user-friendly interface to help internal users query a complex metadata database without relying on IT support or writing SQL manually. The database contained XML-based scripts associated with various reports, parameters, and calculations. With multiple departments using nine predefined query types to identify data dependencies—such as how a change in risk type might impact existing reports—ease of use and flexibility were key.
The goal was to design and implement an application that could simplify the process of building, saving, and managing queries while accommodating sophisticated business logic and search hierarchies. This included creating dashboards for different query types, visualizing results, managing templates and saved lists, and supporting error handling.
The Solution
Topcoder launched a series of challenges to bring the Merlin Query Builder to life. First, designers tackled UX/UI challenges to simplify complex query logic into an intuitive form-based experience. User flows were optimized for clarity, with special attention to dashboard layout, guide tours, and multi-level hierarchical input options.
Next, a clickable prototype was developed to demonstrate functionality. This was followed by multiple UI development challenges using Angular 6 and Bootstrap to build a working frontend. Developers implemented dynamic business logic to control which fields appear and how values are selected—from lists, tree structures, or manual input.
The project also included a mock XML-based API contest to simulate backend behavior and validate frontend integration. A second prototype challenge refined remaining screens and incorporated template and list management features. Each phase was delivered on time using Topcoder’s agile crowdsourcing approach.
Challenges we ran:
• Merlin Query Builder Design Challenge
• Merlin Query Builder - Dashboard Page
4
Challenges
200
Participants
22
Submissions
The Impact
The client received a scalable internal tool that empowers risk analysts and business users to build complex queries independently—no SQL knowledge required.
The Merlin Query Builder delivered measurable improvements in efficiency by reducing IT dependency, improving query visibility, and enabling users to track their query history and results with ease. The intuitive interface and guided onboarding lowered the learning curve, while flexible input methods and template features ensured future usability and extensibility.
Achieve high-quality outcomes with
Topcoder.
Achieve high-quality outcomes with Topcoder.