Kiwibot Redesign: A UI/UX Case Study
Backstory
I came to Berkeley for the summer to intern at a tech company in San Francisco. One thing I discovered while subletting with students from UC Berkeley is that they have robots. Not just any robot, but a food delivery robot (that makes faces). As intrigued as I was, I wanted to try it out for myself. Not only were the deals unbelievable, but the service was as unique as it gets. There was only one problem with the execution of this futuristic concept — its UI/UX.
There had been multiple occasions where I or one of my friends would be in complete confusion while using this app. From missing food to extreme delays without any notifications, we were just about tired of waiting for an update to come around.
Defining The Problem
Being a service dedicated to the students of Berkeley, I wanted to know their opinions about the Kiwibot app. I interviewed four students, who are all avid users (and by avid, I mean uses Kiwibot on a daily basis). And based on their answers, I was able to pull out some key findings:
- Students want a way to better streamline the process of redeeming the points they’ve accumulated overtime.
- Students would feel hesitant to use the delivery service due to lack of clarity during the checkout process.
- Students can’t find customer support on the app when they need it.
- Students want diversity with their meals, and the current version of the app doesn’t provide proper sorting for the restaurants around them.
“It’s hard for me to track what I paid for — leaving me with less trust in the app because I would have no clue where my food is at times.”
From these key findings, not only was I glad to know I was not the only one thinking these things, I was able to organize my thoughts to go forward with providing a proper solution to solve these problems.
User Persona
Diving deep into this research, I created a user persona that tied in with the lifestyle of most students living here. I wanted to make sure I focused on giving the proper user experience to those who depended on it very often.
Pain Points
Through the interviews and research, I was able to summarize the main pain points associated with Kiwibot:
- There’s no way for a user redeem the points they’ve earned without contacting and then waiting for customer support to give them a code.
- Though the app’s purpose is to make food delivery simpler and more convenient for the user, it lacks a user centered design to guide the user through the process from start to finish.
- There are problems with tracking what stage your order is at once you’ve placed it.
- The ordering process is unnecessarily long and inconvenient for users to order food as fast as possible.
My Solutions
Because I have used this app nearly everyday since the beginning of summer, I was very excited to provide solutions for these pain points (hopeless dream? I hope not). Through these solutions, I wanted to provide an overall better user experience for the students who depend on this service.
Homescreen
Through the interviews I conducted with the students of Berkeley, I decided to start this user journey from the home page. There was a lack of organization as I would scroll through to find what type of food I wanted, making it hard to guide a user who has never used this product before.
Coordinates — The current way a user can track where their food is being delivered is through the use of coordinates. Maybe this is for the robot? Who knows, but something like this isn’t understandable for a consumer-facing app. I replaced the coordinates with the nearest address so that the user can know exactly where their Kiwibot will arrive.
Banner — I added a banner to reduce the amount of unnecessary whitespace when promoting special offers. For example, the “3.99 Sandwich” offer only has one restaurant that is currently promoting that deal. Deals promoting one restaurant, should be compiled into less cluttered banner.
Currently Closed — By completely removing currently closed restaurants from the home screen, we are making use of the space provided to promote currently open restaurants. A user can still search a currently closed restaurant through the search bar, where it will let them know it is unavailable for the time being.
Tab Bar — I designed the home screen to function without a tab bar. If Anna was a new user of this service, she wouldn’t have been able to understand first-hand where each of the icons lead to. I designed the home screen without it to provide a simpler solution to navigating through the app. The redesign still provides the exact same features the original app has, but it’s organized in a user-centered way.
All of the features such as redeeming points, contacting customer support, and viewing your account can be accessed through your profile as shown below.
Search — I designed a search bar that allows the user to have freedom when searching for their next meal. Students, like Anna, don’t want to waste their time scrolling through the home screen to look for that one particular dish or restaurant.
Order Process
I redesigned the order process pages in order to improve usability and provide the speed and efficiency Anna would have wanted as a daily user of Kiwibot:
Menu — I categorized the menu items in a way that reflects a real menu: listing restaurant details, popular choices, and proper sorting. The current design of the app provides drinks and food in one large section. The redesign sections off each category so the user can properly select the food they want without getting lost in the abundance of menu items.
Item Details — The redesign helps the user visually understand what exactly they are adding on to their order. From size, amount of ice, and additional toppings, the user should be able to choose their options in a more organized way.
Check out — When I redesigned the check out page, I was mainly focused on two things: transparency and customizability. In order to provide users with the optimal experience without any confusion, I redesigned the destination category to improve visibility and understanding. Instead of coordinates, I used the nearest address to the drop off location. I also made the option larger so that students who are in a hurry doesn’t overlook the availability of the two options.
In terms of customizability, I added the option to choose your promo codes. In the original design, once you input a promo code, it automatically adds it to your next order. Users should have the freedom to decide when to use a promo code. The redesign allows a user to do just that.
Order Confirmation — When students place an order, there’s no confirmation that their order had been instantly placed. By adding a simple screen to confirm this, students (like the ones I interviewed), would be notified right after paying for their meal. That way, they wouldn’t be left in confusion waiting for the tracker to pop up on the home screen.
By continuously letting the user know what the next steps are, it gives them the ability to still feel in control which is important, especially for new users getting familiar with robot deliveries.
Lastly, the ability to track your order needed a detailed forefront in the initial screen. Students have said that they’d like to see where exactly the robot is once their order has been picked up.
The reason for this is because students would often find their Kiwibot toppled over on the side of the road (it’s a pretty sad sight). Because there is no way to track the whereabouts of the robot, students would have to either contact customer support or try to find it somewhere outside.
Detailed Tracking—This redesign allows the user to have real-time access to the Kiwibots location and ETA. What’s important is the constant tracking of where a user’s food will go. Because this is a seemingly new technology amongst current food delivery services (think Postmates), it’s necessary to ensure that the user at least has the ability to keep track of what they paid for.
Redeem Points
Points → free food = happy college student. When I interviewed the students of UC Berkeley, I noticed how much they relied on the accumulation of points in order to get the best deals they can find. As I monitored their use of the app and how they redeemed points, I noticed that there were multiple roadblocks that needed to be addressed:
Auto Points — When students redeem their points, they must contact customer support. Oddly enough for this simple task, there would sometimes be a lack of response. In my redesign, I added a code generator to instantly give you a promo code after selecting the amount of points you’d like to use.
I still kept the suggested amount of points listed on their main rewards page. The problem with this, is that users aren’t able to tap on it and deduct points automatically. This redesign fully automates the whole process for redeeming points. This leads to less time and energy used to get from redeeming points to placing an order with your promo code.
Prototype
I’ve included a prototype that shows the screens I mentioned before. See it in action, and let me know your thoughts! Have fun :)
Usability Tests
I conducted usability tests with the same people I interviewed and a few others. During the design process I also made sure to get constant feedback from other students to make sure I was keeping the purpose to be as user-centered as possible.
During these tests, I’d make sure to have them perform the same tasks they would on a daily basis such as ordering food, redeeming points, and tracking their order. If they experienced a roadblock, I’d go back in and make the necessary changes to ensure proper user experience.
Conclusion
Being my first case study, I definitely learned a lot about conducting proper research and going about the necessary steps to make sure I was planning and executing these solutions. I think it was a good start into developing better UX practices to solve a problem happening around me. I was able to hear a lot of good feedback when I would perform the usability tests, and that would always make me feel satisfied and motivated to continue getting better at this.
Thanks for reading! 🙌
I hope you enjoyed going on this case study journey with me. I would really appreciate any feedback! You can reach me at heyireneonline@gmail.com, my website, or connect with me on LinkedIn.
This case study was in no way affiliated with Kiwibot or the Kiwibot team. Just a personal project for learning purposes 🙂!
