UX Case Study: Modifying the Filter Button for a better User experience of the Book My Show App
Enhancing user experience and helping business.
The story behind….
I recently attended a mind-blowing UX Design Workshop by Growth School, mentored by Anudeep Ayyagari. His non-textbook approach really help me in gaining a prominent amount of knowledge and cleared all my myths about UI/UX Designs.
Jakob Nielsen's Heuristic Principles, Fitt’s Law, Jakob’s Law, building UI Design in Figma animations, etc were the few concepts I learned in this course.
Now applying all those learnings, I come here with a mini flow case study of redesigning an app called — Book My Show.
The Challenge Starts….
Why Book My Show?
Bunking lectures and going out and watching movies with friends were one of the epic thrills of our college days. Book My Show App was helpful for us to know the movie details and book tickets.
But searching for tickets for a specific time was a little difficult task for us. So recalling that in mind, I decided to solve the issues and write a case study on it providing the best possible solution.
Problem Statement
Taking insights from the existing designs and keeping users and businesses in mind, I finally reached the problem statement :
The challenge here was to highlight the Time Feature and make Filter Button visible for a better user browsing experience.
Final Solution
Given below are the Existing screens and the Redesigned screens of the Book My Show App.
Now let us see how I reached this final outcome, what process I followed and what were the key learnings.
Design Process
Below is the design process that I followed to reach the final outcome :
1. DEFINE
While searching the problems through Heuristic principles lenses, I identify that this app has a filter option where they have provided the price and time slotting features already in it. But as it was at the most right corner with a simple white icon it never grabbed the attention.
Given below are the existing app screens with the problems identified according to the heuristic principles :
2. IDEATE
After defining the problems and brainstorming, I found some possible solutions to solve the heuristic issues identified. Finally, I choose the most appropriate ideas for the screen as shown below :
Why I found these ideas appropriate?
Creates Awareness of the new feature: In the existing screen as the Preferred Time Feature was inside the Filter Option, people were not aware of it. Keeping the Time Button as an independent button helps to create awareness among the users who can use the feature as per their needs.
Time-consuming: The user can select the preferred time directly with the button rather than searching for it in the Filter Option.
3. DESIGN
Narrowing down the most appropriate ideas I came up with, I created paper wireframes of my solutions and then converted them into paper prototypes.
Here is the marvel link to the low-fidelity prototype: https://marvelapp.com/prototype/9f54c13/screen/90998379
High-Fidelity Prototypes
I now converted my low-fidelity prototype into a high-fidelity prototype of the User Interface. Then I mentioned the changes I made, and how it helps the user and business.
Here is the Figma link to the high-fidelity prototype :
4. TEST
For usability testing, I provided certain tasks to the users so that they can go through the redesigned screens easily and provide me feedback. Then I sorted out things that I need to observe so that I could reach the final solution.
I then took out the observations provided by the users and marked the points in stars which I will be using for the iteration process.
5. ITERATE
After user testing, the iteration was done and I finally reached the new design. Below are shown the changes made in previous screens and how it benefits the users and business.
The Filter Feature is more useful for movies with Multi-languages and different screen dimensions.
Here is the Figma link to the Final High-Fidelity Prototype :
Conclusion
After doing this case study I realized that even the smallest elements of an Interface like “color”, “shape” and “icons” plays a vital role in User Interaction and the efficiency of a product.
