Vikram Singh
time wounds all heels
  • About Me
  • UX
  • Photography
  • Blog
  • Contact Me
Category:

Case Studies

Case Studies

From Video Chaska to Sony Liv – Story of a website re-design

by Vikram 4 years ago
written by Vikram

When Sony TV, India lanuched their new channel Sonty LIV, they contacted Maya Studios for the UX desgin problem. The pain point we had to solve were as follows:

  • Sonay had an existing IP called Video Chaska, which hosted all their content (15k+ hours of video), how to help user discover more content
  • How to transitions smoothly from Video Chsaka to Sony LIV without major disruptions?
  • Desing for connectede experience across web, mobile and tablets. 

We designed the site in a way that would cause minimum disruption to the experience of existing users, prepared a content strategy for the marketing team on how can they prepare users for the transition. And lastly, designed several upsell widgets/CTAs for content discovery.

Original SonyLiv site before the Re-design

Project Images

Project Files

  • PDF icon sonyliv_website_wireframes.pdf
  • PDF icon sonyliv_tablet_wireframes.pdf
  • PDF icon sonyliv_mobileapp_wireframes.pdf
  • PDF icon videochaska_feature_list_webportal_and_mobile_app.pdf
  • File sony_functionality_hcl_doc_2.docx
  • File sony_feedback_4.docx
  • File sony_feedback_5.docx
  • File sony_feedback.docx
  • File sony_feedback_2.docx
  • File sony_feedback_3.docx
  • File data_for_sony_presentation.pptx
4 years ago 0 comment
0 FacebookTwitterLinkedin
Case Studies

Apps Daily – App Store Design

by Vikram 4 years ago
written by Vikram
Apps Daily World home page image.

Project Images

Project Files

  • File mayastudios_flipkart_shopping_experience.pptx
  • Office presentation icon maya_presentation_aapstores.ppt
  • PDF icon appsdaily_wireframes.pdf
  • PDF icon appsdaily_questions_for_claryity_by_mayastudios.pdf
  • Package icon appsdaily_mindmap.zip
4 years ago 0 comment
0 FacebookTwitterLinkedin
Case Studies

How to dissect an app for UX

by Vikram 6 years ago
written by Vikram

Confronted with a new interface? How would you go about dissecting it as a UX designer? Here is my take on a sample interface (watch the 4 minute video first).

General Observations

Below are some quick insights that I could glean from the brief demo. Element wise observations are given in the respective heads further down in the article. I’ve knowingly not used Heuristic evaluation as I wanted to keep a broader outlook and not be just usability focused.

  • Interaction model – The first and the most striking aspect of the application for me is the complete and total lack of a cohesive interaction model. Due to this the elements in the application are arranged mechanically lacking any overarching narrative. Since this is an enterprise class application, lack of proper interaction model or adherence to users mental model leads to an application that user find hard to use, unhelpful and error prone. All of this is very costly in an enterprise environment.
  • Interaction Design – IxD issues are an extension of the problems arising from the absence of an interaction model. Tasks have not been studied thoroughly hence lack an intuitive and cohesive flow. For example, regularization of attendance requires HR reminder and even then user has no way to know if attendance for a particular date has been regularized by him or not. Helpful links to do so are missing on the attendance page and the entire regularization task takes place in a pop-up form!
  • Information Architecture – poor IA can be seen at different places. For example, badly placed and functionally different action buttons placed in the header of the pace, or poor or uninformative labelling of UI elements like LHS information blocks, titles and sub headings.
  • Communication Design – This is an oft neglected area in UX design especially in enterprise level applications. This is the case here as well. There is no copy or explanation text in the interface, not just that the grammar is not consistent and the choice of labels and titles is too spare and unhelpful. A well written copy and good labelling system is foundational to good UX.
  • Visual Design – Visual design again is not very well structured. Use of icons, button colors, title alignments etc., are not cohesive. Alignments of visual elements such as icons and their associated badges are off. Icons are not even from the same family. Overall, the VD is pretty dated and the look and feel is not very appealing for an interface that will see mandatory and repeated use almost every day by its users.
  • UI Principals – The entire UX violates (in various degrees) several UI design principals such as, Structure, Simplicity, Visibility, Feedback, Tolerance and Reuse. Of these, the most egregious violations of the said rules is of the tolerance and reuse. At several places in the demo we can see how the user is exasperated that obvious mistakes lead to redoing of the task at hand. Mauling of reuse principal of UI design is even more glaring. Lack of consistency in the use of UI components, data formats, input gathering etc., can be seen through out the interface. For example date and time formats are different in different places and input fields.

 

