Revamp the editor for a biolink page generator
Overview
Desty Page, a biolink page generator tool that targets online sellers in Indonesia, has the main function of creating biolink pages that consist of multiple widgets, such as text, link buttons, images, and so on. This was the first project after I joined the team and took over the product design. The project lasted about 3 months with a team that consisted of myself, one product owner, and three engineers.
Role
Product designer
Skills
User study, Information architecture, Interaction, Prototyping, Visual design, Team work
It didn't cause any overt issues at that moment, yet I could tell the potential problem if data migration was needed or new widgets were added.
Therefore, I suggested a revamp of the page template system along with the editor feature.
When I took over the product, there was version 1.0. I first conducted a full analysis of the product from the perspective of a freshman. The biggest problem I found was that the page template system was flawed, covering some of the widgets but not others. For instance, the Text widget was using a rich text editor that only served itself.
Confusing template/styling system and inconsistent interaction
Problem identified
According to common design principles and the specific situation of the product, four colors and two fonts in one template as universal properties would be enough to fulfill the design need while maintaining visual consistency on the page with different styles of widgets.
🖼 Template
To address the template issue, we had to define what a template was and what types of options we should provide. A template is essentially a combination of widget styling properties on a page. By listing the properties of every widget, we found that colors and fonts were applied to them all, while the style properties of containers were applied to some of them.
🎨 Level of editorial freedom
A high level of freedom in the page editor would increase the operation complexity, while too much editorial restriction led to a low level of creativity in page design. It is crucial to find the balance, yet it's hard to get the answer directly from the users. In the MVP stage, we decided to provide limited options rather than freely customizable features to users as a boundary that was easy to adjust according to the users' feedback.
🤳 Who is the user?
Desty Page serves merchants in Indonesia. As a developing country, users there do not possess as much knowledge and experience in e-commerce as users in developed countries. Mobile devices are much more common there than personal computers, so users are more familiar with using phones than computers.
Initial exploration
In version 1.0, the template style code was hard-coded on the front end, which meant much time and work consuming when modifications were needed. Therefore, we decided to develop an independent template back-end system to store the templates and assets, such as fonts, icons, and shapes, for its necessity in future iterations.
Back-end system
With the clearly defined template concept, it was simple to revamp the editor and unify the interaction.
-
Provide users with options at the first level
-
Maintain the customized option as the second level
-
Polish unified interactions for the same type of features
Product design
We achieved all three main objectives for this project:
-
Build extensible infrastructure for the product;
-
Increase the user-friendliness;
-
Encourage users' creativity.
The data metric we use to track user behaviour is the average length of time a user stays in the editor. It went up to 8 minutes from 3 minutes before the revamp was released.
Check pages generated by our users
Release and iteration
The core function of Desty Page is to provide users with the widgets they need to create biolin pages. With such an infrastructure, it becomes very easy and organized to manage the development of widgets, including adding, modifying, and deleting.
Contact me
(1) 506 566 3218
