Categories
Design

DoubtFree

DoubtFree

Doubt solving app that connects school teachers and students in the post COVID world

Overview

With the world moving to remote work due to the pandemic situation, our schooling system is trying to adapt quickly to this new way of life. Teachers are having to connect with their students virtually and look for innovative ways to do so without losing the advantage of a physical classroom setting. For many of them, learning to use technology, while keeping the students engaged is a challenge they have encountered for the first time.

I’ve chosen to just focus on one small feature for this case study – student doubts for teachers. It covers doubt listing, replying on doubts, and doubt resolution.

The intent here is to not add too many features, but to document my process at arriving at the solution. 

Best viewed on a desktop / laptop.

My process

This process helps me keep the user needs at the center of every step. Each step has been explained in the following sections. 

1. Discover
Discovery starts at Google

A quick search on Google made me realize the scale of this problem. Things are pretty serious when you get 108 million+ results on your query.

The results broadly mentioned the various pain points that teachers are facing due to remote teaching – audio and video not clear (happens almost always), slow internet, lack of hardware devices to study on, less one-on-one communication and attention per student, discipline problems, and homework correction hassles. Some were hilarious too! 

Also, a little searching on Facebook, Instagram and other new sites validated the problem further – mostly the same finding as above. But one interesting thing was that students were tagging each other on posts (which had questions, articles, etc.), and then having a conversation there in form of comments and replies.

One of the teachers which I interviewed was a part of one such group and said that they engage in this way as well – by sometimes commenting on such posts, tagging other students and replying to already commented doubts. 

I think this is a valuable insight – students and teachers maybe long for a sense of community around them – just like in the real pre-COVID world.

User research

I wanted to know more about the problems of teachers first hand. Lucky me having two of them in my family. 😉 I recruited them as participants for face to face user interviews. They referred 3 more teachers, making the total count to 5 teachers. I could also manage to speak to 3 students that these teachers taught.

I prepared a set of questions to gain more insights about the challenges that they are facing in post COVID teaching. 

Here’s a quick summary: 

  • The average age of the teacher group was 32 years, and the average age of the students was 13.5 years. 
  • Both students and teachers are motivated by growth.
  • All 5 teachers were female, with varied interests, backgrounds, and low tech familiarity.
  • Teachers were a bit hesitant to try out new tech and online mediums – citing the learning curve as one of the main reasons. Students, in contrast, were open to trying out new tech – they in fact were avid users of latest mobile phones of their parents.
  • Bad quality of audio and video was yet another concern from both sides. Possibly due to slow Internet speeds. 
  • Distribution and collation of homework and answering of doubts was a big concern of the teachers. They find Google docs, drive and email to be really tedious when it comes to collation, checking and summarization. 
Competitor research

For this, I knew the biggest one is forums in massive open online courses. Haven taken lots of MooCs, I had good insights around how they function. 

I still gave them a re-look. Covered edX, Udacity, Coursera, and some WordPress based online discussion forums that I found on Google. They all use the familiar discussion forum pattern (and they don’t re-invent the wheel while they’re at it – which is good). They all are highly advanced portals and I personally found Udacity to have done a good job with their overall visual appeal. 

2. Define
Hypothesis

Based on the above insights, I decided to solve for the doubt clarification problem for teachers. I felt that if it’s done properly, students will get immense value and will become returning users, and the overall product will be a success. (This is assuming we already have good high quality content on the product.)

In this step, we’ll define our problem more concretely. 

For the sake of simplicity, let’s assume the following Venn diagram to be true. All doubts are ideally from home work or course work.

A doubt means a feeling of uncertainty or lack of conviction in the topic that the student is studying. Their first human instinct is to aim for the sense of completion, or in other words, to find the answer for it. They do this either by asking their class friends or the teacher. 

User journey

Ideal user journey for the use case we’re trying to solve. It shows the emotions and the mental state of our teacher persona through emojis.
Personas

Based on the user research, I derived these two personas. these are the actual real world users whom we are solving for. The personas also have additional information about their personality types, their familiarity with tech and internet, their goals and pain points. This will serve as a bible for making user centered decisions as we move forward in the process.

We will be focusing more on the teacher persona going forward.

Problem statement that we’ll solve for

“As a teacher, I want to see all the doubts raised by my students. I want to engage with them, reply to them and solve them for my students.”

3. Design
Information architecture

In the product we  can have 5 different entities as shown below, and a doubt can come from any 3. 

Since we’re only hyper-focusing on doubts for this case study, let’s define what all information and metadata a doubt can consist of. 

The above information can be grouped based on similarity of items.

For example, the question text and replies have a strong affinity towards each other, and can be clubbed in a group. In that same group, items similar to replies can also come. 

One more example can be grouping upvote count and upvote button.

After grouping, we will categorise the groups in 3 buckets – critical, important and not-important

This is done to identify items which are most important for the driver task. The driver task (or the primary task) in this case is for the teacher to solve the doubt of the student. 

For example, the question text and replies is critical information for the teacher to complete the driver task, while the upvote count possible is not because a teacher will have to clarify all doubts regardless of upvote count. 

Ideation + IXD

Based on the above information architecture, if we were to lay down all the information on a mobile wireframe in a flat manner it would look something like this. The critical items have been placed first, then the important, and lastly the not-important ones. 

From an interaction perspective, if we add some more detail to the information and try  to show it a bit more visually, it could look something like below. 

I have thought of two interactions for the page. 

  • In IDX1, the whole page is scrollable and the reply box scrolls up with the replies. 
  • In IDX2, the reply box is sticky at the bottom and rest of the part is scrollable.
