No-Code Streaming Website Builder with Monetization
User research, Visual design, Interaction design
Q1-Q2 2022
Mocaas is a website builder designed to help digital creators launch their own streaming website and provide payments services.
I worked on end-to-end design of Mocaas, striving to create an intuitive experience while collaborating within a small team.
- Lorem ipsum dolor sit amet consectetur.
- Lorem ipsum dolor sit amet consectetur.
- Lorem ipsum dolor sit amet consectetur.
How can we provide a seamless experience for user to publish videos?
Mocaas was initially developed as an OTT platform engine before transitioning into a SAAS model. However, a design based on assumptions as a solution resulted in an unintuitive interface, causing users to feel overwhelmed and confused when using the product.
We tried to understand the mental model of Indonesian users by exploring similar apps.
Users often compare our product to YouTube or Instagram, but in reality, we differ significantly. While YouTube and Instagram are social media platforms focused on sharing, our product is a website builder that accommodates exclusive websites.
“ What make it different from Youtube? Why should I pay for it? ”
“ Why is so many fields needed when I only want to publish a video? ”
We also gain insights by conducting card sorting and usability testing.
Some insight that we gather including:
As the first streaming web builder in Indonesia, we may face a challenge with user unfamiliarity
Users may have encountered difficulties when faced with numerous fields, leading to confusion and inefficiencies.
– Create a frictionless publish video experiences
– Simplify the CMS for beginner users while maintain the advanced function.
Leverage existing user knowledge by designing it with a familiar layout.
We designed this new CMS with YouTube's video publishing process in mind, as our users already familiar with it. This helps reduce the learning curve and make users feel more comfortable.
We also notice that user rarely hover to Information icon displayed on the right of Field Title even when they are confused. So we move the content forward for it to be more accessible.
Reduce the number of fields by moving low priority fields into a new collapsable section.
Fields that are rarely used are moved to a new section in 'Show More.' This is done to prevent beginner users from feeling overwhelmed by numerous fields, while still providing access for experienced users.
Additionally, we merge similarly functioning fields, such as home thumbnail and player thumbnail.
Image: Video CMS fields - Blue highlighted part is removed or merged to other field
Adjust the CMS behavior to align with user expectations as a form.
We have a single design for both creating and updating the video process. It was designed as a settings page, where users only need to fill necessary fields and save. But users treat it like a form, trying to fill everything and expecting a save button to take them to the next tab.
In response, we made a change to include a 'Next' button and categorized the tabs based on the user journey of publishing a video.
Faster, easier upload flow for users
After the initial design process, we tested it using the previous test as a base. The new layout is more intuitive, because it’s similarity to a form and other established products. We also eliminated a lot of friction from the form, reduce time for user to publish video by 72%. Users can now focus on publishing without worrying about many details.