HOME PLAY BIO


Role: Product Designer

Time to read: 7-10mins

Duration: 1 month

This case study was published in the Bootcamp publication on medium. You can view it here.

Optimizing the booking flow & UI of Cowin website

Disclaimer: I’m in no way associated with CoWin during this study. These are just my findings and solutions. All views in this case study are strictly my own and don’t reflect on CoWin or the Indian government. I’m not suggesting CoWin to abandon their current workflows.

cowin cover image
Cowin: Cover image

Context

  1. Overview of CoWin and vaccine bookings
  2. Why did I choose this study?
  3. My role

Overview

The CoWin website is the only credible source to book a vaccine slot unless you opt for a direct walk-in (in which case, the center will book your slot through CoWin only).

The website had a lot of server issues and updating problems at the beginning when the vaccination slots opened for everyone above 18. People were not able to book slots, get center information, and/or updates on the website.

Why did I choose this Study?

Many of the minor issues have, thus, been resolved since the demand has decreased, but I’ve seen many new design challenges and solutions working on the flows of the website. Specifically, the booking flow was mentioned in many cases.

Through this study, I’m just checking do we even need to optimize the flow, and if yes, then why, what, and how can we do that? I’ll also look into how the current UI can be optimized to be more efficient and functional.

I’ll just be working on the Mobile version of the website.

My role

Product Designer: This includes validating the hypotheses and assumptions regarding the issues, Redesigning flows and low-fidelity prototypes to share the vision of the solution, and Creating high-fidelity designs, prototypes, and design specs.

There are a lot of hypotheses in this study, and I’ll try to mention most of them.

Discovery

  1. User considerations
  2. Research & the Wisdom of 5 why’s
  3. Key insights
  4. Problems with the flows and UI
  5. Current success points
  6. Possible Solutions

User considerations

With CoWin, there were 2 main things to consider when designing the experience:

  • User Age

    • There are 3 categories of age divisions, including ‘below 18’, ‘18–44’, and ‘45+’ yrs.

    I know ‘below 18’ don’t have to book their slots, but I’m considering them as they might be using the platform to book the slots for their tech-novice guardians or elders.

  • User goals

    • There are 2 main goals to consider here, ‘Get a vaccine slot’ and ‘Download certificate’.

    ‘Get a vaccine slot’ covers many other small goals which lead to the same, like booking a slot for anyone else, the walk-in center booking a slot for the person, etc.

User location can also be considered for the part where you ask the question: are they booking a slot online or are they walking in and the center is doing it for them? But I’m not considering it for this study, as it is difficult to do offline research interviews at the centers right now.

Now, that I had a few considerations and assumptions in hand, I wanted to validate them and ask people about more.

Research

When I began my research, I was surprised by the work CoWin was doing (we’ve all experienced our troubles with the government websites in the past). I interviewed 5 people about the general experience of CoWin and all of them were happy with the experience now as they were able to complete the first ‘Get a vaccine shot’ goal. (Although, they were using other websites or telegram groups to book the slot)

This was the time when I felt like this was a waste and the end of this study. But there must have been a reason why people were frustrated and why there are so many groups and websites built to support CoWin.

I was a little confused at this time so, I went for the Wisdom of 5 whys.

Wisdom of 5 whys is a team and post-research exercise and you should always do it when you have all the relevant answers to your questions, but in a time of confusion, it’s better to begin by asking questions from yourself to gain more clarity from within.

  • Why do you want to change the booking flow?

    • As the users are facing trouble booking slots, get center info, or updates on the website.

  • Why are the users facing trouble?

    • Many design considerations and solutions were missing which resulted in a big outrage.

  • Are they still facing trouble?

    • The users are able to book a slot but not without help from telegram groups or other websites. Center information and updates on the website are still an issue. (this is still a hypothesis)

  • Why were solutions and design not considered?

    • As the site was built in a hurry.

  • Why was the site built in a hurry?

    • The need for vaccines was imminent and a new platform was needed very quickly.

  • Why were vaccines needed so quickly?

    • As the second lockdown was very tragic for many people and covid was becoming more and more dangerous.

To validate it further, I asked 15 more people a single question:

What all pain points and frustrations occurred when booking a slot through CoWin?

While the common answer still, as quoted by Interviewee 5, was “Surprisingly, none”.

There were some key insights.

Key insights

  1. 66.7% of the interviewees were already frustrated with everything happening in their life, facing trouble on the vaccine booking site is even more frustrating.
  2. 80% did direct walk-in or used other resources for updates on the availability of slots. No real updates or context is given before any process.
  3. People were left hanging. Even when registering or when they find no slot available while searching.
  4. The no-specific Privacy policy on the CoWin website was dingy for 20% of the interviewees.
  5. The slots availability data displayed in the pin code or district search is provided by the state govt and private hospitals. CoWin does not create this data, therefore we cannot guarantee that it is the most recent and accurate data.

Current Successes