I have used familiar and well known patterns for almost all components so that there is minimal cognitive load and learning curve for the teachers. 
 
Here are a few of the screens that were made for the IDX2 approach. They were then tested with users.
Test wireframes & refine

I detailed out both the interaction wireflows and then tested it with a few teachers. The one with the sticky reply bar was more familiar to them and more usable (familiar mental model through using WhatsApp and other messengers). 

One more observation after seeing real-world data was the character length of the question can be longer than what is shown in design. Students can sometimes type lengthy questions as well.

Other observations were on the status change button (resolved/unresolved) – the discoverability of which was low.

I incorporated all of this feedback while creating the visual design. 

AI Testing via VisualEyes

Since I had limited access to users, I tried to use the VisualEyes Figma plugin as well. It’s an AI based user heatmap generator, and here are it’s results. It reports clicks around the chat box area, upvote button and the individual replies, which is as expected. 

The unexpected one is on the doubt text itself, but hey, none of us know the accuracy of this AI. 🙈

4. Deliver
Visual design

In the visual design, the status change button (resolved/unresolved) – has been made more prominent by making it into a coloured switch (since it has only 2 states). This will give it the affordance it needs. 

The font size of the doubt has been reduced so that long text can also be incorporated in the screen.

This visual design fits the need of the teachers, and will help in reducing their pain points when it comes to doubt resolution.

I have used the 8 point grid while positioning the elements, and have tried to be minimal in design because I believe that a clutter free experience is a great experience. 

Here’s the style guide created in Figma which is used for the app. 

Prototype

Embedded Figma prototype below.

Usability testing

Introducing hashtags – the quickest way to express and consume reviews.
Categories
Design

BookMyShow Confirmation Redesign

BookMyShow Confirmation Screen

Re-designing the confirmation screen of India's biggest Movie and Event ticket booking platform

My role

  • User Researcher
  • Usability Tester
  • UI/UX Designer

Skills used

  • User research
  • Usability Testing
  • Visual Design
  • Mockups
  • UX Strategy

Tools used 

  • GIMP
  • Adobe XD

Deliverables

  • Hifi mockups
  • Strategy

Duration

4 days

The Problem

As far as the post-booking experience goes, the booking confirmation page is one of the key user touch points and we’d like to improve the design of this page.

The user sees the movie booking confirmation screen after his payment has been processed and the tickets have been booked. We want to up-sell / cross-sell several relevant things here—the challenge is how to do it effectively and keep the visual noise limited.

Business objective: up-sell / cross-sell relevant things

INTRODUCTION