About the user/narrator

Following are the insights on the narrator and the general sense I get about other users of the system as communicated by the narrator. These are mere inferences and in real life scenarios there will be more information to validate these.

  • Narrator is a good communicator, probably in his late 20s to early 30s, male from upper middle class background. Most probably hails form a large urban city. He’s experienced with the system so it seems he’s been with the organization at least a couple of years.
  • Narrator fits the ideal person of a power user so he’s a good candidate for a stakeholder interview and even contextual inquiry.
  • Based on the demo, we can assume the users find this system tedious to work with and make many mistakes. They probably need help in finding how to perform tasks assigned to them.
  • The organization is definitely losing productivity due to this system and probably some users, especially senior management, altogether skip using it. This might be leading to compliance issues and data inconsistency issues.
  • The system does not fully map out all the use cases and how people actually work, hence leading to partial automation of routine tasks such as attendance regularization (remember the user was reminded by the HR to update his time sheets).
  • This is probably a legacy system designed and developed without UX inputs.

Header

  • Logo alignment wonky as its not aligned with the inner LHS area container. Too flush to the left.
  • Unclear what the clock icon does in the header?
    • Is it part of the search component or is it free standing?
  • Primary or action buttons (Clock out & Request) are placed in an unusual place and with inconsistent trigger actions. One button initiates a multi-step task popup and the other is a drop down menu. There is no context supplied to these buttons. Also the two buttons are misaligned. More specifically –
    • Clock Out button
      • Choice of button color, in Indian context, implies a negative action.
      • Clocking out is a core task, placing it with another equally important button (which is a menu as well), makes it compete for attention.
    • Request Button
      • It is being used as a menu item so its placement is wrong/questionable.
      • Since this is a drop down menu list with multiple items, the button label is semantically wrong. It should be Requests.
      • Drop down menu item “Attendance” is a bad label choice, as it does not indicate that it will help the user update his attendance.
      • Drop down menu item “Reimbursement” seems to be a duplicate of the main menu item. If so, then its a poor redundancy and if not then its even worse.
    • Search Box
      • Too prominent as its placed right in the middle of the header. The question is, is this functionality so important? Is there sufficient data to justify this decision?
      • It clashes with the search box in the main content area.
      • Component height seems to be slightly greater than the action buttons.
      • Place holder text – Colleagues, Groups and Tags
        • Text looks too much like normal body text, usually placeholder text is slightly greyed out. Wrong affordance.
        • It emphasises searching of items that are not represented on the rest of the page, so the question is, shouldn’t there be a more relevant text to encourage the users?
  • Misaligned icons and their associated badges, probably a simple CSS issue.
  • Inconsistent use to icons, clipart icons mixed with round profile icon.

Main menu (navbar)

  • Low readability due to low color contrast, choice of font weight and style.
  • Clipart icons used and even those are inconsistently used for different items.
  • What does the speedometer icon denote? Is it part of the menu choices? Or it is just a static image? Why is it there?
  • RHS icon looks like it represents help section of the application. If so, this is unusual, if not inconsistent usage.
    • If its a menu item, then why is it an icon? Why not icon+button scheme for it?
  • Questionable grammar – should it be Reimbursement or Reimbursements?
  • Streams seems to be the duplicate of the first icon in header’s secondary menu. If so then why this redundancy?

