Transforming Styling in Appspotr’s UI Builder



🔴 PLEASE NOTE THAT THIS CASE STUDY IS A WORK IN PROGRESS 🔴



Appsportr's No-Code Innovation

Appsportr, a prominent no-code mobile app development platform, empowers users to effortlessly create and customize iOS and Android apps. Tailored for individuals and businesses lacking extensive coding knowledge, the platform provides pre-designed templates and easy customization options, enabling users to design and build mobile applications without traditional programming skills.

Challenges in Styling UIs

While Appspotr's drag-and-drop UI builder facilitated easy app UI creation, the styling experience proved less than ideal. Users had extensive flexibility with styling but had to navigate plain input fields, causing a roadblock for many. To align with Appspotr's goal of providing an intuitive, user-friendly platform, the project aimed to enhance the styling experience for app UIs.

Diverse Audiences

Appspotr served two primary audiences for this project:

• Commercial Users: Individuals and businesses with low technical knowledge, relatively new to no-code app development.
• Appspotr’s In-House App Studio Users: Professionals with higher technical knowledge, experienced in no-code app building.



Collaborative Leadership

Leading the project alongside another designer, I collaborated with the management and product teams to align efforts with business goals. Additionally, close collaboration with the development and QA teams ensured a cohesive and successful implementation.



Navigating Technical Constraints

The project faced initial constraints, limiting changes to the UI due to technical considerations. While stakeholders acknowledged the need for broader changes, the team had to work within these constraints temporarily.



Process & What We Did

Complete UI Audit

Conducted a comprehensive audit of the existing UI, delving into both its appearance and underlying functionality. This step was crucial in understanding technical constraints and opportunities for improvement.

Research in the No-Code Space

Explored existing products in the no-code, low-code space to gather insights into industry best practices and innovative solutions. This research informed the design process and contributed to a well-rounded concept.

Wireframing and Concept Design

Created wireframes and conceptual designs to present a tangible vision for the project. This step involved seeking buy-in from stakeholders, ensuring alignment with both business goals and user expectations.

Design and Validation

Executed the design phase and collaborated closely with internal users for validation. User feedback played a crucial role in refining the designs, ensuring they met user expectations and needs.

Finalization Based on Feedback

Incorporated feedback from internal users, leading to the finalization of the design. The iterative process ensured that the end result addressed user concerns and significantly improved the styling experience in Appspotr's UI builder.



This case study highlights not only the challenges faced but also the collaborative and strategic approach taken to revolutionize the styling experience within Appspotr's UI builder. The transformation aimed to make styling as seamless and intuitive as the platform's broader no-code capabilities.