STAGE 01 - SETTING THE SCENE

Intelligent customer service for the modern world

SCENE 01|04 - CONTEXT

When Roborus came to us, they had developed an ordering kiosk with advanced facial recognition and AI technologies. The product looked great. It functioned well on a technical level, but the interface they’d developed internally didn’t take full advantage of their technology. Planning to pitch their robots to potential investors and clients in the following months, they were in need of a sleek website and a video to show their robot, POCA, in a real environment.

DH KIM

SCENE 02|04 - ROLE

UX/UI Designer | Webdesigner | Developer | Videomaker | Photographer and ... Actor (Yes, you read it right) #unicorn

SCENE 03|04 - TOOLS

Pen & Paper, Adobe XD, Wordpress, Invision, Loom, Panasonic G7, Lightroom, Premiere Pro

SCENE 04|04 - DATE

2018

STAGE 02 - RISING ACTION

Don't just sell a product, sell an experience

SCENE 01|07 - TASKS

- Develop a new website
- Create a video
- Design a “beta” interface for their robot, POCA, feature in the video

SCENE 02|07 - BUSINESS OBJECTIVES

- Sell to corporate their robots
- Convince investors to invest in their company
- Increase brand awareness

BUSINESS OBJECTIVES Roborus

SCENE 03|07 - USER NEEDS

Website - A website where they can easily find the advantages of Roborus robots for their own business
Interface - A user-friendly interface to make the process easier and faster to order food

SCENE 04|07 - DESIGN PROBLEM / WEBSITE

The previous website featured many of their old prototypes but did not showcase enough their final products. The navigation was too complex, and the English copy needed revisiting. The goal was to simplify the flow of the website and make it look better and more professional.

Previous website

SCENE 05|07 - THE CHALLENGE / WEBSITE

The team wanted to feature as much information as possible on the website and showcase all their achievements since the foundation of the startup. In contrast, the target audience (CEO of Fast Food / Coffee and Investors) need to digest the information as fast as possible and see clearly the advantage for them and their business.

SCENE 06|07 - DESIGN PROBLEM / ROBOT INTERFACE

The previous interface was not performing well and was confusing for English-speaking audience. The goal was to reshape the entire process to make it easier and faster for users to order food.

previous interface

SCENE 07|07 - THE CHALLENGE / ROBOT INTERFACE

We had a tight deadline as we were not only helping them create a new interface, but also we needed to feature the interface in their upcoming product video. We had to move fast. The video would be filmed in a coffee shop, so we started by created a coffee menu interface.

STAGE 03 - CLIMAX

Spot on: Website

SCENE 01|04 - RESEARCH

The goal was to see how others have solved similar problems and try to replicate their success. We started by analysing websites from robotics companies, then tech and online banking to see how they tell their story and sell their experience.

information architecture

SCENE 02|04 - PREVIOUS WEBSITE

Identifying pain points

The main issue in the previous website was the amount of detail given for each of their robots. They were selling a product and not an experience. The website had 19 pages of technical detail, which was way too much to browse for potential clients who are looking for fast answers for their needs.

painpoints

SCENE 03|04 - WIREFRAMES

With the new information architecture done and a part of the body copy written, I played with different options and layouts, while making sure that potential clients are presented with relevant information as clearly and quickly as possible. I aimed for a structure that is clear, simple, and easy to browse.

wireframes


SCENE 04|04 - PROTOTYPE

Once the wireframes were done, I used Invision to present them. However, my experience from a previous project not all clients can understand the wireframes and the design language. My purpose for this new project was to fix this issue. I recorded (with a tool called Loom) with my Project Manager, Jonathan Moore, an explanation video of us going through the different pages.

Invision

STAGE 04 - SOLVING THE PROBLEM

Web Design

SCENE 01|04 - HOME

The idea is to invite users first to discover the robots and show the advantages that they bring for their owners. The second part is to improve credibility and convince investors (Awards / Partners / Articles).