Left Hand Column

  • LHS items have poor space utilization, not really helping in readability.
  • Poor copy or labels for example, Total duration, Average duration, etc.
  • Unnecessary to show seconds in the time display. They are just making the display more complex, besides being inconsistent from the rest of the application.
  • The right aligned labels are not consistent with rest of the application, left hand alignment would be better.

Main Content Area

  • Redundant sub heading as the list boxes on the right already show the selected month/year. This is an example issues that arise due to lack of communication design inputs.
  • the drop downs / list boxes are far away from the sub heading to create a proximity association, necessitating redundancy of the title. Not good UI design.
  • Do we really need two drop downs to select year/month? Wouldn’t a date component do a better job with better usability?
  • Why does month selection drop down has year as well?
  • Not clear why there is a search box. By design only a months worth of records can be displayed (due to the drop downs), which means showing 20 to 25 rows at max, making the search box necessary. If its a global search box then too the search box is redundant and not required as there’s a global search box in the header.
  • For the same reason, next/previous buttons seem unnecessary for such a small list of items. They also look as if they are in active state, for a list with no pagination, these should have been at least in disabled state. And they are misaligned to boot!
  • Time stamps have been unnecessarily been made too complex by including seconds. Besides, this time scheme is not used elsewhere in the system bringing in inconsistency.
  • Same with date format. The user already knows, moth and year, is this information being repeatedly shown in the listing? All in all, this is a poor choice of format.
  • Assuming this is the default screen when you come to this page, shouldn’t it display this fact? Further, since the users have to typically update previous months attendance, shouldn’t this page display the same or at least a list of days that need to be reviewed by the user?
  • There is no way for the user to request attendance regularization from this page. Seems like an obvious option to me. A simple edit button should suffice.
  • Status column makes little sense. After all, when a user is absent the row for that day can be disabled or visually different (no login/logout times, etc), so why have this column?

Attendance Request popup

  • For such a core taks, popup interface seems odd, especially because this potentially a multi-step complex task. Poor interaction design.
  • Web clock-in seems like an important task, should it be hidden inside a popup?
  • Poor selection of default value for Location field as most people can be safely expected to work from office by default.
  • The date label “01” is unclear and doesn’t communicate what its for. Lack of proper copy and poor labelling. Same issue with “Add More” link.
  • The user said, he forgot to Clock-out on 5th, so the “Clock-in Time” should be have been automatically populated by the system with his clock-in time as soon as he selected the date. Same when a user simply wants to update/fine-tune his timing. This could save a lot of steps at the organization level as well as reducing data corruption/inconsistency issues.
  • No cancel button.
  • The date picker does not give the affordance of a date component.
  • The time picker components are not standard and too complex. Any modern date/time picker component would do a better job with vastly improved usability. Also, time format in these fields are different from the logs view page. That’s bad either stick to 24 hour format or AM/PM.
  • The time entry fields for hours and minutes have default text as “–Select–” instead of “hour”, “minutes”. Bad usability.
  • Any why is the user made to enable these fields? Aren’t these mandatory fields!
  • The heading “Overnight Clock-out” seems redundant, the check box component and its label give sufficient explanation.
  • Message field is mandatory but has no indication for the same.
  • No visual separation between form/apples for different days. Its a minor point but can be important if the user has to work with multiple days. Poor usability/visual design.
  • With the addition of multiple days, the popup becomes harder to navigate, especially by keyboard and also looks too complex.
  • The “X” button used in the applets is to remove that day from the form (I am assuming), but this is bad affordance. Such buttons are usually used to close components, especially when placed in the upper right corner. Also, the small size of the button is bad for usability (Fitts law).
  • Furthermore, it clashes with the close button of the popup itself!
  • Listening to the user/narrator it seems that the form discards already entered data when there’s an error. This should not happen in a well designed application.
  • The system does not reflect how things are already done in the organization. For example, in date “03”, upon form submission, the system informs the user that this date has already been approved. This will never happen in a properly researched and full automated system.
  • In the above example, “03” the narrator is not sure if the above is system mistake, a miss communication or human error. This shows lack of proper system research and consequently lack of automation and proper feedback.

