these are just iterations

Being an intern at goDutch (YC W20)

Shrey Bhagat
12 min readApr 8, 2021

After interning at Invoid (YC W21) and few other early startups as a solo designer, I got a chance to intern at goDutch. goDutch helps users to record, split, and automatically settle group transactions such as rent payments, travel, shopping, dine out, home delivery, etc.

Read more at: https://yourstory.com/2020/07/group-payments-startup-go-dutch-iit-bombay-alumni-matrix-partners?utm_pageloadtype=scroll

WHY I decided to join goDutch ?

Splitting bills with friends or asking them to return my money is a weird stuff to do. Most of the times, someone else pays the money and then later hesitates to ask the money back. I have been in those shoes and a lot of people of my age go through this situation. goDutch solves this problem. What’s better than joining a startup which solves a major problem of my same age group. Hence, goDutch.

I am very grateful that I got to work with two YC backed companies at a very early stage of my career.

I remember an advice from one of my seniors saying try to get your first few internships at a startup and try to take as much as responsibilities you can take.

I joined goDutch as their first design intern.

I worked on a lot of things which consisted of designing new features, improving existing features, user experiences and journeys.

This article is all about how and what I designed at goDutch

Getting Started🧰

I started with familiarizing myself with the app (took few hours).

Design Process :

When a product is already live then a lot of iterations are needed time to time as compared to personal projects. This is followed by a lot of user interviews and feedbacks. Hence I decided to go with this design process.

Designing the user on-boarding :

SignUp flow :

I collaborated with co-founder to learn about the design methods the company applies before coming to a conclusion. This helped me a lot when I started working solo.

From primary research, I found that most users felt frustrated when they first encountered goDutch.

What I mean by frustrated ?

  • User’s motive was to immediately split expenses, but the sign up flow interrupted the motive because of the multiple clicks before they entered their mobile number.

Also most of their first impression about the app was “Don’t know what to do except splitting bills like Splitwise”.

Further there was inconsistency in Visual Design and text hierarchy as well.

Majorly interaction wise, the sign up flow needed to be fixed.

Earlier Sign Up Flow
New Sign Up Flow

The difference ?

  1. UX Writing.
  2. More app overview
  3. screens (auto swiped)
  4. Fixing the visual hierarchy
  5. Improved interaction

When users (new or old) signup/login on the app, reading what the app provides shouldn’t be a stress.

In previous flow, there was no information about what the app exactly does(rather just some fancy statements) , hence in the new flow we decided to pick the elements from the app itself and tell the users more about it suing it.

Research:

Before conducting user interviews, I went to see what users were actually saying on the play store.

User reviews

Conducting user interviews :

This consisted of mainly understanding the pain points of the users. Few of the pain points were :

  • Discovering features
  • Offline working of goDutch app
  • Directly paying to merchants
  • Splitting bills instantly with either groups or individuals after paying to merchants
  • Annoying SMS alerts
  • Splitting money in ratios
  • Unable to know whether their contacts are on goDutch or not

Designing “Payments to Merchants” feature —

User Scenario :

Solution :

Facilitating user to pay to various merchants from within the app along with seamless bill splitting experience.

User journey:

old user journey
New user journey

Lo-fi wireframes :

Merchant Payment

Iterating button type for selecting group/individual :

Hi -Fi Wireframes :

Imp — Users should have a seamless experience when they try to split the payments. And the split should happen along with money being paid to the merchant.

Scanning merchant’s QR Code

Next : Conclusion from reading reviews on Play Store :

Users generally don’t read what’s new in the update, expecting that they will get to know (if there’s any) about it once they open the app. This is true for apps in general. But for goDutch the case was different. Users think of it just as a bill splitting app, and only thing it had different from Splitwise was the UI and availability of goDutch card.

Settings/Profile

To solve this problem, there was only one option which was bringing all the new features somehow on the home screen. But I didn’t want to disturb the current design.

Existing Design