There were a lot of compliments and successful solutions on the website. The data was gathered from this source on August 16, 2021.

  1. Avg. Visit Duration = 00:05:42
  2. Pages per Visit = 5.87
  3. Bounce Rate = 29.65%
  4. Though they took a little time, the flows were easy to complete.
  5. The whole site has an accessible and inclusive design.

Problems with Flow

  1. Unable to book the slot due to no availability.
  2. No updates from the site.
  3. Too long processes.
  4. No navigation in the booking flow.
  5. No OTP's during high traffic.
  6. Only 4 members are allowed per mobile number.

The current average household size is 4.4, where states like UP, Haryana, have an average of 5.7, according to this source

Problems with the UI

These problems were observed by me as a designer and a design system enthusiast.

  1. Inconsistent buttons.
  2. The Hindi language text is too small to maintain accessibility.
  3. No consistent icon and illustration library.
  4. No grid-point system was used. The font sizes are diverse and unpredictable.
  5. When logging through mobile, no option to edit mobile number.
  6. No confirmation at the end of the flow on the screen.

Possible Solutions

These are possible solutions to the above problems that I will try out while redesigning. There is no right or wrong here, as that will be determined after the low-fidelity prototypes are created.

  1. Changing task flows
  2. Removing the clutter during the signing up process
  3. Adding navigation
  4. Looking for nearby locations when no slots are available
  5. Providing an alternative if OTP's are not coming
  6. Updating through SMS or email when the slots are available changes in the landing page
  7. Allowing 6 members per mobile number.
  8. Adding micro-interactions
  9. Making a WhatsApp booking bot for easier flow

Design Process

  1. User Personas
  2. Task flow: Current & Proposed
  3. Low fidelity Screens
  4. High fidelity Screens
  5. Challenges and learnings

With the help of the small research conducted before, it was time to start the design process by creating user persona(s).

User Persona

According to the research done before, there were 2 specific personas created.

persona 1
User Persona created to know more about the user perspectives
persona 2
User Persona created to know more about the user perspectives

To make your own user personas like this, check out this free template on the figma community.

Task Flows

The current task flow is represented below

Current Task flow in the live site
Current Task flow in the live site: New User — Booking a slot

Here is the first proposed task flow to refine a few steps but keeping it easy as before.

Proposed task flow — 1
Proposed task flow — 1 — Refining the current flow

Here is the second proposed task flow. This one is entirely different than before. The main solution this focuses on is that people should be able to search for vaccines and slots before signing up/signing in.

Proposed task flow — 2
Proposed task flow — 2— Slot check first, sign up second

I really wanted to do User flows as well. But due to lack of time and no specific team for this project, I decided against it.

Low fidelity screens

It started out with a little sketching to know where we’re going at:

Rough Sketches of the initial screens
Rough Sketches of the initial screens

Then it came down to a super low fidelity design for the structure.

Ultra-Low Fidelity screens
Ultra-Low Fidelity screens

High fidelity screens

The first step to start for turning my low-fids into high-fids was to redesign (edge to edge) all the screens that are in the booking flow of the live site.

This helped me know all the UI inaccuracies and possible solutions. Here are a few screens for the proposed task flow-1:

High Fidelity screens for Proposed Task flow — 1
High Fidelity screens for Proposed Task flow — 1

Notable overall changes in the screen:

  • The button height was increased for better clickability in mobiles
  • Added a 4 point grid system
  • Checked Accessibility at every point and refined the inaccuracies
  • Added consistent icons and illustrations(icon-ish only)

Specific changes in the other screens:

  1. Redesigned the whole Home screen

    • Removed all the clutter
    • Removed the swiping banner
    • Added an emphasis on the buttons for the main user goals

  2. Refined sign-in/registration

    • Added Mobile number edit option
    • Resend OTP option
    • Added Having trouble?
  3. Refined Register new member screen and added ‘enter email address’ for future updates.
  4. Added ‘See in Map view’ tertiary button in the search screen
  5. Refined all the results screen. Also, added a ‘get updated’ card for the selected search.
Refined Home, sign-in, register, search screens
Refined Home, sign-in, register, search screens

After completing this, I went on to my 2nd proposed flow and created new screens for those as well.

Notable overall changes in the screens (apart from the changes done in proposed-1):

  • Flow change
  • New Home screen, vaccine selection, date selection, location selection, and booking screen
High Fidelity screens for Proposed Task flow — 2
High Fidelity screens for Proposed Task flow — 2

Challenges & Learnings

  1. Creating a design system — One thing I’ve learned during this project and during the past year is that I love creating design systems and especially when there’s an actual necessity for them.
  2. I began this project when the second lockdown just ended and this was very close to the problems people have been suffering since the past year due to covid. It made me realize a lot of new perspectives and thoughts.
  3. A real challenge was when everyone was able to complete their user goals and I couldn’t identify what to do next. I think that’s how startups feel when they are just about to pivot. The real answer is to always ask more questions and more people.

That’s all, folks!

If you’re reading this, then thank you so much for sticking to the end. I really enjoyed working on this project.