Role: UI/UX Designer

Duration: May 1st, 2020 - March 12th, 2021

Team Director: Wesley Hsu

Tools: Sketch, Figma, WordPress, Invision, Adobe Creative Suite, Asana

Robolink was established in 2012 in San Diego, California to encourage students to engage with STEM. They create fun and approachable robotics kits that bring computer science to life and teach real industry competency. They’re also at the cutting edge of technology! They were the first to make a programmable educational drone as well as a self-driving car kit that teaches artificial intelligence.

Background

In 2020, I joined Robolink as a UI/UX Designer right before I graduated from UCSD. I worked closely with the vice president, engineers, and course instructors to revamp the online learning platform and reimagine the users’ journey throughout the main website to improve the remote learning experience and gain more potential customers during the pandemic period. We aim to build a brand-new ecosystem to serve our parents, young children, and instructors with a better guiding, learning, and teaching experience.

Project 1 - Zumi Dashboard Design

Zumi, a self-driving artificial intelligence robot car kit, provides a rich and more tangible learning experience for children and adults of all ages. Zumi has a dashboard platform providing a series of onboarding processes and pre-programmed exploring modes to guide and lead users to get to know her. 

Problem:

  • How to provide a more attractive and easy-to-understand mode to lead further interest in Zumi?

  • How to guide users to get familiar with Zumi’s drive mode without many words of explanation?

User Research:

Our target user group is K-12 students (Ages 5-18). The age range includes students who are relatively young to deal with complex words and who have relatively more experience in dealing with complex concepts in their regular lives. These ages students are curious about their surroundings, sensitive to things that are being color-coded, and frequently use emoji to express how they feel.

During the initial product familiarity phase, the target user group usually has one to two companions to explore Zumi with them. Those companions can be their peers (normally appear in students between 14 -18), young adults, and adults. Those companions play a crucial role in this learning experience by maintaining a hype emotional status and providing support when needed in the target user group.

Therefore, it is important not only to provide proper guidance for the target group to maintain the learning habit and get familiar with the product but also to incorporate the companions in the activity and maintain positive feedback to both.

User Flow:

  1. Receive the Zumi package

  2. Follow the manual to set up Zumi

  3. Follow the interface guidance to explore Zumi’s functionality

  4. Arrive at the driving mode functionality exploration

  5. Be able to control Zumi and drive around in a reasonable range

  6. Grant target users to express their feelings/status through Zumi

  7. Allow companions to be part of the experience and learn Zumi’s capability

Solution:

I took the advantage of the existing hardware and developed a more friendly interactive learning experience under a new mode called Explore Mode. I aimed to help users get interested, learn, and then explore Zumi by maximizing human nature curiosity. Under this model, I took advantage of existing hardware and pre-made function algorithms to allow children to interact with their friends, and family members through Zumi. In this situation, the children will not only be able to play with Zumi as a regular learning toy but also include their parents in the playing and interacting cycle. Therefore, the family members get a chance to interact with their children’s toys and have more potential to learn the logic and reason behind this.

Project 2 - Website Revamp, Design and Development

Conducting Usability Evaluation

Problem:

Since the company has several websites that host different content and they are connected at several different levels, the team needs a holistic evaluation of:
1. What type of content can users easily access with a few clicks?
2. What type of information is hidden deep down in the website and needs to be redesigned?

Solution:

To solve the problem, I choose to map out the site map to draw a clear user journey to trace down users’ behavior through different websites. The site map provides a clear route for the company to track down the clicking time and browsing behavior before users reach their destination.

This map provides a holistic view of the overall connections and content of all websites. The design team, marketing team, and instructors team were able to sync up the content design and delivery by using this map. I was able to provide clear visual guidance to the course development team on how to generate new content that is closely related to exciting courses/content on the current website. Meanwhile, the design team was able to notice the pain points of accessing certain product instructions and details on the current site. I eventually led a rethink and redesigning of the old website.

Improving Content Accessibility

Problem:

How to provide easy access to products’ free courses, instructions, and open-sourced databases? How to lower the uncertainty feelings for those unfamiliar with the products they receive?

Solution:

To solve the problem, I managed to reorganize the original guidance information on each product's detailed page into one place and provide clear guidance and the Call The Action (CTA) buttons to lead users to take further steps.

After launching the new overview page, the website data team reported more traffic toward the curriculum overview pages and the CTA led a 20% improvement in traffic to the designated online course sites of each product.

Designing New Feature User Flow

I took the lead in designing the user sign-in and sign-up process on Robolink Basecamp to clearly divide our users into three categories - teachers, students, and parents. This process will help the team generate more target-oriented content for each group and provide a more bounded communication environment for each type of user when they meet in life.

Designing New Product Initial Customer Experience

I participated in the newly released product - CoDrone Mini early-stage user experience development, which has also been included in the Robolink Basecamp learning content. By providing proper step-to-step information along with possible problems the remote students may meet, I was able to deliver a clear, structured, and organized onboarding manual for all summer bootcamp students. After that, I took this template and generalized the content to make it fit a larger group of users - general students/customers who own CoDrone Mini and would love to get started with it.

Summary

During the toughest time, the Roblink Inc. team survived all together as a united family. I, as a designer, delivered a clear interface design along with a united design style language throughout the whole system. As the major deliverable of the learning platform (Robolink Basecamp), my UI design and information system organization were able to help hundreds and thousands of students learn robotic coding and artificial intelligence on their computers, tablets, or even phones. The comprehensive consideration of different stakeholders on the learning website was able to guide them to their desires clearly.