UX Case study: Redesigning OYO wizard for better conversion.
This study talks about the resulting process we followed in a 48hr hackathon, redesigning the experience for the Oyo wizard loyalty program resulting in increased conversion.
UX Designathon, July 2022
Overview
Recently, I took part in a UX design hackathon organized by @ux.anudeep. It started right from fighting for the topic, breaking the problem statement, interviewing real users, ideating, wireframing, designing UI, again testing, iterating, documenting the process, and presenting everything in 10 min video presentation. All this in just 48 hours!
Problem Statement
Evaluate the loyalty program (OYO wizard) flow of OYO, from the Home screen, and Wizard plans to the checkout page, and redesign the experience while identifying opportunities to make usability better.
Business metrics- Increased conversion.
Targeted audience- Unmarried people under the age of 30. Fragile, Fear of missing out, spontaneous and social validation.
Reasons to pick the problem -
- We were not unaware of the Oyo wizard feature, so it was intriguing to work on.
- The business metric provided to work on was new to us and seemed challenging and thought-provoking and required us to understand the business model, therefore we came to that we should work on this statement.
- As a team, we realized that we have different skill sets and felt that we would all be able to cater to this problem statement in a very strategic and collaborative manner. We had different takes on various aspects which made it more interesting
Plan of Action
We knew we had a lot on our plate so we decided to make a Plan of action. Making a plan before approaching the problem was really crucial, so quickly we came up with our key strengths and weakness. Finally, we came up with a plan of action with time to complete the action.
My Role
I was very excited about this hackathon for a very long time. So when it was announced I was ready to give my 100% and was present in almost every phase of this project.
- I contributed the most by performing heuristic and intuition-based evaluations, building hypothesis statements,
- Defining targeted users, preparing a screener for Primary Research, arranging users for interviews, interviewing the users, and extracting key insights.
- Preparing HMW, ideating, wireframing, developing UI, usability testing, collecting the insights, and executing the feedback from usability testing into the Final UI.
- I was also responsible for preparing graphics for the presentation and documenting the ongoing progress on the notion.
Everyone contributed during the whole process some stepped up where they felt they had more experience and skill sets. I was present for the discussion during the whole process while I stepped up where I felt I had more experience and skill sets.
Selection and Study of Flow
We started off with studying and identifying the different flows for finding the wizard plan in the app. Following are the three flows we identified.
Flow-1: Homepage → Click on All new wizard banner→ Choose Wizard plan→ Payment
Flow-2: Homepage → Click on hamburger menu→ Click on Become an Oyo Wizard Member→ Choose Wizard plan→ Payment
Flow-3: Homepage → Click on any Wizard hotel from recommendations→ Scroll to payment details→ Click on Add Wizard Membership to save extra banner → Choose Wizard plan→ Payment
“We decided to work with flow 1 and improvised on it as it was on the home page of the app which is by default the first screen when we open the app hence seeing it on the first screen is useful to increase the Average Order Value.”
Problems identified during Self-Heuristic Evaluation.
Here I took 4 heuristics and based on that I evaluated all the screens, also mean while I was helping the other teammates who took the other 6 heuristics.
- After selecting our flow and narrowing down the screens to work on, we went ahead and conducted a heuristics-based evaluation for all individual screens. . We used the 10 heuristics principles for interaction design laid out by Jakob Nielsen to guide us.
- Additionally, we also jotted down some problems and areas of improvement that we could find out intuitively for each screen. Finally, we identified the following problems wrt missing heuristics.
Building our hypotheses
In this step, we then went ahead and wrote down all our assumptions about the users and the business and started assuming desired outcomes for the identified problems. From these identified problems and possible solutions, we then went ahead and framed hypothesis statements. From these identified problems and possible outcomes, we then went ahead and framed hypothesis statements to get more clarity.
This was very important as it helped us have a clear idea of the things we wanted to validate through research and come up with a better and more structured plan for research.
Homepage screen
- Wizard plans on the homepage might go unnoticed by users, so we should try to increase its visibility.
- Users might not be able to understand what exactly the Wizard program is and what benefits it has to offer them, so we should try making it clearer.
- Users might find it tedious to browse through all hotels to find hotels listed under Wizard, so we should help enable them to check hotels that have Wizard directly.
OYO Wizard Plan Screen
- Users might not be purchasing the plans because they don’t find them relevant, so we should try to emphasize highlighting how it’s relatable to them.
- Users are unable to compare the three plans easily which might affect their decision-making time, so we should make the plan information more scannable and clearer to navigate.
- Existing members of Wizard might not be promoting the program, so we should try providing them with motivating incentives to promote the program.
Payment screen
- We should reduce the confusion for offers assuming that users are confused which increases the drop in the rate of the users.
Secondary Research Insights
In order to validate our hypothesis we went ahead and did some desk research and competitor analysis.
Desk research
Following are the important insights we found through web browsing:
1. Behavioral Insight
- A type of social proof that works over and over again is testimonials. Whether it’s in video or written form, they’ve helped increase the conversion rate of clients’ landing pages in every case. Source
2. Statistical Insight
- According to Tech Jury, 75% of customers will choose a company if it offers a reward program. If a business shows appreciation to its customers, they are happier and more willing to stay. Source.
- Recent studies are showing that 82% of Gen Z skip or ignore ads completely. This means that passive ads are going to become less and less effective as time goes on. Source
- For Wizard hotels, in particular, 70% of transactions by members are made on these hotels, resulting in higher income as compared to non-Wizard hotels. Thus, making the paid program extremely beneficial to both guests and hotels,” mentioned the company’s press statement. Source
To have a detailed look at the desk research insights here’s the fig-jam file link.
Competitor Analysis
Analyzing some top competitor apps helped us to test our hypothesis against already existing and profitable apps and also helped us get inspiration for solutions(in later stages).
Important insights gathered-
- MMT has divided the benefits of the loyalty program into several categories which makes it easy for users to scan the benefits.
- MMT has a “where to go” section which provides social proofing and motivates users to travel. Stories also have stats showing how many people have seen it.
- In GoIbibo, the comparison of the two plans is very much clear and it is added in the last section.
- GoIbibo’s loyalty program is called tribe, they level you up based on the amount you spend. This motivates users to travel more. (thereby indirectly increasing conversion)Like MMT, they’ve also shown experiences using social proofing.
Primary research
Since it was an evaluative project for primary research we interviewed actual users and understand the problem from the user’s point of view. This was very important to get behavioral insights and to understand our target audience better.
Defining target -Our targeted users were unmarried people under 30 years of age. We were given different category of people that comes under this age group.
Screener -Defining the target users is important to select the right people for the interview. We came up with a short screener form to filter people for interviews. Screener form - User Recruitment screener (google.com)
Due to time restrictions, we circulated it amongst our friend circles only. Although, to make sure our insights were unbiased we made sure that the person whose interview each member took was unknown to them.
The task for the user:
Book a hotel in Mumbai at any date and with any number of guests, Explore the wizard plan and purchase a relevant one.
Points to observe:
- Observe his behavior while interacting with the oyo wizard section on the homepage, navigation tab
- Observe his behavior, and actions while he is on wizard plans
- Observe his action of selecting the plan on the wizard plans page
Following is the questionnaire which was used by every member to conduct the interviews.
Probing & Exploratory questions for users during testing:
- When was the last time you booked a hotel? What was it for? Ask about the journey
- If you want to book a hotel online, what are your key decision factors?
- What hotel booking apps do you generally use?
- How did you feel after booking the hotel? after applying the offer?
- If you’re a frequent traveler will you opt for a wizard?
We ended up selecting 5 users and asked them to join the zoom meeting. Also asked them to share their screen. Following are the five users:
Top Insights of primary research
- Reviews, Rating, and the cost was decision-making form factor for user to book a hotel.
- Users were confused about what benefits the wizard plan has to offer.
3. Users were having difficulty getting on to the wizard plan.
4. Based on primary research we got multiple versions of UI.
Research Analysis
Once we had enough insights from primary and secondary research, we went ahead and mapped the relevant insights with our hypotheses for each screen to get a clearer understanding of points that were validated/invalidated. This helped in streamlining our thought process before ideating solutions and understanding correlations between our assumptions and real user insights.
we went ahead and categorized and color-coded all our insights into the following:
- Insights from heuristics
- Insights from intuition
- Insights from primary and secondary research that validated the hypothesis
- Insights that proved the hypothesis otherwise
- Additional insights not validating/invalidating hypothesis
To have a detailed look, here is a link to Figjam file.
Ideation & Brainstorming
After streamlining the insights and having a better idea of what problems we needed to solve, we moved ahead to the Ideation stage.
We first reframed all the identified user pain points into questions by starting each note with “How might we(HMW)” Screenwise. This helped us open up to brainstorming and exploring ideas as a team.
Since in the given timeframe, it was not possible to resolve all the issues, we selected a few crucial HMWs and went ahead with ideating solutions for them. To reduce overthinking at this stage, we kept a timer of exactly 8min per HMW statement to come up with all possible ideas. (crazy 8 technique).
The crucial HMWs and some of their ideations were as follows:
- HMW increases the visibility of the OYO wizard on the home page. (Pain point: Users could not find OYO wizard easily)
- We can show the real-life equivalence of the amount of money saved by using Wizard in the wizard banner that’s on the homepage to make it more prominent and relatable.
- we can show wizard savings in the recommended OYOs which have Wizard as well.
- We can increase the size of CTA in the wizard banner and use better taglines which will help in better conversions.
2. HMW increases the credibility of Wizard and builds trust among users. ( Pain point: Users did not find the company recommendations trustworthy enough to make a decision)
- We can add a section with testimonials specifically by Wizard members sharing their experiences. We can also offer wizard members some rewards to upload these reviews so that they are motivated.
- We can give the user a better option every time, like if he purchased blue show the benefit of silver and the difference in amt. so that he is alluded to by the immediate next better deal instead of recommending just Gold(which is the highest)
- We can add a section where wizard members can upload stories with tags telling about the benefits they availed of using the wizard. We can also offer wizard members some rewards to upload these stories so that they are motivated.
3. HMW we communicate the benefits of Wizard membership in a clearer way? (Pain point: Users were confused about certain benefits offered and wanted to know more before making a decision)
- We can reduce the jargon terms used and show the benefits in a more relatable manner
- We can reduce the amount of text shown in the plans and add icons and categorize them clearly
- We can make separate sections for the three plans to help users compare the plans more easily.
- We can show them the number of steps they are away from purchasing the wizard plan.
- We can Show them how much money they will save in 3 bookings, Eg if 10rs profit is happening in 1 booking show them they can make 30rs profit in 3 bookings.
Finally selecting the ideas we went ahead and made wireframes
Ideas we went ahead with for wireframing:
1. Introducing stories: This will create FOMO among the user set that we have defined (under 30), making them buy it. Our users are attracted to coupons(Findings from Primary research).A new way of interaction for the people and increased interaction in the app. The user can use the template share that by which offer or benefit they saved amount. Eg. Hey guys! by using this I saved up 30% on my trip.
2. Adding Detailed Experience: Asking users to write detailed experiences and feedback of the experience or stay they had in wizard hotel.
3. Introducing Rewards: Idea was to provide rewards to users for adding stories or detailed reviews. The rewards will attract users and encourage these activities hence ensuring that this feature will be used by the users.
To have a detailed look at discussions of different implementation ways(our thought process) before the final decision, please check this Notion document.
Wireframing
Once we had a list of our key selected ideas, we started thinking about different ways to implement them. We all sketched our ideas on paper and then we discussed all of them before proceeding with designing the UI. Since we were short of time, we decided to put a 15 min timer for making our wireframes before discussing them.
I came up with the idea of keeping stories on the side of cities and presenting the wizard logo on the home page.
UI & Prototype
We then went ahead to design our UI on Figma. We took inspiration from the apps we analyzed during competitor analysis(primarily MMT and GoIbibo).
Additionally, we had also came to cross 4 different versions of the current existing OYO Wizard UI during the primary research. So we took some inspiration from them as well for designing the Wizard Plans page.
UI made for Usability testing.
Here is what our final UI flow looked like:
Home screen
- Introduced Wizard stories section next to cities- Where wizard members could upload stories highlighting benefits availed using Wizard. Reasons- To generate an element of curiosity amongst users and create FOMO. To help portray a sense of community. To have a quick and interactive form of advertising that’s relatable to the users(target audience❤0yrs). It would also help increase the presence/visibility of Wizard on the home screen since users could not locate it earlier.
- Added a Wizard CTA in recommended hotels- showing additional discount availed using Wizard on a hotel. Also increased the size of recommended hotel images. Reasons-To highlight the discount benefit offered by wizard. Images were one of the primary deciding factors for users to book a hotel hence the increase in size.
- Changed the black Wizard banner to a red Save your pocket with Wizard- showing a comparison of real-life purchases of the amount saved using wizard membership, like a “coffee date”
Reasons-To shows the benefit in a more relatable and fun manner, increasing its value amongst users. To improve the visibility of the banner. The original Wizard banner had gone unnoticed by users in primary research. To maintain consistency of color in the UI of the home page screen( reason for the change of color to red) - Introduced Wizard member testimonials- for existing Wizard members to share their detailed experiences with Wizard. Reasons-To builds trust and gives users a sense of genuine about the advantages of having Wizard membership. Reviews and ratings were a primary factor for all users to book a hotel(from primary research). To show a sense of relatability and community belongingness. Inspired By- Make My trip’s “where to Go” section. Goibibo’s “GoTribe” section.
Wizard Plan Page
- Added a section to show the status number of steps a person is away from purchasing a wizard plan. Reason- To give the user a sense of the number of steps remaining for completion.
- Added OYO money Rewards for uploading Wizard stories and reviews. Reasons-To gives Wizard users and incentive and motivates them to upload stories and reviews. Secondary research showed the importance of having a good reward system.
- Introduced 3 different cards for different plans. Reasons-Since users were unable to clearly differentiate between the 3 plans earlier
There was too much text clutter on the screen displaying all 3 plans together. Users were also unable to clearly understand the benefits of each plan.
You can try our prototype here.
Usability Testing
We then went ahead and tested our UI with users to check if the solutions we proposed were actually working or not. This was one of the most crucial stages of the project because it helped us reiterate the fact that we are not the users and what we think is the solution might not actually be the solution.
We prepared a set of tasks and listed down the goals and points for observation before conducting the testing.
Tasks:
- Explore the wizard plan in the Oyo app
- Purchase a wizard plan
- explore Wizard stories
Goals to find out/points for observations:
- Are the users curious to click on the stories? Are the stories attracting the users/are they willing to go there and explore more?
- Save your pocket section- what are they understanding by it? (is it making their plan to buy or go to the wizard plan?)
- Are they willing to click on become a wizard member CTA under testimonials?
is it helping in building a trust element? - Are the users able to figure out the benefits of different plans and compare them?
We then conducted testing with 3 users: Testing gave us a quick realization of where we were going wrong.
The top insights from this round of testing were:
- Users weren’t able to identify the difference between Wizard stories and cities.
- The users couldn’t make out if the stories were advertisements of Wizard sponsored by the Oyo app or actual experiences shared by existing wizard members.
- Some users totally skipped the “Save your pocket” banner and some users were confused as they thought they would save Rs.300 on enrolling in Wizard.
- One of the users was unable to understand what Wizard Testimonials was and how it was different from normal reviews.
- Users were still not able to differentiate between different Wizard plans. One of the users did not notice Wizard Blue at all
- One of the users mentioned that he would like to see more options in Recommended hotels
Iterations after Usability testing
Based on the incites we got from usability testing we decided to make the following iterations in UI.
- Differentiated the OYO stories from cities on the homepage -The user couldn’t able to identify the difference between the stories and other locations
- Emphasized more on the “Save your pocket section” to which we have to redesign the complete section- The user was not able to notice the banner.
- Change the images on the stories- The user stories felt artificial and it was sponsored by the Oyo apps.
- Changing Testimonials to Experiences, More personalized pictures and text on wizard member experiences.- The user would want the real experience to make up his mind to confirm the booking.
- Redesigning the entire wizard plan page -The user was not able to differentiate between the plans and got confused.
All iterations before Final UI
Final UI
Home screen
- Wizard Stories- Users got confused and were unable to differentiate between stories and cities we made a clear demarcation between stories and cities and renamed stories to “Wizard stories”. Also changed the image to the Wizard logo.
- Recommended hotels- Users wanted to see more options for Recommended hotels. They thought the recommended section was bigger because it was hotels sponsored by OYO so recommended OYOs card size was changed back to the original small size and added a banner showing additional discounts availed using Wizard instead of the CTA.
- Wizard Banner- Users got confused by the amount “300” mentioned and thought that they would be able to avail 300 off on enrolling to Wizard. They thought it was misleading as it’s not a direct benefit of Wizard. The theme of OYO wizard is black throughout, so we decided to stick to black instead of red as it represents “premiumness” and changed the red save your pocket with wizard banner to a black OYO wizard banner with enrolling to wizard CTA
- Testimonials- Users were unable to understand how these testimonials were different from normal reviews and why it was on the homepage
Since these were in-depth experiences shared by Wizard members, the name experiences made more sense. Plain text looked very cluttered and unorganized, cards are more systematic, compact, and visually appealing so we change Wizard Member testimonials to Wizard Member ” experiences” and Added images, and made it in a card format instead of plain text.
Wizard Plan Page
- Brought back to the original black color theme Black represents “premium” and every section of Wizard Gold was represented in black so we decided to keep it untouched that way.
- Plan comparison- To make the comparison of plans easy and handy and clear users were unable to differentiate between the different plans. Wrote the price and validity of membership at the top.
- Removed the plan cards and showed all plans next to each other like before. The reason was the users were unable to understand that the cards were 3 different plans(one user did not notice wizard blue only)
Easy and clear comparison of different plans when they are placed right next to each other. - Divided details of each plan into 4 categories-Rewards, Benefits, Discounts, and Validity, and made the descriptions brief and concise, removing unnecessary jargon. Users were unable to understand certain benefits and wanted to know more details.
Reprototyped the flow again
Conclusion
What went right
- Competitor research went right as it gave a lot of ideas about the industry, and how competitors of OYO are running their loyalty programs.
- Heuristics evaluation went right as we found out a lot of usability issues, which were hindering the user experience.
- Teamwork was amazing, as everyone did their part.
- Primary Research- we were able to get a lot of behavior data and how people react to loyalty programs.
- Usability testing- we got a lot of insights into how users reacted to change, by doing the think-a-loud activity.
What would have been done better
- Ideation and wireframing- I felt that we could have spent a little more time in this stage, to avoid confusion and save time during the UI stage.
- We would have a systematic discussion round.
Future and scope
- Add your story with a template and get a reward.
- We work on story flow and how a person can earn
- Wizard membership comparing on the wizard hotels details page to make the conversation clear.
- When we are searching for hotels in a specific location add stories there.
Takeaways
As a group, identifying each other’s strengths and dividing the work according to our time schedules was a fun and challenging experience.
- Working in a group I realized my own strength. I also learned to handle the conflicts that come when two or more perspectives come together.
- I also learned to, manage and prioritize our work even under a tight schedule.
- I learned how to smartly handle tools to maximize productivity.
- The importance of organizing your thoughts and ideas and documenting the process parallelly helped us keep the record.
- I realized that keeping all the perspectives in one place helps us to achieve better solutions.
This Hackathon was a major learning session for me. #StudentsForLife .
I will love to know all the feedback, let’s connect on LinkedIn.