Thanks it!

6 years ago 0 comment
0 FacebookTwitterLinkedin
Case Studies

Roleplaying Workshop – 2018

by Vikram 6 years ago
written by Vikram
6 years ago 0 comment
0 FacebookTwitterLinkedin
Case Studies

UX Workshop for Designers – Banglore 2019

by Vikram 7 years ago
written by Vikram

7 years ago 0 comment
0 FacebookTwitterLinkedin
Case Studies

Socially Moo – The Social Media Management Platform!

by Vikram 13 years ago
written by Vikram

Project Website: https://sociallymoo.com

The Brief

An application that allows a brand to control their social media pages from one platform. Unlike other such platforms, Socially Moo will teach you how to control your social media skills in a fun and professional manner and how one can get ahead of the game due to the various features that will be available. Due to the fact that these features will help one navigate the social media world more easily the clients one targets will have better access to the products and brands (in other words will be more approachable and accessible). Socially Moo will have a feature which will assess brands quantitative and qualitative characters on the social media platform and will provide with the necessary means to accelerate the growth of numbers from A-B. There will be constant analysis of numbers taking place here. Socially Moo will help you and your brand grow in the professional world and will make sure you take each and every advantage possible to enrich through social media.

Are You Socially Moo? (from the client)

A group of young, dedicated pioneers have made it their sole mission to help people like you and me have easier access to social media. Their main objective is to help you navigate and gain as much as you can from the social world. With various updates, statistical analysis your are sure to be one step ahead by being Socially Moo.

What is Socially Moo? (from the client)

Social media is a means to communicate to clients through the usage of the internet and other technologies which are mobile for various interactive dialogues. A way to tell the world what you are about and what you stand for. Thus, Socially Moo helps you to get your voice across to a larger audience.

Socially Moo is? (from the client)

A platform that allows every brand and community to step up  and stay ahead in the game of social media.   A platform that will give you insights and help you gain the most you can from the world of social media.

The Crew (from the client)

Ajesh Shah and Kumar Jhuremalani, both creative, innovative and young have decided to put forth this project with much gusto. Knowing all the nitty-gritties of the social world there is to know, they are the brains behind your social media upliftment.



More questions to the client

Questions about you/moo….

1. What does Socially Moo mean to you?

Socially Moo is the solution to everyone’s problems related to social media marketing. It will help anybody and everybody, right from school/college kids wanting to promote their festivals on social media, NGOs wanting to make a mark on social media, Digital Marketing Agencies that often get lost in the chaos of social media, right to the modern day CEOs of fortune 500 companies who want to interact with people via social media. Thanks to Socially Moo, all of these groups of people needn’t spend hours and days trying to figure out social media, we help them-help themselves J 

2. Where did the idea generate from/what inspired you?

When you are handling multiple clients in the social media marketing agency, there comes a point where one realizes that their demands and expectations are not really hard, we just need an organized system that ensures that things don’t slip off the plate. We are human after all, and mistakes will be made, maybe a thumbnail image wasn’t changed in time for a particular campaign, or there was a spelling error somehow. All this is caused due to managing too many things by a single person. The time came, when we put our foot down, and realized that there should be an easier way to do these easy tasks. That’s when we decided it’s time to create something new, something that people haven’t really thought about, but at the same time, it had to be something that would help everybody, and out came the idea of Cats that Moo 

3. In five years’ time where did you see Socially Moo?

I’m hoping that Socially Moo changes the way people look at social media, not only in the marketing sense, but in overall usage. At the same time, with the way social media is changing, it’s not going to be the same 6 months down the line either. To be straight, 2 years down the line, I’m hoping Socially Moo gets adopted as Web 3.0 ^_^

4. How would you describe yourself in terms of being Socially Moo/even general description bout self-concerning technology and social media will do.

