UI Builder 2.0

Build User Interface without coding
Project Type
Insurance Product, Enterprise Product Website
Project role
User Experience Research, User Interface Design
Project year
2022 - 2023

Introduction

UI Builder is an application or a group of packages that allows users to build a User Interface without coding by using an Editor, it produces UI configuration that is embedded into the app. The UI Builder has the ability to use UI first approach, Create - Edit - Delete UI page templates and for versioning of UI page templates. UI Builder is also capable of orchestrating and creating applications navigation workflows for UI applications.

Design Guidelines

A simple, consistent, and easy-to-use user experience is key to creating the most incrementally innovative and disruptive insurance experience. The singular interaction paradigm of focused steps and minimal elements was crafted with elegance and effortlessness in mind. The culmination of the work delivers the best possible experience for a majority of users and supports smaller use cases with subtle affordances that don’t get in the way. The system ensures best-in-class user experience capable of competing for mass adoption in the Insur-tech space.

Background Research

Most of the leading insurance companies around the globe use the company's Enterprise applications. In addition to the enterprise application, stakeholders suggested providing a tool for customising the interface. Since there was no user experience research conducted before the development of UI Builder, this has resulted in an application that can only be used by developers. Consequently, it needed to be reconfigured and developed from scratch with a more user-centric approach.

• Capability for using User Interface first approaches.

• Ability to align states, lifecycles, versioning approaches on UI with backend approaches.

• An intuitive user flow and the ability to create, edit, and delete UI page templates are crucial.

• Ability to have versioning of User Interface page templates.

• Organise pages and page templates into a navigation workflow for an application.

• Ability to orchestrate and create applications navigation workflows for UI applications.

User Research - Persona

Initially, the tool was only designed for developers, so understanding the actual end user was a challenge. This tool was intended for users with minimal programming knowledge; it would allow them to convert business logic into a user interface. A number of users and stakeholders were interviewed to analyze the actual end users of the application, and the personas were carefully crafted.

Competitor Analysis

Identifying competitive offerings and understanding the current market trends were the goals of competitor analysis. Every business possesses a different set of skills, capabilities and core competencies. Even companies in the same niche start with a different mix of resources. I brought in more features and designed an intuitive user friendly interface based on these analyses and discussions with the Architects and stakeholders. The best way to stay on top of your competitors is to analyse their marketing tactics to make sure you are keeping up and matching their efforts.

Customer Journey Mapping

Designing a customer journey map for the UI Builder allowed us to identify the micro-moments that make up the full experience of the end-user. Implemented a personalized experience at every level by understanding and improving the customer experience.

Prototyping and Wireframing

Creating a prototype makes it possible to concretise an idea and assess which features pose difficulty in implementation. For the design of the UI Builder, prototypes of varying fidelity levels were created. By exposing the prototype to the internal stakeholders, we were able to get focused customer feedback on the desirable qualities of the product. To gain a clear understanding of what the product is headed for, it is critical to obtain feedback from users and understand their needs and expectations. It is especially important when designing a different version of the in-house product.

Responsibilities

• Conduct User Interface Design review every sprint to make sure that the product is aligned with the Design and Research.

• Designed experience using persona-driven journey maps and prototypes, for testing and development.

• Leveraging user research results and usability testing by recruiting real users and stakeholders.

• Collaborate with the design team, development team and business analysts on EIS Core Design System.

• Run usability testing and conduct an end-to-end design review at the end of every sprint.

• Worked with cross-functional teams to balance user needs with business needs and technical constraints.

• Ideating and brainstorming product discovery solutions in a workshop setting to identify problems and user goals, while using design thinking methodology (competitive research, affinity mapping, design reviews).

Conclusion

While the UI Builder is still under development, we were able to achieve a great design for starting the development considering the user-centered design approach for the entire product through the rigorous research and continuous prototyping and wireframing. By conducting a User Interface Design review every sprint to make sure that the product aligns with the design and requirement, the product is always monitored at different stages of development to keep track and ensure that the product aligns with the requirement and finalised design.