Copy of Woobo APK | xuejiao-portfolio

Woobo Content APK

A content management system for the user

to create and manage contents easier.

My Role: UX/UI Designer

Prior to the new content management system, the content team relied on MediaWiki, which is a free online system storing contents into a database. It had a clunky interface not optimized for usage. So we want to make a new efficient content management system that includes not only the main feature from MediaWiki but also new features based on user's needs.

OVERVIEW

What is Woobo?

Woobo is a smart educational robot with an interactive touchscreen. It has access to a rich content library that is always expanding as our content team keeps creating.

What is the problem?

Currently, the content team uses a free platform called MediaWiki to create and manage content. The platform has a clunky interface and its not user-friendly. According to the feedback from the users, they spend at least3 hours to create and upload content to MediaWiki.

What is the goal?

This goal is to design a new web-based content management system for our content team to create and manage contents easier and faster. The new system will include not only the main features from MediaWiki but also new features based on user's needs.

What did I do?

This is my first project at Woobo.

Based on the research, I was able to identify the problems of the existing system, generate ideas after competitive analysis, redesign the wireframe, perform user testing, and also work with developers to launch this product.

How does a content creator create and upload content?

CURRENT PROCESS

To better understand how the content creators create and upload content, and what user paints they have, I started learning to use MediaWiki. The whole learning process is boring and not user-friendly, and it's very difficult for a new user to start. Below is the workflow of creating new content on MediaWiki.

IDENTIFY PROBLEMS

I started by overhauling the existing system page by page and extracted reasons why it's not good user experience.

01. Main Page

The main page is extremely boring - all texts and unnecessary information anywhere. This page lacked the visual cues which make it difficult to quickly digest information at first glance. In addition, all the users share one account, which makes it not secure and difficult to track the editing history.

02. Content and State

In Woobo Wiki, content is constituted by states. One of the biggest user pain points is the inefficiency of content creation. Each state has its own page, and it must be created and linked to other states in order to create a sequence. It's time-consuming, and it also increases the chance of error.

03. Individual State Page

Each state is constituted by different kinds of properties. Although each state is organized, it's still hard to refer without visual cues. For example, you don't know what the video looks like by just reading the link.

04. Duplication

MediaWiki has no copy or duplicate functions. The user has to either use coding editor to clone a state or create a new state in MediaWiki, which is time-consuming.

RESEARCH & IDEATION

Since the team has done lots of primary research such as interview and observations before I took over this project, what I did for research focused on studying similar use cases.

Feature Prioritization

Organize the information

in categories

There will be a sidebar on every page to better navigate user

Visual Diagram Overview

Create a tree diagram to help users visualize the sequence for a piece of content and state.

Create Templates or Duplication

Admin/PM may now create templates or duplicate existing contents

Security/Authorization

(New Feature)

Implementing and managing multiple user accounts (Admin, PM, Creator) with various permissions settings.

Validation

(New Feature)

Creators can submit their drafted contents to PM for review.

DESIGN

This new content management system allows for both the creation of content and management with different user roles. Below is the Information Architecture for different user accounts.

Information Architecture

Final Design

002.1. Visual Diagram (Creator)

This is the page for making content. All types of users share the same page. The user can now create a whole content by adding states within one page.

2A. Homepage (Admin)

This is the first page after Admin logs in. There is a sidebar always on the left to navigate users to explore different categories. PM and creator also have a sidebar on their homepage but with fewer categories.

002.1B. Visualized Statement (Creator)

This is the page for editing states and properties. Instead of all texts in MediaWiki, the new system allows the user to quickly understand the properties by adding media. All types of users share the same page.

6. Member Management (Admin)

This is the page for managing members. For the sake of security, only Admin has the right to create accounts, assign projects, and manage roles of PM or Creator.

02B. Project (PM）& 002. Draft (Creator)

In order to reduce errors and track record, we came up with a validation feature. Creators can submit their drafted content to PM for review, and PM can either approve or reject creator's submitted content.

OVERVIEW

What is Woobo?

Woobo is a smart educational robot with an interactive touchscreen. It has access to a rich content library that is always expanding as our content team keeps creating.

​

What is the problem?

Currently, the content team uses a free platform called MediaWiki to create and manage content. The platform has a clunky interface and its not user-friendly. According to the feedback from the users, they spend at least3 hours to create and upload content to MediaWiki.

​

What is the goal?

This goal is to design a new web-based content management system for our content team to create and manage contents easier and faster. The new system will include not only the main features from MediaWiki but also new features based on user's needs.

​

What did I do?

This is my first project at Woobo.

Based on the research, I was able to identify the problems of the existing system, generate ideas after competitive analysis, redesign the wireframe, perform user testing, and also work with developers to launch this product.

How does a content creator create and upload content?

CURRENT PROCESS

IDENTIFY PROBLEMS

I started by overhauling the existing system page by page and extracted reasons why it's not good user experience.

01. Main Page

02. Content and State

In Woobo Wiki, content is constituted by states. One of the biggest user pain points is the inefficiency of content creation. Each state has its own page, and it must be created and linked to other states in order to create a sequence. It's time-consuming, and it also increases the chance of error.

03. Individual State Page

Each state is constituted by different kinds of properties. Although each state is organized, it's still hard to refer without visual cues. For example, you don't know what the video looks like by just reading the link.

04. Duplication

MediaWiki has no copy or duplicate functions. The user has to either use coding editor to clone a state or create a new state in MediaWiki, which is time-consuming.

RESEARCH & IDEATION

Since the team has done lots of primary research such as interview and observations before I took over this project, what I did for research focused on studying similar use cases.

Feature Prioritization

​

Organize the information

in categories

There will be a sidebar on every page to better navigate user

Visual Diagram Overview

Create a tree diagram to help users visualize the sequence for a piece of content and state.

Create Templates or Duplication

Admin/PM may now create templates or duplicate existing contents

Security/Authorization

(New Feature)

Implementing and managing multiple user accounts (Admin, PM, Creator) with various permissions settings.

Validation

(New Feature)

Creators can submit their drafted contents to PM for review.

DESIGN

This new content management system allows for both the creation of content and management with different user roles. Below is the Information Architecture for different user accounts.

Information Architecture

​

Final Design

002.1. Visual Diagram (Creator)

This is the page for making content. All types of users share the same page. The user can now create a whole content by adding states within one page.

2A. Homepage (Admin)

This is the first page after Admin logs in. There is a sidebar always on the left to navigate users to explore different categories. PM and creator also have a sidebar on their homepage but with fewer categories.

002.1B. Visualized Statement (Creator)

This is the page for editing states and properties. Instead of all texts in MediaWiki, the new system allows the user to quickly understand the properties by adding media. All types of users share the same page.

6. Member Management (Admin)

This is the page for managing members. For the sake of security, only Admin has the right to create accounts, assign projects, and manage roles of PM or Creator.

02B. Project (PM）& 002. Draft (Creator)

In order to reduce errors and track record, we came up with a validation feature. Creators can submit their drafted content to PM for review, and PM can either approve or reject creator's submitted content.