Process

I created the designs for the version 1.0 MVP site.
My process for this content management system project includes the following:

RESEARCH
Study Similar Use Cases
User Interviews
IDEATION
Feature Ideation + Roll-out Schedule
Information Architecture
Coordinate with content + tech teams
DESIGN
Wireframes
User Interaction Flowchart
High-Fidelity Prototype
CONCLUSION
Assess Live Site
Reflections

Research

When it comes to content management systems, there are two names that stand out: Wordpress and Drupal. These sites are known for their feature that enables users to make content without needing to write code. Wordpress is easier to use and more popular. Drupal has a smaller community and a steeper learning curve. This raised questions of what Woobo Wiki's user base is—basic, power, administrative, or a combination? Interfaces like Wordpress made the process of adding media very easy—all the tools needed are conveniently placed. Wordpress also has different user roles—and different UI for each user. Drupal, though similar to Wordpress, is for more advanced creators. There are plenty of shortcuts for adding content and widgets. Drupal is also backed by extensions and modules that can extend its functionality.

MediaWiki has a number of tools to make team processes quite easy and self-regulatory, including tools to track changes for each user. There is good error mitigation — if something goes wrong, mistakes can be easily fixed by an administrator. Additionally, there are numerous ways to search for information in a Wiki and it is possible to organize information in categories.

Alexa, Amazon’s cloud-based voice service, provides capabilities, or “skills”, that enable customers to interact with devices in a more intuitive way using voice. Alexa Skill Kit is a public service that users use to add skills to Alexa. The key takeaway from them is the way they tree-diagram the sequence of content. Similarly, Blender3D uses modules and nodes to connect information. In terms of visual interface and information architecture, I looked at Google Drive, the Adobe Suite, and Blender3D for inspiration.

Ideation

old woobo wiki critique

First of all, the MediaWiki home page was extremely lackluster — all text, no images, unnecessary links everywhere. Though was clean and organized, this page lacked the visual cues that could make the navigational experience more intuitive or memorable.

In addition, users rarely clicked the links under the Header "Main Page." 99% of times, users went directly to the search page to locate content that they had previous been working on.

Next, we'll examine contents and states. If a piece of content was a video, the "states" can be thought of as the individual frames.

One of the largest issues with the old Wiki is the inefficiency of content creation due to the sheer number of states that must be created and linked to each other in order to create a sequence.

Ideally, we'll create a way to visually depict how states link to one another to create an experience.

Next, we'll look at properties. Properties outline the characteristics of each state.

The problem with properties is that it uses programming lingo instead of the vernacular. It requires users to already be familiar with these custom-created terms. Because the new site caters to basic users, this needs to change.

Lastly, we'll look at individual states. Each state has their own page.

Each statement is organized and easy to understand. We will likely keep this arrangement. However, as I mentioned earlier, we'll add a visual depiction of all the states (i.e. a tree-diagram).

Design

This new content management system will allow for both the creation of content and management with user roles. The site will have different accounts for each type of user, content creator or administrator.

The following are flowcharts and select screens.

Administrator/Manager FlowchartAdministrator/Manager Flowchart

2C. Home » Library » File View

This is the content library tab after the user clicks into a folder. Read and write permissions for only the admin.

