Tag: UX Design

  • UX Audit to Create better experience

    UX Audit to Create better experience

    About junglerummy.com:

    Jungleerummy.com is the ultimate online rummy site for all rummy players. Experience a unique gaming environment and challenge other players from all over the country. We offer great opportunities for you to utilize your game skills and win real cash and exciting prizes.

    Design Interview:

    The brief of the design interview was to conduct the UI/UX Review of junglerummy.com.

    Tasks:

    • Create an account
    • On mobile rummy > Game Table Screen, What kind of UI changes you want to do and why?
    • On mobile rummy > How can you change the Game Table UX without changing UI?
    • On mobile rummy > Create an inviting/ attractive Home Screen Design for m.jungleerummy.com?
    • On Desktop Rummy >As a new user, How do you perceive the information on Home Page www.jungleerummy.com? Suggest 5 major changes you want to do and Why?

    Let Starts

    Task 1: Onboarding > Create an account

    Current Onboarding Screen

    While Junglerummy.com opening screen is not very visually interesting. It is loaded with too much information (Prizes won, Promotions Banner, Login at the top, How it works at the bottom), which increase the Cognitive Load.

    What is Cognitive Load:
    The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks.

    You can register by providing the following information Username, Password and Email Address.

    Below are some of positive points on Onboarding

    • “Less is more” principle works perfectly here.
      Their onboarding/registration is very simple and straight forward. Only most relevant info is require for registration.
    • Use of single column design layout for Form from better readability.

    Problems on Onboarding

    • Not using inline validation with real-time feedback immediately after answering: The last thing you want is for your user to realize they’ve made an error just after they’ve finished filling out a form and must now go back and correct them.
    • All fields in registration form is Mandatory.
      Instead of using * in placeholder, write “All fields are Mandatory”. It will reduce the Visual Load.
    • Not Clear with error messages: After filling the entire form, I clicked on the “Register Now” button. It shows the Signup Error with Wrong Error message “That nickname is not available.” It should show “Username is not available.” So that User can build the relation with the input field.
    • Not using labels outside the fields: Should not to hide the labels while answering, so the user will not loose the context. Also use placeholders in the fields as a hint text. You can show how the answer must look like — the format, structure, etc.
    • Wrong Disclaimer: Instead of “By clicking “Play Rummy Now”, you agree to our T&C.” it should be “By clicking “register now”, you agree to our T&C.”
    • We can remove the “Register via Facebook” because if user wants to use their Facebook account they can Facebook Login button at the top.
    • Disclaimer text size is too small to read.
    • Overloaded Information: Registration form is overloaded with the unnecessary information.

    It takes me more than 6 mins to register with Jungleerummy.com.

    Task 2: On mobile rummy > Game Table Screen, What kind of UI changes you want to do and why?

    Below is the current game table view.

    Current Game table Screen

    Based on the testing I have done with some of my 8 friends here are the list of UI Changes which we can implement in game table view.

    • 6/8 users was not able to understand the timer and bar at first glance.
      Recommendation: I would like to add the icon in front of time. So that user can able to understand that they need to take action before time out.
    • 5/8 users was not able to understand the number(#460344718) at the top of the game table.
      Recommendation: I would like to add the label in front of number. So that user can able to understand easily.
    • Inconsistent Design: The current design is ignoring the Design principle called “Consistency in design”. Consistency is one of the molecules of the Design DNA.

    It means, usability and learnability improve when similar elements have consistent look and function in similar way.

    • In Current design Clickable elements and non clickable elements are in similar colors. Example In attached screenshot “YES” button is in green color which is clickable and the same color is used in the “Network Icon” which is non clickable element.
      Recommendation: Use different color for non clickable elements
    • Popup UI is not matching with overall design.
    • Unnecessary use of colors: In Current design Some buttons are in green, some are in blue, some in red.
      Recommendation: You can define primary and secondary color of buttons and use them through out the site.
    • 8/8 users feels than their display cards are bigger in per-portion to table area.
    • Error messages are not placed properly and even it is in very small fonts. It is very hard to read and understand error message.
    • I would like to change the direction of user face towards the cards. So that user will feel that he/she is current playing the game.
    • I would like to change the camera view of table and design of table area. So that it will look aesthetically good. Check below image for reference.
    Reference

    Task 3: On mobile rummy > How can you change the Game Table UX without changing UI?

    Current Game table Screen

    Most of the point I have covered at the task 2 stage. Below are some more points.

    • We can add label against non common icons and elements like Card icon at the top right.
    • We can add the Help/How to play tutorial of the first time user. So that new user can understand/learn how to play the rummy game.
    • We can remove the Hamburger icon form game area and show the menu upfront. So that user can easily access the menu/items and take decision.
    • We can add “Invite friend” functionality. So that if user want to play the game with friends. They can use this feature.
    • Tap-able area of the button is small and it is not as per the android guidelines.

    Task 3: On mobile rummy > Create and inviting / attractive home screen design for m.jungleerummy.com

    Current Homepage Screen

    Below are my observations of current homepage design of mobile screen/website .

    1. Visual Hierarchy
      One of the most important attribute of Great/Quality UI is Visual Hierarchy. A great User Interface allows users to focus on what is important.
      In current design > you are trying to make everything look important and you just create information overload and reduce the quality of the User experience. In this page the current user will not able to make a decision, what is the main task in this screen(Login, Register, or Register via Facebook).
    2. Currently, All three main action items is having the some visual important and there is no contrast between the different sizes of button and placements.
      A well designed visual hierarchy reduces the appearance of complexity and helps users accomplish their tasks.
    3. Simplicity
      Before designing any interface/ product, we should ask our self one question “Does the user really need this to compete their task?” before adding features and content. A quality user interface is made up of necessary elements that are logical and concise.
      Currently > The interface is not simple overloaded with a lots of actionable items.

    4. The information architecture of current design is broken or not familiar with user. You add label after the button “Login Already a member?” instead of this you should use label first like, “Already a member Login here”. Which is common way in current design trends.

    UPDATED DESIGN

    Based on the above mentioned points, I have made the changes in visual hierarchy and some inspiration for user to register on the website. Also I have made some changes in content of the page. Below is my updated design.

    Mobie Design of Jungleerummy.com

    Thank you for reading!

  • UX Case Study: Document Collection Panel for Credit Managers/CPA

    UX Case Study: Document Collection Panel for Credit Managers/CPA

    Objective

    This product was to create an interface/solution where users (Credit Managers/ CPA) can view, request, download and take action/decision on the loan documents of any particular application and check the status of the loan application.

    Problems

    The entire process of the current document collection process was completely manual and takes a longer time for the decisions. Unable to identify the cause of delay in the documents collection. Agents/DSA was not aware of the status of an application. There was no way to validate the information against the uploaded documents.

    Goals

    • To define the document collection process.
    • Manage tasks so that the task owner is aware of all the tasks assigned to him/her Tack applications to take fast decisions.
    • To clearly see the status of an application and the task owner at any point in time.
    • Escalations in case any step in the doc collection process is not executed in a stipulated time frame.

    Tools

    • Whiteboard
    • Pencil Sketching
    • Sketch 3.0
    • Balsamiq
    • InvisionApp
    • Silverback (For Testing).

    My Process

    My Design Thinking Process

    Brain Storming

    To gather more information on the problem, technical constraints, and business goals. I conduct the brainstorming with product managers, technical head and business stakeholders.

    Brain Storming Session with Team
    Brain Storming Session with Team
    Brain Storming Session with team

    User Research

    In order to build a great user experience and gather useful information on the topic, I interviewed 10 people. My interviews lasted from 20–30 minutes. I found them enjoyable and I was able to gather so much more useful information. We researched the current document collection process with our CM and CPA members. Tried to understand their Pain-points, Objectives, and Motivations. So that we can create a solution that improves their productivity.

    Pain-Points

    After done my interview with users, I came up with the following main pain-points.

    • The entire process was manually and take a lot of manual and repeated effect to request new documents in positive loan applications.
    • Request the pending document is currently taking a long time for complete
    • Currently, no monitoring or tracking about the document requested on each application.
    • Request for a document in a Positive loan application case causes delay in disbursement.
    • If credit managers forget to ask any documents that they need to send the new email to Sales/DSA/Agents/Customer.
    • Follow up for documents was a big pain.
    • No validation of the information provided by the User at the time of filling the loan application against the documents he/she provided.

    Personas

    I combined my findings to create two personas that would be typical users of the document collections process

    Primary Persona > Amreen Khan
    Secondary Persona > Charan Preet

    High-Level Task

    Define high-level task

    User Scenario 1

    As a Credit Manager, she is responsible for approving and disbursement of the loan applications applied in CoinTribe Technologies Pvt. Ltd. She requests for additional documents to approve the cases.There is feature in Credit Dashboard where she selects list of the documents and send the request from the Agent/DSA. She reviews the received documents and approve/reject the same from credit dashboard and re-request the new document if needed.

    User Scenario 2

    As a Sales Person, He is responsible to complete the loan applications for the user whom wants loan. He gets the request of the additional list of the documents from Credit Managers. He called the user and ask for the additional documents to process their loan application. Once user provide the same in digital or physical format. He uploads the same in the Agent Framework and this update the status to credit manager.

    User Flows

    After research, I had an idea of what users needed and wanted I could begin creating their flow. User flows helped us to map out the paths a user would take while using the project/product.

    User Flow

    Initial Sketching

    First of all, I created 2 low-fidelity wireframes with less detail and after that made a low-fidelity prototype with Sketch App. I tested our ideas with my internal team to know the sustainability and viability of the solutions. When we agreed on Design Approach 1 then I carry the same approach and create the Low-fi wireframes in the sketch app.

    Design Approach 1
    Design Approach 2

    Low-fi Wireframe

    Explain Design for better understanding

    Dashboard
    Document Viewer and Action screen document Category Page
    Request New Document Page
    Re-request rejected document with new documents
    Download Document Page
    Upload Document Pages
    File Selector
    File Uploading
    File Uploaded

    Visual Design

    After completed the low-fi wireframe. we created a prototype in InvisionApp to test our solution with our user. We used SilverBack software to record our user actions with our solutions.

    Invision URL

    Work on this project I really learn a lot. As UX designer we should always consider user’s needs and wishes that are vital in creating a successful experience and therefore provide a high level of desirability.