Some off-topic: Most of the Startups and/or businesses in our country don’t take user experience seriously. Which ends up as bad user experience but they don’t seem to connect with users to know their problems. I use a bunch of those apps because there is no other option.
At Cookups things went differently though. We started with the users. In this user-first approach, we learned a lot, resulting in satisfied users.
Focusing on the problem
When starting up, Cookups was a facebook group where users put on their menu and foods, Users orders by commenting or inboxing the cook. However, over time when the number of users & cook increased. the facebook group wasn’t viable anymore. We needed an app but within a short timeline. The growth rate was high. We got a brief about the targeted users- 65% of the over 35 aged women & ios/android users with low technical literacy. Interviewing some of the cooks & users in the discovery process, we found out they are skeptical of learning a new app & inclined to the facebook group idea.
Discussion, Technology Stack & Much More
So we discussed the user’s more-or-less defined the problem statements on post-it notes & decided to give probable solutions. Key findings were-
- We need the app to look like/ act like facebook minding our interests of focusing more on the food items & images
- Need to make the app as simple as possible
- Need to have an inclusive, holistic & accessible app
- For developing the app in short-time, maintaining cross-platform (iOS, Android ) We need to choose a hybrid platform
- Simple Ordering Process, Which don’t require users to be technically sound.
We chose “React Native” as our app development framework to support rapid development without sacrificing performance. And Django as back-end framework.
I didn’t use sketch until then. but took a brave decision to start using sketch as the main design tool. Even though tools don’t matter much in the process but sketch surely increases efficiency & productivity. Also, discovering the power of this amazing tool. I turned into fanboy from sketch hater ( hated them because of not supporting windows & other platforms )
Approaching to solution
Usually I start with creating wireframes of sign in/sign up and then the inner-pages. This time I got lucky, I could take some usability test before creating the app. Took tests & interviewed them about what they find most comfortable, what they find most difficult in the existing system & other similar apps.
This time, I didn’t start with the sign up/log-in this time. I started with the most important page, the feed. Created a few variations of it. Discussed with our stakeholders. Based on the discussion I got rid of a few concepts.
The Feed & Ordering Flow
Then I started to create the order-flow based on the user’s feedback. Created 3 different prototypes with 3 flows of the same thing. Took some usability tests on each one ( 3 cooks & 3 diners). The most accepted form was an Instagram-like feed with only an action button on the bottom of the details screen & keeping a focus on the important information.
One of the interesting & counterintuitive (for me) finding was users were having a tough time understanding the cart & checkout system. When we removed the cart & made the ordering direct, removing a step, one of the users described it as the “Simplest ordering system, they have ever seen”. However, this came with its own con. If a user wants to order multiple items from multiple cooks, he/she have to go through the ordering process multiple times, thus creating multiple orders. But we eliminated the cart anyway to keep the convenience for our targetted users. Later, on the usage pattern report, it seemed like users don’t bother about ordering multiple items & repeating the ordering process as long as most of the fields come pre-filled for them ( more on that later).
The Navigation & Menu
We wanted to follow platform mechanics on this one like the other areas (Explained later in this article). In the case of Android, we put a burger menu like Gmail app & in iOS, we put tabbed navigation with more important information in focus (Remember the interview and post-it notes! That’s how we found about the importance of the tabbed nav menu order).
However, when we went to try our POC ( proof of concept) prototype with the users. nobody wasn’t able to understand the burger menu. We removed it and made tabbed navigation bar to the standard. And put less prominent options in a tab. Which seemed to work very well.
I would probably A/B test it in the future ( when the infrastructure would be ready), but in usability test I found all the evidence to keep tabbed nav.
Implementing the Platform Mechanics
We wanted to give our users the best experience with no or little learning curve. Since the users were already used to in their platforms (iOS/Android) & facebook app, we followed the design guidelines & patterns provided by Material design ( Android’s design system) & Apple Human Interface Guidelines. We implemented them in a way so that we can keep our single channel hybrid development process which enables us to work swiftly & efficiently. We changed the bits where platform things are different for different platforms. One of the examples could be Segmentation view(ios) & tab bar view (android). Both technically does the same thing but differently in different platforms. Also, we implemented the system picker for time & date.
Rebranded to Express New Apps
Originally, Cookups logo was a frying pan with fire on a rounded green circle.
But as the frying pan was asymmetric, Implementing the logo on the app icon became a challenge. However, we put it, It ends up looking bad & not communicating with the users the way we wanted to.
After a lot of trials & errors, We finally came up with a better idea of creating the desired icon. By cropping the handle of the frypan with the app rectangle, the icon looked good as an app icon & communicates our brand successfully. We took the idea of the app icon and gradually applied the icon to the whole system. It might a subtle branding change but the new symmetric logo made an impact & helped us moving forward.
Streamlining Addresses Resulting More Friendly Ordering Process
After releasing the first MVP (Minimum Viable Product) of Cookups, one of the problems was writing the address multiple time. Users had to repeatedly type the whole address. Also, It has became a problem for our delivery system. Usually they need a map point to efficiently plan their route. Which required to have a person for placing the address on map (Approximately).
It became obvious that we can take the map point easily for our delivery uses & the details from the user. Also, We need to save the addresses (Users use multiple addresses, we found out in an early interview. ). So we created a break-downed address page with a pin to map and gave 3 labels ( Home, Work, Others). We ran a usability test and found out users find labeling address is confusing. So we labeled addresses for them. Users normally don’t need more than 3 addresses. If they need there is always edit address option. After these Addresses was autocompleted & ordering process became the simplest. Only a few clicks & the Order is processed without any need of typing extra words (unless you want to add notes).
We also got the benefit of making our delivery system more efficient. Which made us more scalable & productive.
Search!
We put autocomplete search powered by elastic search. The search was working fine. But we found a problem that we didn’t think of earlier. When a user is typing, The results are showing predicting autocomplete. But since the item image(s) were there with the search result, hence the keyboard blocked the first item name (Most of the time matched search term). Which created a problem. Users didn’t understand if the search is working or not. This happened only on smaller devices. Large devices like iPhone X had much more vertical space. So, the result could be seen in large devices.
We decided to redesign it in a way so that the users find it more exciting. Even if he/she doesn’t find what he/she wanted to search. We provided cuisine name in the screen when the search box was empty. The autocomplete was providing titles only. Tapping that title will take it to the description.
Going Web
When we rolled out the MVP, for our resource limitation we didn’t role out the web version back then. Resulting in losing some of the users who don’t want to install an app on their device. Some users also preferred web version.
We were working on the web version & PWA (Progressive Web App) for Cookups which rolled out later giving the users a wholesome & consistent experience across all platforms (iOS, Android & Web).
Future – Variable Rewards
After Releasing the platforms, we started to analyze data & take actions accordingly. We found our feed is non-exciting right now. ( Don’t have that exploitability feel). We wanted to create the app as habit-forming as possible. So for users, we will introduce an explorable dashboard which will reward the user every time the users starts the app.
Cooks
We started working on digitizing cooks later. Usually, cook’s used to sending us their post & we would post it in the app on behalf of them. That created a scalability issue. So, cookups is working in a cook version of the app where cooks can switch to diner & cook.
More
When I left Cookups, there were still a lot of things to be done. Since Cookups was a fast-paced company I guess they would have started to evolve the product based on the foundations and design systems we have created. I’ve learned a lot working with Cookups.
That’s all for today folks. Hope you’ve learned something from reading this case study. I would feel great if you did learn something from here. Let me know in the comments what you think?
Credits
@mishaali, @alreadysabbir, @rifat662, @NadimTuhin, @namira & the whole Cookups team <3
A great read!
Thanks a lot Vai for sharing.
Thanks for commenting