“Weebly” UX Design Structure

— Encapsulation and Modularity Strategy of Weebly —

A design critique of information design on “Computational Strategies” — concepts based “Inventing The Medium- Principle of Interaction Design as a Cultural Practice” by Dr. Janet H. Murray

Weebly is a web-hosting platform with a drag-and-drop feature for inteactors to easily build websites. The building procedure of Weebly completely integrates programming concepts, including Instantiation, Encapsulation and Modularity, which allows interactors to focus on the layout design and easily drag different components into the interface.

At the landing page, Weebly provides three top classes describing site’s main function, i.e. Site, Blog and Store (Fig 1a). Interactors selecting a class will then be offered several subclasses of designing templates. A website is created based on interactor’s choice, which inherits all the predefined functions and variables of its parent class, e.g. predesigned page layout, web structure and items in the pages. This procedure fully implements the Object-Oriented Programming concept and thus simplifies the building steps for interactors.

On the other hand, another competitive web-hosting platform “Wix” provides templates by different categories (Fig 1b), which doesn’t implement a subclass concept. Instead, interactors have to add shopping cart page if they want to build a store site, for example, after they start editing, which makes the instantiating procedure not as intuitive as Weebly.

After instantiating a website object, interactors can customize the page by dragging encapsulated element-icons and editing their contents. This procedure of first creating an object and then assigning its variables is transparent for the interactors (Fig 2a). As for its competitor Wix, it doesn’t have a dragging function, and the procedure is reversely designed, which disables interactors to allocate layout completely before deciding contents (Fig 2b).

Overall, as a web-hosting platform providing similar functions as other competitors, Weebly has a more structured and modular procedure for interactors to separate the layout design (create instantiation) and contents creation (assign variable).