2C. Home » Library » File View

    2G. Manage » Creators

    Everything in this tab is viewed and accessible by the administrator only. This tab contains a list of all the creators (also known as “reviewers”) that the administrator has added. Here, administrators have the option to add and/or modify the account information of creators. Admins may also visit the Folders of each creator to access their in-progress projects from here.

    2G. Manage » Creators

    3A. New Project modal » Details (Page 1 of 3)

    This modal is used by all accounts to create a new project. Here users must submit the Project Title, Activity Category, Description, Tags, and Activity Icon. After this, they are led to the Visual Diagram (4B).

    3A. New Project modal » Details

    3B. New Project modal » Tags (Page 2 of 3)

    3B. New Project modal » Tags

    3C. New Project modal » Icon (Page 3 of 3)

    3C. New Project modal » Icon

    4D. Visual Diagram (Populated)

    4D. Visual Diagram » All States

    5B. Project » State View (Populated)

    To add visual and audio media, users should click Add Media, which opens a modal of media choices, including Image, Video, Facial Expressions, Audio, Speech, Text, and the Ear Light (See 6A). They can then  upload appropriate assets and further define characteristics and parameters. Media, such as facial expression and speech, may be paired with each so they site side by side. To add new media to play after another, the user should add a new row.

    5B. Project » Populated Project

    6A. Add Media » Media Gallery

    6A. Add Media » Media Gallery

    6B–6H. Add Media » Image, Video, Face, Audio, Speech, Text, Ear Light

    Related Work

    During my time at Woobo, I also worked with on the product's user interface, game graphics, branding, and participated in user interviews.

    USER PERSONAS

    Here is our user persona for Woobo — the Dalton family, based on user research and incorporates the needs, goals, and observed behavior patterns of your target audience. This user persona is not to be confused with the user persona for the content management system; that target audience is different. The Dalton family represents the target audience for the toy product.

    4C. Visual Diagram » Notes
    4C. Visual Diagram » Notes
    4C. Visual Diagram » Notes
    4C. Visual Diagram » Notes

    brand guidelines

    Coordinating with the head of design, I created Woobo's visual style guide containing the rules for the composition, design, and general thematic look-and-feel of the product—specifically, by designing a catalogue of the colors, type, logos, imagery, patterns, and tag-lines to be used for our brand collateral.

    TOY USER INTERFACE

    I designed Woobo’s on boarding UI for users during their first-time setup of the toy, which includes processes such as Wi-Fi setup, the Terms and Condition agreement, date and time setup, and more.

    First-Time Setup Screens (below):
    I designed Woobo’s on boarding UI for users during their first-time setup of the toy, which includes processes such as Wi-Fi setup, the Terms and Condition agreement, date and time setup, and more.

    See full setup flowchart here.

    Start up animation

    Charge Woobo prompt

    Setup Wi-Fi

    Accept terms and conditions

    Set date and time

    Download Google and system updates

    Install updates

    Installing update animation

    Pairing toy and mobile app (for voice messages)

    Menu, Voice Messages, and Settings Screens (below):
    Below are the screens for Woobo's home menu, voice messaging system, and other settings/navigational screens.

    See settings flowchart here.

    See voicemail flowchart here.

    Settings screens

    Home menu + voicemail screen

    Sending a message

    Messages

    New update available

    Down for maintenance

    Low battery warning

    Disconnected server warning

    Fully charged notification

    Content & Routines Screens (below):
    I designed Woobo’s on boarding UI for users during their first-time setup of the toy, which includes processes such as Wi-Fi setup, the Terms and Condition agreement, date and time setup, and more. See full flowchart here.

    See routines flowchart here.

    Imagination activities

    Song activities

    Game activities

    Example content

    Game confirmation modal

    Example content

    Morning routines

    Morning alarm

    Evening routines

    Version 2.0 Pop-Up Modals (below):
    Inspired by the aesthetic of billboards and highway road signs, I created a set of visual templates for Woobo's pop-up modals for fun, subtle, mini stories to be told alongside a primary message. Below are a select few examples.

    Story proposal message

    Disconnected server message

    Fully charged notification

    Wi-fi error warning

    Winter frame template

    Fully charged notification

    Summer frame template

    Autumn frame template

    NAVIGATIONAL & CONTENT ICONS

    Conclusion

    Woobo was everything I hoped for in a startup experience and then some. Every day at the office was an intimate collaboration between world class engineers, designers, educators, and marketers from MIT, CMU, Harvard, Tufts, and RISD. Suffice it to say, I was working with a group of very talented people from many different backgrounds. Though we were a very small, early-stage start-up, our group of 14 managed to bring a dream to life through two years of hard work (and occasional play, of course!) and one massive seed-round fundraiser.

    4C. Visual Diagram » Notes

    The product design team made over 100 prototypes (with hundreds of user testings) in the past two years before arriving at Woobo's current design.

    Among our work culture values were creative problem solving, open communication and a flat hierarchy. Most importantly, though, was the flat hierarchy. Everyone’s input—interns included—was greatly encouraged. As an intern, I was even asked to lead a couple meetings. I sat beside and worked directly with developers, content managers, and other designers. The office space was imbued with an air of great enthusiasm — you could feel the brains churning here!

    4C. Visual Diagram » Notes

    The design and animation team made over 30 facial prototypes in the past two years before arriving at Woobo's current face design.

    4C. Visual Diagram » Notes

    The workspace of our incredible hardware engineers who were installing the touchscreens into several toy prototypes. (Stole a shot of this during their lunch break)

    Every other Friday, the entire team went out for lunch and had a good time bonding all around Boston.  🍖🍲
    Or we'd have an intense match of darts.

    Many thanks to Shen Guo for being a wonderful product design manager, for giving me such cool projects to work on this summer, and to Woobo for being an absolutely incredible first internship experience (and contract offer afterward for the content management site)!

    4C. Visual Diagram » Notes

    Here's all of us — engineers, designers, content creators, marketing, and interns!
    (That's me on the left, closest to the camera!)