Obelisk
SUMMARY
Obelisk is an Inner Sourced IDE designed to bridge the gap between an established Visual Design Language requirements and development efforts. With the push to better integrate UX/UI design into product development, there has been a noticeable lack of UI Development talent to effectively bring the vision of design to life. The burden falls to the backend developers who are often unable to understand things like on-screen pixel representation, color treatments and font usage. A previous first generation IDE was developed to assist backend developers with creating page layouts that essentially used drag and drop functionality of VDL components onto pages. This allowed developers to, in theory, easily create pages on the fly while adhering to the UX designs. There, however, was an unrealistic learning curve that required developers to work in a dev environment that was not intuitive and easy to use. It also took longer to create reuasable components which caused the product to fall behind as the VDL continued to add new patterns to the design library.
And so Obelisk was born – a combined design and code based environment that would not only parody the first generation IDE but be an effective and usable tool for individuals spanning across multiple roles and talent backgrounds. The new application improved the drag and drop feature but also added real-time previewing and publishing, code integration (HTML, JSON, REST, CSS), improved components library and more. Furthermore, both backend and frontend developers could work in the environment and create pages visually, as well as, hard code as needed.
We began by creating Information Architecture flows based on specific screens and widgets which served as the basis for our proof of concept. The goal was to show how the IDE could build and deploy a page quicker than the older environment. Various fidelity level wireframes were created while considering the intuitive nature of design applications and the intelligence of development environments and code editors. In upfront research, the team studied design and prototyping applications such as Axure, Adobe Muse and webflow along with code environments such as Atom and sublime. We used the opportunity to examine user interactions, best practices and app usability. Soon, a clean, slick user interface and toolkit evolved, allowing users to build pages with visually rich tools in addition to the familiar code editing environment.