Post booking idea chart (Flow inspired by BookMyShow's chart)

The post-movie booking experience has a lot of scope for keeping the user engaged with the Product. In the diagram above, a few ways to do the same are shown. We will cover some of them in this case study. 

The goal is to design a more personable and intuitive movie ticket confirmation screen using the principles of user centered design.

Understanding the company

BookMyShow is a event ticket booking platform for users to book tickets for movies, events, plays and more online. Since it’s debut in 1999, BookMyShow’s user base has grown to over 30 million, allowing people from (primarily) all over India to book tickets for any of the 5000+ screens that they’ve partnered with. An average of 15 million tickets are sold on the platform per month, and to keep with its ever growing presence, BookMyShow is constantly innovating creatively to push its mission forward. 

Research

User Research Interviews

Before I began the redesign, I conducted interviews with 30 users to get a better understanding of who I am designing for. 

What does a typical BookMyShow user look like? What are their reasons for using BookMyShow and what keeps them coming back? 

These interviews were conducted via a Google form, and for some users who had the time, the conversation extended till WhatsApp chats and phone calls.

Target audience demographics

Age demographic

Among the 30 BookMyShow-ers that I interviewed, there were 22 males and 8 females. The average age ranged from 21 to 44, with most concentration around 27. Almost all of them are employed and have a steady source of income. 

To make this even more interesting, 66% them did payments online more than 5 times per week! That’s a hell lot of transactions. 

Movie payment mode demographic
Online payment frequency demographic

Most of them use the BMS mobile app and 67% use the platform for checking prices and booking tickets for themselves and groups of people. Only 13% use BMS on a desktop. 

BookMyShow feature usage demographic

I asked the 30 BookMyShow-ers I interviewed to describe BookMyShow using 3 adjectives. What do they think about BMS? How does it make them feel?

A total of 54 adjectives was collected.

Top 3 adjectives used: Easy, Convenient, and Fast.

I also asked a few subjective questions on how frequently they paid online, and what do they do in case a transaction did not go as they had intended. Majority of the people responded that they look for the “https” secure sign before they make any payments. 

In case the transaction did not went through due to some issue with the product/service, users ended up feeling frustrated and irritated. But they were willing to re-try the transaction if it was a connectivity issue on their end. 

What people do right after booking tickets:

  • For successful transactions, they just wait till showtime. Most of them download their tickets right then-and-there, and also forward it to accompanying persons. 
  • For unsuccessful transaction, they retry the payment by going through the whole long process again. This was a pain point that I discovered. 

What people do when they reach the venue of the event:

  • Show the ticket SMS or QR code and get entry. 95% of the times, this is done via their smart-phone. It is a fair assumption to make that the user will have a smart-phone and use the same to show ticket info at the venue. 
  • For users who have lost or deleted the SMS or WhatsApp message, they either reopen the BMS app and show the details from there, or search & show it from their email. Most users did not know exactly what they would do and reported that they will search Google for the same. 
  • To solve the above point, we can use great design to onboard users to use the newly developed Movie Mode.

Design

Part 1 of 3:
Confirmation screen visual design

Let’s take a quick look at BookMyShow’s existing movie booking confirmation screen. 

Existing confirmation screen. We can see asymmetry of layout, and no specific call to action.

The layout presents what is required for a user at this stage, but there were a few problems that I noticed.

Problem #1: Proper use of screen real estate

On a desktop, we have tons of real estate (viewable screen area) which can be used to present an experience which delights the user. The confirmation screen is a touchpoint where the feeling of “delight” can go a long way.

Think about this – you go through the whole process of movie booking, with your whole concentration, and in the end you get something that does not delight you. 🙁 Sad, right?

The existing confirmation screen has a very basic and a bit outdated layout when compared to other screens in the BookMyShow platform. The layout is left aligned, which leaves a lot of whitespace towards the right. 

Redesigned dsktop confirmation screen. Notice the center alignment, and purposeful and specific call to action steps below the ticket.
Redesigned mobile confirmation screen. Notice the card layout inspired by the modern design BookMyShow uses in their new Movie Mode.

In the redesign, all content is center aligned to even the visual experience out. A huge ticket is shown in the middle, which keeps the standard BookMyShow type branded background layout. The edges of the ticket are same as the ones in BookMyShow’s logo. 

The payment success thank you message is displayed on top in green color. Aiming towards minimalism, the old card type green box has been discarded. A green shadow has been added to the ticket which subtly adds to the payment success vibe.

The ticket viewed on a desktop. Notice the green background shadow, big seat numbers, and branded bar-code.
The ticket viewed on a mobile. Notice the green background shadow, big seat numbers, and minimal barcode to save space.

The amount charged is mentioned where it already was (updated with the new Indian Rupee symbol), but the “Amount Paid” label and the “Payment mode” text has been brought close to the amount. As before, it will show amount breakdown when clicked. 

The Audi and Seat numbers are closer together and shown in a big bold font, because this is one of the key things the user would need to know.

Metadata and meta commands moved to the top right corner of the ticket. Plus the new swaggy QR code 😀

The best brands make a bold statement in all areas of their business. Keeping that in mind, the bar-code for booking ID has been redesigned with BookMyShow’s brand logo in the center. This is similar to the ones WhatsApp uses for their business. 

Problem #2: No user contact info & CTA to user profile

Existing success message.

The existing confirmation success message is a green box at the top of the screen. Use of green is good – denotes success, but the body text of the message adds no real value to the user. 

Redesigned success message with important meta info and call to action.

In the redesign, the word “profile” will be a link to the user’s BookMyShow profile page, where they can further interact with the product and offers. The word be underlined and will be clickable on mouse hover. 

Similarly, to add more personalization, the email and phone number which the user entered before the payment can also be displayed as shown above. This serves two purposes – one, it makes the user verify their entered details, and second, it allows the user to make amends if they accidentally entered the wrong information. 

Right below this, we have options to resend the ticket information or to edit the contact information. The edit option can also be a way to onboard a guest user to create a BookMyShow account.

Problem #3: Main buttons should look "main"

Existing buttons on the page.

While designing buttons, a common UI pattern is to have a grey text color on white background – which means that the button is in “disabled” state. 

The existing buttons on the page look like disabled buttons. They have color differences between the button icon and button text. They also do not lead the user to perform any of the action, since all are of the same style and color. A primary call to action should be of a different color than the rest of the buttons. (Which will be primary will depend on business priorities)

Redesigned buttons with one primary and one secondary action.

In the redesign, I took inspiration from what BookMyShow is currently doing in Movie Mode and used the same button styles and colors. The blue color is heavily used throughout the booking flow as well, so it would be a familiar color for the users. 

I took care to have a primary button (colored blue) for each use case. For example, as shown above, assuming correct contact details were entered by the user, the primary action that they would want to perform would be to re-send the booking confirmation details to them. 

Buttons used elsewhere on the page also follow the same principle. (Which will be primary can change depending on business priorities.)

Part 2 of 3:
Handle Payment Failure Case

The existing screen shown on payment failure. Cramped up UI elements, and hidden support numbers increase frustration of the user.

Points of failure in the system are the points where the real test of our user’s patience comes in. A common point of failure is the payment feature – where due to a truck load of reasons like connectivity, bank errors, etc – the payment might fail. The existing failure screen is just put in for the sake of it and leads to poor overall user experience. (The research data confirms this – users are frustrated when failure occur.)

Redesigned payment error screen on desktop. Oops adds the omph!
Redesigned payment error screen on mobile. Oops adds the omph here as well!

In the redesigned failure screen, there is a minimal illustration of a broken ticket (which adds to delight, even though the situation is not so delightful), and only relevant call to action buttons. 

To increase customer experience, it would be great to include links to customer support options like phone number support or a live chat support (intercom, talk, etc can be used). 

Feature: Continue booking where you left off

Continue booking where you left off experience on desktop. Unobtrusive, yet visible.
Continue booking where you left off experience on mobile. Unobtrusive at the bottom of the screen.

In case of a failed payment or connectivity issue, this feature can come in handy for increasing user satisfaction. The way this may work is by saving the booking state in the browser. When the user comes back to the site, a small prompt at the bottom will hint the user to resume the process. This will be really helpful for failed payment issues. 

Part 3 of 3:
Secondary Actions

Existing offers displayed on the confirmation screen.

This is the existing offers section that shows up below the ticket. It has no order associated with it, does not look engaging, and does not have a clear flow or call to action. 

Redesigned offers displayed on the confirmation screen.

The secondary actions show up right below the movie ticket. They are listed in form of modern cards that help the user to go through them in an easy flow. There can be multiple cards, and each card can have a set of primary and secondary actions, and the cards will be ordered according to business priorities. A card can be replaced by a sponsored advertisement as well. 

Suggestion #1: Onboard on the new Movie Mode

In the research I did, I found out that there is a new Movie Mode feature introduced in the BookMyShow app that aims to significantly improve the movie watching user experience. I feel that onboarding new users and guests to the mobile app would be a good business strategy, and therefore the first card in the secondary actions is of the Movie Mode. It gives a small summary, combined with an illustration and a clear call to action to send the app link to the users already entered mobile phone number. 

Suggestion #2: Promote SuperStar program

A card gives a teaser of the Superstar program. The aim here is to get users to do multiple bookings for them to be considered for an invite to the program. Thus, the call to action here is to lead the user to go and do one more booking. There is a secondary “Know More” button that will show he benefits of the program in a popup. 

Suggestion #3: Invite friends and split booking

The last card in the flow helps the user to share the booking details with accompanying persons (friends/fam). There is only one call to action here, and it will open a popup which will ask for names contact details of the people. 

This card is palced last, because in my opinion it would be better to send a new user to download the app from where the same functionality is already inbuilt in Movie Mode.

These were my observations and solutions. 

Conclusion

Next Steps

Next steps would be to test and see how these concepts fare in the hands of more users. Testing for success and efficiency would be a usability test of a prototype, which could measure how long it would take for Clients to complete the whole booking process.

Next iterations would also work through more edge cases. Some examples:

  1. UI tweaks. Refining the colors, fonts and layouts of elements. 
  2. Better analysis based on bigger user research. Finding out more pain points during the last steps of an online transaction and formulating solutions.  
Lastly, a collaboration with UI developers will make this design a reality. 

Thank you for patiently reading!

Your email stays private. Privacy Policy.

Categories
Design

Stanza Living App Home-screen

Stanza Living App Home-screen

Branded and illustrative redesign of Stanza Living mobile app home-screen

My role

UI/UX Designer

Duration

1 day

Skills used

  • Visual Design
  • Branding

Tools used 

  • Adobe XD
  • Photoshop

Deliverables

  • Hi-fi mockup

The TASK

Stanza Living is a provider of branded and state-of-the-art co-living spaces. Their mobile app is used by ‘Stanzens’ to order food, check in/out of their room, sort payments, raise complaints, and more. This project aims to redesign just the home-screen of the app, keeping the most important functions accessible to the user. 

DESIGN

Home screen - Day

  • The screen background shows a bright and lit picture of a Stanza Living work desk area. This is symbolic to making your day bright and full of productivity.
  • Shows current check-in/out status and allows a Stanzen to toggle that using one click. On the backend, we can have a centralized system that auto locks and unlocks doors for the Stanzen. This functionality would be password, PIN or fingerprint-lock protected.
  • Depending on mess timings, it shows a shortcut to either breakfast menu or lunch menu. The next screen would show the full menu, which would again be minimally designed with picture illustrations, bold fonts and colors. 
  • There are options to chat/call with support, and options for checking payment status. Payment screen can have options to link with card or Wallet, and will provide a centralized interface to pay dues for rent, food, laundry, internet, etc.

Home screen - Night

  • The screen background in this case shows a dark and dim picture of a Stanza Living bed. This symbolizes that it is sleep time. 
  • In the context of night time (say post 8 PM), the check-in toggle will contain additional relevant options. These will open once a Stanzen clicks on the small arrow that is shown at the bottom right of the toggle.

Home screen - Night - Nightout

  • When a Stanzen clicks the small arrow on the check-in/out toggle post 8 PM, two additional options will open: Late Entry and Nightout.
  • These additional options will open in different screens and will have their own flow. 

Side note: I do not work for Stanza Living, and the designs from this case study are strictly my own. Unlike the designers who work at Stanza Living, I don’t have full access to all the user data that influenced their current design. As a result, this design is not exhaustive, and I am certainly not suggesting that Stanza Living abandon their current design and adopt my redesign.

Your email stays private. Privacy Policy.

Categories
Design

Internshala Signup Redesign

Internshala Signup Redesign

Branded and illustrative redesign of Internshala signup page

My role

UX Designer

Duration

1 day

Skills used

  • Visual Design
  • Branding

Tools used 

  • Adobe XD
  • Photoshop

Deliverables

  • Hi-fi mockup

The TASK

Internshala is one of India’s largest internship discovery platforms. Before a student can apply for an internship, their user account (aka profile) is needed, and a signup page is typically used for that purpose. The aim of this project was to make the signup page more usable, aesthetically appealing and within brand guidelines of the company.

Business objective: Get more signups.

DESIGN

Side note: I do not work for Internshala, and the designs from this case study are strictly my own. Unlike the designers who work at Internshala, I don’t have full access to all the user data that influenced their current design. As a result, this design is not exhaustive, and I am certainly not suggesting that Internshala abandon their current design and adopt my redesign.

The old design – out of line with brand colors, and outdated UI elements.

The new design – featuring an illustration with the Internshala paper plane, signifying what the platform helps us do. Also notice the use of brand colors and modern form UI elements.

Your email stays private. Privacy Policy.

Categories
Design

Re-designing starclinch.com

starclinch.com

Redesigning India's biggest Artist and Entertainer booking platform

My role

Sr. Creative Strategist

Duration

4 months

Team

CTO, Product Manager, php Engineer, Graphic Designer, Interns

Skills used

  • User research
  • Visual Design
  • Mockups
  • Wireframes
  • UX Strategy
  • Prototyping
  • Testing

Tools used 

  • Photoshop
  • NinjaMock
  • WordPress
  • WooCommerce
  • CSS
  • php
  • Integromat
  • Zapier

Deliverables

  • mockups
  • style guides
  • webpages
  • site-map

The Problem

StarClinch is India’s biggest Artist & Entertainer booking platform with a lot of A-list Bollywood celebrities onboard. 

Poor products can be a barrier to a company’s success. Any why reinvent the wheel when we can use the best tools available out there to solve our problems?

A lower turnaround time is crucial for customer retention, and a CMS is needed in place for quicker updates to Artist profiles. 

Without a system, it is impossible to give high user satisfaction and get increased revenue. The aim of this project was to redesign the whole online product aiming to improve the UI and UX

Business objective: Get more daily leads, Reduce TAT

Research

User Research (Personas)

When I had joined, StarClinch already had users defined into two types: The Artist, and The Client. 

"The Artist"

”Stage gives me a high – a high stronger than any drug in the world. I want to perform in front of audiences regularly, and earn decent money through those gigs. I an definitely considering to turn my art form into a full time career.”

The Artist. aka The Entertainer or The Talent. 

They are true connoisseurs of their own art form. StarClinch had identified 14 different categories for these artists, and each category had further subcategories. – making the categorization of talent really granular. 

Any new artist that was on-boarded will definitely fit into some sub-category. An Artist is looking out for as many gig opportunities (aka events where they can perform) as possible, and wants to make the maximum money from that gig. That’s why we did see some Artists’ with really inflated performance fee. 

"The Client"

”Shit shit shit shit. My event is coming up in a few days, and I need something to spice it up. I want to book or hire the best talent or performer for my event. I’m in a hurry so tell me fast and keep my budget in mind.

The Clients – the real users of the platform – i.e. the ones who come to the site and submit their event details and what they are looking for. Since they are in a hurry, and need diversity in terms of performers and rates, they probably are submitting their requirements on 10 different event sites simultaneously. 

Subtypes: Event Managers, Corporates, College Campuses, and individual people. 

70% of them come via mobile. Their use case might just be finding and booking the Artist, and most of the time, they themselves might not be in the audience for the actual event – so they want to see the performance of the Artist beforehand maybe via video/audio.

Eg: A company HR that books an Artist for a Product Team cultural dinner. The HR will not be present in the actual performance of the Artist. 

Given these two user types, I as part of their team, probed further into gathering the needs and problems of the Artists and Clients. We read all communication that Artists and Clients were sending us – some of them even had complaints, some had new feature requests. 

We interviewed Artists and Clients on an ad-hoc basis – whenever someone contacted us regarding anything via any medium (mostly email/call), we probed further by asking relevant questions about their problem and took notes. By asking questions like, “Where do you get stuck in the process,” “Walk us through the last time when you booked an Artist,” we were able to nail down user behaviors, needs, and goals and refined the user types mentioned above.

Competition Analysis

I also took a quick look at some of the apps and websites that the team at StarClinch had mentioned:

GigSalad, BookArtisto, PartyMap, EventFAQs, Jilmore – all of them have almost the same functionality as StarClinch.

We needed a differentiating factor

USER FLOWS

User Flow / Customer Journey

User and Information flow. The 3 persona types are highlighted.

I came up with a list of general requirements for a used books marketplace app and started to work through a user flow of buying a used book.

The structure will be like a typical online e-commerce marketplace app, as defined in the next section.

The Buyer would want to check the condition and price of the book, and will make a positive decision if the Seller is geographically closer. The Seller will want to make profit, and ensure that their ad is discoverable to Buyers. 

 

Payment Logistics 

I researched two ways that are tried and tested in the current market: 

  1. Direct peer to peer payment using cash or direct wallet transfer (like OLX users do)
  2. Amazon like escrow payment model, where the marketplace sits as the third party between two parties and withholds/releases payments when goods are delivered.

To keep things simple and to keep focus towards the app experience, I decided to go with option 1. 

 

Delivery Logistics

Once the payment logistics choice was made, the only feasible delivery logistic is that the buyer and seller actually physically meet at a geographically convenient location, and trade the book and payment. The chat interface aids in doing this by presenting short-cut text messages that the user can simply tap and select.

App Flow and Features

App flow for Buyer
App flow for Seller

The above chart shows a tentative app flow and the process by which a buyer can shortlist and buy books, and a seller can post books that they want to sell. 

 

App Features

The structure will be like a typical online e-commerce marketplace app, with screens for – login/signup, onboarding, search page, search results, product collections/categories, product, seller listing, and a chat interface instead of a cart. The app will also have an interface that allows users to post a free ads about a book that they might have to sell.

Rather than showing a gazillion different ads about the same book to the user, the app will have only one product page per book which will list the available sellers for that book on the same screen. The app will show the condition of the book and the price offered for each seller that is selling the same book. This is done to avoid cluttering of the marketplace, and leading the direction of the marketplace towards a book information community. 

Design

The design involved making UIs that improved the overall product UX and strategy. 

Product / Web-app Redesign

The earlier StarClinch was built off on legacy PHP and Microsoft stack. It did not have an efficient CMS for quick updates to profiles and pages, nor did it have the very best of UI elements. Everything was just put together using superglue to make it ‘just-work’. 

The earlier version of StarClinch. It had a single button in the hero section, and showed all the 14 categories of Artists in the form of clickable icons at the bottom of the hero banner.

The earlier StarClinch was built off on legacy PHP and Microsoft stack. It did not have an efficient CMS for quick updates to profiles and pages, nor did it have the very best of UI elements. Everything was just put together using superglue to make it ‘just-work’. 

The redesign. Better CMS allwed drag and drop functionality for build web-pages, and had better UI elements. Pictured here, we see the search bar and just the top 5 Artist categories linked below that.

My philosophy is “Why reinvent the wheel?”.

I showed the team how an off-the-shelf CMS can be a better alternative for the overall product strategy. The CMS was a popular PHP based CMS which allwed speedy updated to Artist profiles, and pages on the website. It also automated handling the SEO. 

Reducing Turn-Around-Time

StarClinch was using email as a method of communication with Clients and Artists. It had a really poor turn around time of 48 hours. Sometimes the delays were caused at StarClinch business team’s end, but most of the time it was at the Client end. This was due to delayed initial response from StarClinch. The Clients submit their query at multiple platforms and websites and the one which reaches out to them first, is the winner in closing the deal. 

To improve the TAT, we designed an interface that allows Clients to shortlist suggested artists quickly, without the hassle of going through long chains of email. 

Make it easy to Capture Leads

StarClinch was using a traditional form coded in jQuery to capture leads. The design was not responsive, 2005-ish, and animations were sluggish. Sometimes, on slow mobile data connections, it used to hang up while on the submit screen. This was resulting in drop-offs and missed leads. 

I designed and coded a new form interface which was light weight (faster 1st paint, and load times), responsive (usable on any device screen size), and visually looked minimal and clean (improved UX).

We replaced this form with a conversational chat-bot for more than a week, but it did not go as planned.

Artist Availability Calendar

StarClinch was manually contacting Artists for their availability and rate every time a new Client query used to come in. This was a huge effort on the small in-house business team that they had, and resulted in bad TAT to Clients (in case the Artist wasn’t immediately available to take their call).

To solve this I came up with a simple responsive form that Artists can use to pre-fill their availability, rates and other important information. Artists could fill the dates that they are available till the next 6 months. 

These were the basic point-of-contacts that helped improve the product performance and experience. 

RESULTS

Before Redesign

1
LEADS / DAY
1 hrs
TURNAROUND TIME
1 k
MONTHLY TRAFFIC

After Redesign

1 +
LEADS / DAY
1 hrs
TURNAROUND TIME
1 k
MONTHLY TRAFFIC

Conclusion

Next Steps

Next steps would be to test again and see how these concepts fare in the hands of more users. Testing for success and efficiency would be a usability test, which could measure how long it would take for Clients to complete the whole booking process.

Next iterations would also work through more edge cases. Some examples:

  1. UI tweaks. Refining the colors, fonts and layouts of elements. Some design decisions were made in haste, because the team wanted the product live as soon as possible. UI customizations will need to be done on top of the existing CMS theme via CSS. 
  2. Better Filters. More research and testing on UI patterns for Filter interface on the browse page. How can we better enable Clients so that they find the Artist within their criteria? 

Thank you for patiently reading!

Your email stays private. Privacy Policy.

Categories
Design

Buy & Sell Used Books

Buy & Sell Used Books

BookBuddies: A mobile app concept for buying and selling used books

My role

UI/UX Designer 

Duration

3 days

Skills used

  • user research
  • competitive research
  • personas
  • product strategy
  • visual design
  • wireframes
  • hi-fi mockups
  • testing

Tools used 

  • Pen & paper
  • Adobe XD
  • Photoshop
  • InVision

Deliverables

  • Wireframes
  • Hi-fi mockup
  • App prototype

The Problem

We want to design a new app that helps millennials to be well read while keeping their pockets in mind, and also allow them to sell their books that they don’t need anymore via the same platform to the ones in need.

Many people love the actual look and feel (and even the smell) of physical books. Most exam textbooks and coursebooks are a one time read, and are published on an yearly updated syllabus – rendering them outdated after 1 to 2 years. On the other hand many people cant afford to spend so much on brand new books.

Don’t waste a book after reading once, share it!

Why not design a platform/marketplace that connects the two sides and creates a win-win situation?

Business objective: Get more conversions, Simplify delivery logistics

Research

Assumptions and Constraints

Book sharing apps come in various shapes and sizes. I chose to design for a native iOS app in which users can post information for their used books and can also browse and buy used books posted by other users. 

I decided to go down this route, hypothesizing that users are more inclined to download and use a mobile marketplace app with a database of many books with equally many seller options, much like Amazon, than a haphazard marketplace like OLX.

  1. Assume that the process of buying a used book is part of a greater “advancing my career” experience. Choosing used books over new ones simply might not be the cup of tea of some users. 
  2. Since books, novels, and coursebooks are ubiquitous, assume that there is diverse variety of books in any given locality. This makes book owners geographically close to each other, and hence un-complicates delivery logistics.
  3. Assume that the users who would use a mobile marketplace app are technologically savvy and familiar with existing patterns around popular marketplace apps. Conduct a quick audit of familiar marketplace app patterns.
  4. Assume that the marketplace app makes money from sales done from their app. Design should make the overall experience of buying used book as easy as possible and result in increased conversions.
  5. Assume that a business goal is retention. Design should make it rewarding for users come back and use the app again by reducing cognitive load (e.g. saved searches, meaningful defaults, pre-filled forms, etc.)

Guerrilla User Research (Personas)

Listing assumptions uncovered some questions I needed to learn from users. For example, I assumed that most people don’t prefer used books over new ones. But did they really? 

I quickly interviewed 4 people (friends and family) I knew who read a lot and have used apps to buy books and other products online. Asking questions like, “Walk me through the last time you bought a book,” “How and why did you buy a used book,” and “Explain what do you do with books that you don’t need anymore,” I was able to nail down some user behaviors, needs, and goals and synthesized them into user types below.

I came across two types of book connoisseurs: The Novel Lover, and The Exam Preparer. (I’m assuming the Casual Researcher lies in between these two personas.)

"The Novel Lover"

”Once I have a novel in mind, I rush to the nearest Oxford Bookstore or Crossword Store to grab a copy of it. I love the fragrance and the feeling of holding a real physical copy in my hands.”

The hard-copy lover. Typically they always buy books from the same bookstore that they trust. They either call or search the catalog of the bookstore before they go and buy the book. They like collecting physical copies of books and are less likely to share them as used books because of the emotional attachment they develop towards books. 

If they need to buy used books they go to local “book-mandi” market. For example, Chawri Bazaar, Chandni Chowk in Delhi. If they do need to get rid of some old books, they either donate them to a local library, or hand them over to a friend. 

They need to examine the condition of a book before they buy it. Damn, perfectionists! 

"The Exam Preparer"

”I need all kinds of study material available to me, or else I can’t pass this exam.  I will borrow them from friends, and get them photocopied. Or simple yet, I’d buy a copy of them from the market. “The kunji” with previous years solved papers will make me pass this exam quickly and I need it.”

They need hard copies where they can mark and solve questions, and do rough work. They ask for advise from their friends or college seniors as to which study material they should take. If they need to get rid of the material, they typically call a kabaadi-walaa.

They need a sense of trust on the seller, and (dead) cheap rates for used study material.

Competition Analysis

I also took a quick look at some of the apps and websites that users had mentioned:

Book listing and 'post your ad' feature on Amazon.in.
Book listing and chat feature on Quikr
Book listing and book detail page on OLX. The sticky call to action is good design.
Other competion websites. They have a poor product with many UX flaws.

A quick review of the competition gave me an inventory of existing mobile patterns, strengths and weaknesses to begin brainstorming designs for these different types of users.

REQUIREMENTS / USER FLOWS

User Flow / Customer Journey

User and Information flow. The 3 persona types are highlighted.

I came up with a list of general requirements for a used books marketplace app and started to work through a user flow of buying a used book.

The structure will be like a typical online e-commerce marketplace app, as defined in the next section.

The Buyer would want to check the condition and price of the book, and will make a positive decision if the Seller is geographically closer. The Seller will want to make profit, and ensure that their ad is discoverable to Buyers. 

 

Payment Logistics 

I researched two ways that are tried and tested in the current market: 

  1. Direct peer to peer payment using cash or direct wallet transfer (like OLX users do)
  2. Amazon like escrow payment model, where the marketplace sits as the third party between two parties and withholds/releases payments when goods are delivered.

To keep things simple and to keep focus towards the app experience, I decided to go with option 1. 

 

Delivery Logistics

Once the payment logistics choice was made, the only feasible delivery logistic is that the buyer and seller actually physically meet at a geographically convenient location, and trade the book and payment. The chat interface aids in doing this by presenting short-cut text messages that the user can simply tap and select.

App Flow and Features

App flow for Buyer
App flow for Seller

The above chart shows a tentative app flow and the process by which a buyer can shortlist and buy books, and a seller can post books that they want to sell. 

 

App Features

The structure will be like a typical online e-commerce marketplace app, with screens for – login/signup, onboarding, search page, search results, product collections/categories, product, seller listing, and a chat interface instead of a cart. The app will also have an interface that allows users to post a free ads about a book that they might have to sell.

Rather than showing a gazillion different ads about the same book to the user, the app will have only one product page per book which will list the available sellers for that book on the same screen. The app will show the condition of the book and the price offered for each seller that is selling the same book. This is done to avoid cluttering of the marketplace, and leading the direction of the marketplace towards a book information community. 

Design

Lo-fi Wireframes

Here are some of the wireframes that I created. 

Hi-fi Mockups

The final mockups incorporated all of the above research and give the vibe of a marketplace with thousands of books. 

Book details screen. Notice the various seller options aggregated in one place.
Chat screen. The quick replies make it easier for both parties to break the ice and have efficient communication.

In the chat screen, as a nice usability feature, I thought to add ‘quick replies’, which enable the Buyer and Seller to break the ice and have a conversation that leads to the closing of the deal.   

InVision Prototype

I assembled all the hi-fi mockups into InVision and made a working prototype of the app. This gave an almost realistic experience to the users with whom I tested the app. Their feedback was noted and it would help me refine the app further in the next design iteration. 

Meanwhile, check the prototype out yourself:

I quickly iterated based on both user feedback and design critiques. While creating the hi-fi mockups, the focus was on the details and UI design. For example, users said, “Book images are the first thing I look at and want to see.” 

The thumbnail icon in my lo-fi wireframes before felt too small. In my final mockups, the search results included wider image sizes and the pricing located right beneath. Adding in real imagery also helped reassess UI decisions.

Conclusion

Next Steps

Next steps would be to test again and see how these concepts fare in the hands of more users. I’d remind myself of the original goal:

We want to design a new app that helps millennials to be well read while keeping their pockets in mind, and also allow them to sell their books that they don’t need anymore via the same platform to the ones in need.

Testing for success and efficiency would be a usability test, which could measure how long it would take for users to buy a book, how successful they are in choosing a specific book based on the specified condition.

 

Next iterations would also work through more edge cases. Some examples:

  1. Seller interface. An efficient way in which a seller can post information about a book that they want to sell.
  2. Buyer Seller logistics. More research and testing on UI patterns for Seller interface and chat interface. How can we better enable both the parties so that they can meet safely and have a hassle free transaction? 
  3. Empty search results. For example, if the user has searched for an obscure topic or author that has hardly any books. What would happen? Possibly we can add a feature for ‘request this book’?

Final Thoughts

I was surprised to learn that the users I interviewed honestly don’t use mobile apps to buy used book. Buying books, be it new or used — this behavior falls into a mental model of “career advancement.” 

Users in “career advancement” mode need to review information in detail, deliberate with other stakeholders, research and read quality content over time. It makes sense why most users will defer to manual bookstores vs. apps.

Do mobile bookstore marketplace apps design for behavior change or not? That is the question! 

In this exercise, I chose to design for existing behaviors. I learned that the best value a mobile used-book marketplace app can provide currently is during the initial browsing and curation phase of a user’s entire career advancement experience. However, I’m excited to see how our needs may change as we develop new behaviors around used books in the future.

Thank you for patiently reading!

Your email stays private. Privacy Policy.

Categories
Design

Conversational UI: Does it really deliver?

No ‘Hello from the other side’

A GIF of Anushka waving hi

Anushka here was the name given to our conversational chatbot (powered by Landbot.io). These type of chatbots have gained too much popularity recently with services like Landbot, Intercom, etc on the rise.

Conversational UI chatbots are being touted as the next big thing for the last 3 years. We understand the importance of a chat UI and we started with Intercom.io, which was a huge step forward in the right direction for engaging our hurried audience on starclinch.com.

StarClinch is India’s biggest Artist and Entertainer discovery and booking platform with over 60 queries coming in every day for booking or inquiring about one of our 17000+ artists. We take such queries through our Post Your Requirement (PYR) form, which is just a vanilla form with decent UI.

Our existing Post Your Requirement form which had a jQuery slider
Our existing Post Your Requirement form

Like every company that’s in the growth phase, we decided to try something different so that our conversion rates increase.

It was about time that we spiced things up! 🌶

The new Landbot form that was conversational

Our Post Your Requirement form was retrofitted in a conversational interface in Landbot.io, and it was live on our website right at the top, on the most prized real estate. Only on desktop because we could not make its UI work for mobile. For mobile, it needs to be the only thing on the page so as to avoid weird auto-scrolls on the onscreen keyboard open.

And so, for the next 15 days, came the rise of Anushka.

Before after of the main hero section of the website - one with a basic image button and one with the landbot conversational interface

With a weekly traffic of 10,000 unique page views, we did expect some of the visitors to use or interact with the Landbot interface. Only some did.

Metrics of landbot after we ran it for a few days
Metrics after 15 days

Over the 15 days, a total of 77 conversations happened with Anushka, out of which 33 people gave in their email address, and only 5 people completed the whole conversation till the end. That is a conversion rate of only 6%.

6% is very very counter-intuitive to the type of conversion rates boldly hypothesized by Landbot.


Comparison: Landbot Form vs Our Traditional Form

Over 15 days, Landbot brought us 5 leads, while our vanilla PYR form brought us 47 leads
Over 15 days, Landbot brought us 5 leads, while our vanilla PYR form brought us 47 leads

Insights: Fleeting Audience 🏃🏻

Why such a skew with conversions you may ask?

The realization came to us much later on when we dived deeper into the mindsets of our target clientele.

A person who comes for booking an Artist or an Entertainer is in a rush. They want someone to fulfill their requirement immediately. God knows, maybe they are also putting their booking requirements on some other Artist booking website.

Seeing a slow moving chat interface, with no indicator of progress is a subtle threat to them. They fear it. They don’t have time for it. Simple.

This type of audience is known as fleeting audience, and they will fear using anything that they have not seen before.

All our audience expected was a simple one pager form where they could submit their requirement, and we reverted back to our normal homepage after these 15 days.


Should we have used a bot in the first place? Intercom spent an year and a half to make their operator bot and they ended up with a lifeless bot that, well, does its job. We learned our lessons, and we hope this analysis helps you to better target your type of audience.

You can still experiment with our Landbot interface here and let us know if you can find what we did wrong?

Click on this link and start the conversation. 💬⚡️


We are not discouraged. We will soon be releasing a new chatbot on Facebook Messenger which is the Mecca of all chatbots. The results will be shared here.

Stay tuned!


Originally published on the StarClinch blog.


Your email stays private. Privacy Policy.

Categories
Speaking

Club Officer Training – Vice President of Public Relations

VP Public Relations Training

Training slides for Toastmasters Club Officers Training Program

My role

Trainer

Duration

1 day

Skills used

  • Visual Design
  • PR Strategy
  • Communication & presenting

Tools used 

  • Google Slides
  • Photoshop

Deliverables

  • Presentation

The TASK

To train groups of 30+ Vice Presidents of Public Relations with the best practices of Public Relations being followed in Toastmasters International and District 41. 

Business objective: Motivate officers to follow Toastmasters International branding guidelines.

Categories
Design

Creative Posters for Toastmasters

Meeting posters


Award posters


Club Officer Training Posters


Happy Birthday Posters

Categories
Design

Inclov Mobile App Alternate Design Prototype

inclov android app redesign prototype 1
inclov android app redesign prototype 2 bigger profile photos
inclov android app redesign prototype 3 true inclusivity
inclov android app redesign prototype 4 accessible chat

Your email stays private. Privacy Policy.