LIONSBOT INTERNSHIP
Jan 2021 - Jun 2021 (6 months)
Internship, UI/UX, Animation, Graphic Assets
Supervised by: Muhammad Khairul Syafiq (UI/UX Special Projects Architect)
CONTENT
LIONSBOT INTERNATIONAL
COMPANY BACKGROUND
LionsBot International is a Singapore-based robotics company that creates cleaning robots as a service for commercial, industrial and public spaces. Their robots are recognizable by their endearing appearances along with affable personalities. As of 2021, the company has over 50 employees, as well as robots cleaning in 22 countries.
INTERNSHIP EXPERIENCE
I mainly worked with my supervisor and the Software Team, creating or redesigning UI for various platforms and applications. The users of these applications included distributors (admin staff, regional and local dealers) and cleaners.
There was no design system in place so there was a lot of freedom to explore. The startup was a fast-paced environment where ideas were constantly being explored and new directions found. Therefore, several of these projects were carried out concurrently or even put on hold and revisited afterwards.
I had the opportunity to work on many different projects and pick up new skills, such as animation, assets creation and even sit in on Agile sprints.
ROBOT INTERFACE DESIGN
The company was developing the new Rex robot and wanted to create something futuristic. The design direction of the robot was constantly being reviewed and revised, hence the design of the robot along with the UI were constantly being refined and changed.
The primary users of the interface were elderly cleaners with basic to proficient familiarity with technology. The robots are also used in both indoor and outdoor settings.
INITIAL EXPLORATIONS
FIRST ITERATION
SECOND ITERATION
THIRD ITERATION
By the end of my internship period, the user flow, design style and interface were all still in development. The second and third iterations were developed into prototypes during the later stages of the robot's testing and development.
LIONSCLEAN MOBILE APPLICATION (REDESIGN)
The mobile application is used by cleaners and supervisors. The cleaners are the primary user. They use the mobile application to control the robots and to carry out their duties. The app keeps track of usage activities and allows cleaners and supervisors to monitor the robots and staff respectively.
The redesign was not a priority project, hence had fewer iterations.
ORIGINAL INTERFACE
ITERATION 1
For the redesign, I explored and created original illustrations and icons to make the app appear friendlier while increasing its intuitiveness.
For the redesign, I explored and created original illustrations and icons to make the app appear friendlier while increasing its intuitiveness.
ACHIEVEMENT BADGES
Badges are earned when cleaners use the robots for a certain number of accumulated hours. The existing badges were dull, so I was tasked to create badges that are enticing. These were some of the different styles explored. All the elements were original creations done in Adobe Illustrator.
It was also at this stage where the caricature of the Leobot was created and subsequently used in other icons and animations.
This set below was used as the new achievement badges.
ITERATION 2
This design was later explored to be more in line with the style of the new robot and its interface.
LIONSCLOUD WEB APPLICATION (REDESIGN)
Lionscloud is a web application used by local and regional dealers to monitor their contractors and robots. Users include administrative staff, technicians and sales associates.
I was tasked to explore possible improvements that could be made to the dashboard and some of the other screens, taking into consideration its mobile view.
DASHBOARD
Original landing page of Lionscloud
My redesigns differed slightly between the dashboards for admin, sales and technicians. Pictured below is the dashboard for sales personnel.
ROBOT INFO
Sections of original screen for robot info and settings
The new design for the robot page was done with an optimised mobile web view in mind as it contains many frequently used functions but is loaded with a lot of information.
MOBILE
WEBSITE
WEB SCHEDULER
Users can schedule cleaning sessions on the web application as well.
Original web scheduler
Redesigned web scheduler
ICONS
WEB MAP EDITOR (REDESIGN)
The web map editor was originally built for technicians to label and edit maps that are used for cleaning. However, the map editor was bare and unintuitive. The goal of the redesign was to make it easy to use so that cleaners and supervisors can also edit the maps, reducing the reliance on the technicians.
FIRST ITERATION
SECOND ITERATION
THIRD ITERATION
ANIMATION
BOOT ANIMATION
While exploring different styles of boot animations, I created one that expresses the affability of the robots, in the style of a soft, Pixar-like animation. This was made in Adobe Illustrator and Adobe Animate.
Prior to the animation, I made a simple loading gif to visualise the animation style.
ROTATING ROBOT GIFS
Even though they decided not to adopt the animated style for the bootup, I was asked to create gifs of the robots rotating on the spot. These were to be used as loading icons while the robots are localizing (which they do by rotating on the spot).
Both the Leobot (left) and Rex (right) were created using frame-by-frame animation on Illustrator and Photoshop. However, as the Rex was still in its developmental stages, I had to use a fair bit of imagination to create its appearance while minimalising the details so that it will still look similar to the end product.
LEOBOT
LEOREX
DELETE MAP ANIMATION
Nearing the end of my internship, I had some time and decided to explore other styles of UI animation, such as the one below. It is the animation that would be played after the user deletes a map from the list of maps on the robot interface. It was created from scratch in Adobe Animate.