Personally, I’m a gamer and in particular I play MMORPGs (Massively Multiplayer Online Role Playing Games) wherein the whole point is to be a different character, but at the same time blend in with the community. I have even worked in the online gaming industry to handle such game communities. I’ve taken those experiences, as well, and helped shape what Socially Moo has now become. Along with social media trends and news, I keep myself informed about the latest technology, including gadgets, automobiles, and computer equipment.

Technology is ever changing, be it hardware, software and even the web. The switch to Web 2.0 hasn’t happened completely all over the world, but at the same time technology has been moving at crazy speeds. Look at smartphones, you purchase a particular model, thinking it’s the latest and it has all the features and looks the coolest, and within a year it’s already outdated. It’s the same trends with Social Media and keeping me informed about its ever changing nature is a must.

5. Why Socially Moo?

Don’t get this question… is it about the name?

Project Images

    Project Files

    • PDF icon value_pitch_draft_01_2011.pdf
    • PDF icon socially_moo_word-form-4feb.pdf
    • PDF icon socially-moo-brandidentity-7mar.pdf
    • PDF icon moo_final_visual_design_06_06_11.pdf
    • PDF icon socially_moo_wireframes.pdf
    • Microsoft Office document icon moo_features_definitions.doc
    • File socially_moo_insights.pptx
    • File moo-subscriptions.xlsx
    • File competitor_analysis.xlsx
    13 years ago 0 comment
    0 FacebookTwitterLinkedin
    Case Studies

    Recommend.ly – Make Every Fan Count!

    by Vikram 13 years ago
    written by Vikram

    Project URL: https://recommend.ly

    Recommend.ly is a social media project aimed to help people / SMEs to manage their Facebook presence better with a bit of automation magic. R.ly helps people discover curated content that they can either post themselves or ask recommend.ly to post on their pages at appropriate times. This is a completly free too.

    Recommend.ly notes for Maya Studios / Project Breif

    Product Goals

    • Integrates itself into daily workflow of SMEs to manage FB Pages – drives payment
    • Complements Facebook’s own insights and suggestions for Page engagement
    • Demonstrates expertise on FB platform to woo Partners

    Access

    • Staging URL – stg.recommend.ly
    • Live URL – recommend.ly

    Press Release for Recommend.ly launch

    • https://blog.recommend.ly/press-release-to-announce-the-launch-of-recomme…
    • Includes research on Page activity using data set of over 4 million Pages

    User Flows / Sitemaps

    Two flowcharts include rough sitemap and user flow through website. Treat this as a draft and not necessarily final implementation.

    Related product: CScore (ConversationScore)

    Measures Page performance based on interactions, shares, virality and activity. Score (out of 100) is calculated daily. Like other scoring metrics (Klout, PeerIndex, etc.), it provides a common playing field to compare Pages and competitors as well as providing an overview of Page performance.

    CScore should be treated as a separate product, which is integrated into Pages on Recommend.ly via an internal API. Draft mockups included.

    Project Images

    Project Files

    • File recommendly_review_research.pptx
    • PDF icon recommendly_wireframes.pdf
    • Package icon mindmap.zip
    • PDF icon authority_letter_to_maya_studios.pdf
    13 years ago 0 comment
    0 FacebookTwitterLinkedin
    • Articles
    • Blog
    • Case Studies
    • Uncategorized
    • Web videos

    Instagram

    Recent Posts

    • From Video Chaska to Sony Liv – Story of a website re-design

      4 years ago
    • Changing Education Paradigms

      4 years ago
    • Apps Daily – App Store Design

      4 years ago
    • About Anger

      4 years ago
    • A time to recall the stalwarts

      4 years ago

    Popular Posts

    • Text Book Usability Issues

      19 years ago
    • Mahindra & Mahindra XUV 500 – Car Infotainment System

      13 years ago
    • Salute to the great man

      15 years ago

    Instagram

    • Instagram
    • Linkedin
    • Flickr
    Footer Logo
    • About Me
    • Blog
    • Contact Me
    • Home Page
    • Photography
    • UX

    @2025 - All Right Reserved.


    Back To Top
    Vikram Singh
    • About Me
    • UX
    • Photography
    • Blog
    • Contact Me