TBH, this internship was a lot about explorations. I used to do make at-least 3 to 4 versions to explore the breadth of solutions from going ahead with anything.

So, I started iterating and came with few solutions :

Approach 1 — Carousel Design

What’s wrong with this approach ?

  • User has to swipe over and over to see the new features. Though auto swipe could have been implemented, still its boring from the eyes of a millennial. Also the user would lose the track of his/her balance (if auto-swiped). It would feel more like catching a running bicycle. Hence we dropped this idea.
Approach 2

What’s wrong with this approach ?

  • This approach was better than approach 1. We decided to implement this but then I figured out an issue with this design. The issue was if more than 5 features were to introduced to users, how would we do it with this design. To solve this, Carousel design was a better option but I have already discussed it’s demerits.

WHAT TO DO NOW ?

After few hours of thought, I started noting down stuff related to millennia :

  • They use social media a lot
  • Instagram and SnapChat are fav.
  • Easily adapt to new updates but don’t accept bad UIs (Instagram proved that)

Conclusion :

Introducing new features as stories, hence “ goDutch Stories”.

Iterating:

PS : Also designed the new “Net Balance” Tab.

Please ignore the Nav Bar

The iterations constituted of deciding the icons and how the story button would seem. I came up with the idea of using 3d icons as it was anyway going to be a trend in 2021 and it was executed successfully too.

Final Design :

Home screen with goDutch stories
goDutch Stories

Considering the design trends and the type of users we were serving I suggested to go with 3D icons.

Add expense and Summary icon was ideated and designed by me.

Why use the goDutch icon for adding expense?

So, the basic idea behind goDutch to add expense to split bills. Hence I decided to go with goDutch icon. Also, after the redesign of homescreen, it resulted in loss of identity. No where in the app, there was availability of the word or icon of goDutch (except FAQ section).

When the user taps on any of the stories, it would same as Instagram.

PS : I made only the gradients in BG. We have a graphic designer to make the illustrations

The new design comes with redesigned home screen with a ham.

Ham menu

Redesigning Refer and Earn :

Concept: Scratch cards are earned either when a user is invited or a user does some specific type of activity such as adding expense, settling balances etc.

In earlier screens the message was not conveyed that what was the reason for earning any particular scratch card. This problem needed to be solved along with giving information to users about those scratch cards which needed to be unlocked.

Old Screens:

Old Screens

Redesigned Components :

Playing around with UI components

Unscratched card:

<- old new->

Scratched Card:

Old vs New Screen :

Apart from the white background, the new screen allows users to close this screen if they don’t wish to scratch at that moment and also tells why the user received the card.

After Scratching:

Both CTAs : Learn More and See Rewards have the same function that is referring to the invite screen but telling the user that they can see their rewards is more triggering than saying the user to learn more.

Locked Card :

Clean UI

Previously, locked screen had 2 major issues regarding communicating to users.

  1. The user didn’t knew why they got the scratch card.
  2. If a certain action is needed to be done, there was no option to redirect them to that action.

This resulted in increase of new signups by 11% and activity on the app also increased.

Every time a user adds an expense or settles a balance, a SMS is sent on the user’s phone number. At times, this can be very very annoying. Hence SMS notifications settings. This feature is not of any design importance. But I learnt a very important concept about various buttons.

Firstly the screen( after few iterations) :

Generally there are 4 types of Button which are :

  • Radio Buttons
  • Checkboxes
  • Single Checkboxes
  • Toggle Button

Obviously I couldn’t use the first two, but I was confused between using single checkbox and toggle button because according to me, they served the same purpose.

“A checkbox control has three states: unselected, selected, and indeterminate. The last state represents a situation where a list of sub-options is grouped under a parent option and sub-options are in both selected and unselected states.

A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch.” Reference.

Since APIs will be called everytime a user makes a decision, the effect wont be immediate and take some time.

Dividing expense by ratio:

When is this useful ? Say, you decided to go out with your friend to a restaurant. But your friend came along with his girlfriend. Assuming you don’t have her number how can the bill be split ? You’d need to add her contact info to add her on goDutch.