homepage roborus

SCENE 02|04 - POCA

Gif POCA

Due to the form of Poca and its design, we tried to give it a soul with the tone of voice that we used in our body copy. First, we have the advantages, the different features without going too deep into details, photos of the robots at work and a spec sheet. The main idea is to invite the users to get in touch if they are intrigued by what they see.

SCENE 03|04 - SOS

Same idea as Poca but with a different tone of voice, more informative this time. The reason is that it’s a different kind of robot and less “friendly” than POCA. SOS is a robot more adapted to big restaurant chains and its primary goal is to be informative before being friendly.

SOS Roborus

SCENE 04|04 - DEVELOPMENT

Being in a small agency, my work as a full stack designer could also include development. I built a responsive website in Wordpress. The idea of building the website with a CMS is to give the full control to the client after our project ends.

STAGE 03 BIS - CLIMAX

Spot on: Kiosk Interface

SCENE 01|02 - RESEARCH

With a deadline as tight as this project, I couldn’t dedicate too much time for research. I analyzed a few major kiosk interfaces such as McDonalds or the Starbucks app and started to work on our Beta interface.

SCENE 02|02 - PREVIOUS INTERFACE

Identifying pain points

Made by developers, the previous interface needed a complete redesign. The font used, “Papyrus”, was not clear enough, and the user experience was confusing due to the lack of hierarchy of the content and a convoluted layout. The main idea of their robots is to speed up the order and thus improve efficiency for the business. But the existing interface failed to deliver on this main selling point.

previous interface

STAGE 04 BIS - SOLVING THE PROBLEM

Interface Design

SCENE 01|02 - MENU

Luckily for me, the video shoot took place at a coffee shop, where I had an experience having worked at Starbucks in London. Based on my experience and my research, I was able to conceptualize a clear and simple interface to order a cup of coffee. With the number of items à la carte, I decided to split the menu into different tabs. I didn’t forget to add the size of the cup on the top right and placed a list of items with their price and a visible scrolling bar. On the right, as requested by the client, I dedicated a space for the regular customer. Bear in mind that the step before the menu is the facial recognition so that the robot can recognize the customer and show the order history. The main goal is provide a faster ordering process That’s why I dedicated an important part of the screen for this section. Many of the regular customers that I had in London were always ordering the same drink.

menu
starbucks

SCENE 02|02 - PAYMENT

After choosing the item and pressing on the button “continue”, we end up on the order review page. Having personally used such kiosks or even having seen my friends ordering, I noticed that we often make mistakes in our order. So I placed a button where you can edit and change your order. You could also erase your item and go back to the menu easily. As many of coffee shops / fast food restaurants have their own gift cards and discounts, I placed an input button right before the payment page.

payment
shooting

STAGE 05 - (RE)SOLUTION

Ending the story... for now

The Result – Kiosk interface

Because of the rush, I went straight from sketches to visual design, skipping a few steps like exploration, wireframe, prototyping, user testing, etc. The interface is still in beta version but will be improved soon with user tests and on site in the US. I am really looking forward to working with Roborus on this project for the full interface.
In the end, we created a functional interface for both of Roborus’s models in a record-setting three days. It was ready to be featured in the video and for the client to use during sales presentations in the United States. Glad to our help and support, Roborus were accepted to big accelerators such as "The Farm" in the US and "Techstars" in Germany.

robot interface


The Result – Website

According to the budget and the timeframe, I try to deliver the best work possible. The website is now more clear, simple and easy to understand. The focus is now more on the experience and the advantages that the robots bring to the business owners rather than all the product specifications. The Roborus’s team was very satisfied by the job that we delivered.





And finally, the Roborus video, made by my friend filmmaker Derek Uhm and where I play a short role in. Please enjoy.



…Still waiting for the Oscar… it will come. It took time for Leonardo Di Caprio too.

leonardo di caprio


crew

BROWSE OTHER PROJECTS