April 2019 - June 2019

My Role: UI/UX Design | Visual Design | Illustration |                  Book Design | Typesetting

Orimagi is a customer electronic company. The main product of Origami is Art-focused robotic kits that foster creative expression to deliver educational value beyond tech toy. It combines the aesthetic and engineering value of origami with robotics, providing a new way of bridging the disconnect STEM subject together and leveraging on the principles of eastern arts to maximize the output from STEM.

In this project, my term is to design an app for children to guide them through the process of making their own robot, and with the same purpose, to produce a booklet for those who prefer paper-version guidance. 

Client: Origami

Overview

Task Flow

Since there already have a booklet within the robotic kit as an instruction, and some of the little users might follow the book to make their robot. I imagine there could be two types of users in this case - those who already learned how to make a robot, and those who are a beginner without any experience with Origami.  

I designed two entrance for users. They can make a selection between the Making Center and the Control Center according to their need. If they already learned how to fold animals by following the book, then they are ready to go to the Control Cente. By interacting with different functions (use the slider to control the robot bending angle, or use their voice to activate the robot) in the Control Center, children can discover new ways to interact with their creations. If they are freshmen in the Orimagi Jungle, they can go to the Making Center to learn how to fold their first animal and explore how robots are transformed by paper.

 

Users can view projects based on the types - Entry Level BootCamp, Build Robert, Play Games, and Discover Other Origamis;

Users can see what projects are available and quickly understand what they are about, then make a selection;

   

Users can follow the video instructions, and the video must be a patient, step-by-step tutorial that can be paused at any time;

While watching the video, users can go back and forth to the desired steps if they are not sure they did the previous step correctly;

While watching the video, users can read text coordinate to the video content;

Users can instantly start playing with the robot once they finish assembling the robot;

Users can exit the video at any time;

   

Users should get in control of the robot with minimum steps;

Users can easily tell whether the motors are connected to the app;

Users can disconnect the motor or connect two motors at one time;

Users can easily tell the battery and get notified when the battery is low;

  

Users can select different controlling mode to experience with various ways to play;

Users can control two motors at one time to play with their friends;

Users can get notified when the motors are not working, Bluetooth off, or app permission denied;

Wireframe

There are a couple of reasons for me to make a decision on the horizontal layout. First, it provides more interactive space for users to experience with different control mode while they are on the motor control page (especially for the "Both" mode for two players); Second, users don't need to turn their phone around while start watching the video tutorial; Next, I want to map the experience of reading a book into this app by designing the content horizontally, so that children will have a sense of turning the page while selecting from different interactive projects.

High Fidelity Prototype

Demo

General Demo

Demo for motor control