Alternative : Split the bill in ratio 2:1. The amount is split automatically. Boom!!

Or there can be other situations as well. For example if you take me with you for dinner, I’ll eat twice as much as you can eat. So simply divide by ratio 2:1. Problem solved.

How the ratio’s should be split ?

There can be various approaches to splitting expenses in ratios. Few ideas I came up with were:

  1. If the ratio is a(i)/b, then firstly asking user the value of b and later putting the values of a(i).
  2. Asking the user to directly enter a(i) and b would be sum of all a(i).

After conducting user research and prototype testing we concluded that the first approach was time taking and made the users think whereas the second approach was very easy and understandable.

Identifying goDutch users:

Previosuly when a user wanted to add expense with someone and if they are not on goDutch, the user wouldn’t know. To solve this problem, I made a slight approach :

The solution was very simple. Simply showed the goDutch logo against the contact if they are on goDutch, else the logo would be absent.

I also worked on redesigning various screens which can be seen on my dribbble profile.

Transactions as Chat :

Split Payments in chat (Iteration)
Iteration
Final Design of components for all cases

Designing Offline mode :

Previously expense could be only added when the user is connected to internet. Solving this issue was easy from backend, but from design perspective a lot of changes needed to be done along with introducing new designs.

Designing the notifications:

in-app POPUPs were the best option to do rather than sending notifications on the phone. Designing the notifications was more about UX writing. The message conveyed should be precise, short and satisfactory. Before I started writing down the texts to be included in the notifs, I read an article: 16 Rules of Effective UX Writing.

Various notifications (more of UX writing than design)

Use Cases:

My manager told me that we should introduce a new screen for all the offline transactions. I suggested that we should introduce it in filters options. Why ?

  • Offline transactions are also a type of transaction, hence perfectly fine to be included in Filter option.
  • Reducing the pain of designing and coding a new page for offline transaction, and also reducing the pain for an user to navigate through it.

The screens are the first two in the bottom row.

Other Components:

These are the elements for different situations when either an expense is created/edited/settled or a manual payment is made(UPI cant happen).

This has not been included in the update yet and the user journey is still at ideation stage.

In the last weeks of my internship during conducting user interviews we came to know that the users were not happy with the chat views(expanded and collapsed)

Pain Points:

Say for an expense which is to be split among 10+ users, the expanded view consumes the complete screen. Eg:

This is the collapsed view. LOL!

The new expanded view:

Expanded view

We decided to put the expanded view in a drawer. Now all the data can be easily shown to the users.

There were a lot of iterations on different cases as well. Overall we got a positive feedback from our users when we tested the prototype.

The app is for millennials and Gen-Z. Further,lot of apps have introduced some chat background in one way or another. For eg : Instagram, WhatsApp(even the desktop version).

Hence we decided to have a chat background for our millennial users.

The goals:

  1. BG should not be a distraction.
  2. BG should not interfere with the contents on the screen as it shows about the payments done, bills split etc.

Initially I started iterating by using icons related to finance etc.. such as coins, banks, wallets(the designs got deleted somehow). Further I browsed on dribbble as well for inspiration and this is what I found very close to what I had in my mind.

dribbble inspiration

But later I decided to go with some random shapes. Initially I thought I was stupid enough to do that, but after discussing with the founder who was also my Manager we concluded that it was the right thing to do.

And this is how the design turned out. Pretty proud for designing this.

Opacity set to 10% for bg

Key learning from this internship :

  • Always ask for feedback.
  • Don’t worry, you’ll make mistakes.
  • Internships are more about learning and taking huge responsibilities(not an oxymoron).
  • Always think hard why you made a particular decision. If possible try to get supportive articles.
  • Working at a startup is fun and loads of work.
  • Always explore various approaches.
  • It’s OK to directly make a hi-fi wireframe.😅😅
  • Try what’s trending. ( I used 3d icons..and it was a big hit)
  • Users are fickle.

--

--

No responses yet