4

I'm about to start a redesign project for an enterprise web application that's used in call centres, and we're planning to use Material Design for the project.

If you have done (or are currently doing) a similar project, then can you please share details of:

  1. Any deviations you've made from Google's guidelines and why you did so?
  2. What you'd do differently if you had your time again?

Thanks for your help.

closed as too broad by Graham Herrli, Mayo, JohnGB Jun 10 '16 at 11:13

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

0

The question you ask is rather subjective to the needs of the organization and how the Enterprise, Design team, Engineering team and the actual users feel about the change.

I would highly recommend you to speak to the actual users of the application first and observe how they use the app you are about to redesign, see breakpoints and frustration, ask them about what do they think is most annoying, what's perfect, etc.

After this, draw a few mockups of how your redesign would look in MD and speak to the users. Make a small prototype using Pixate if necessary and show it to the users, creative team/ UI-UX/ Engineering. Get their thoughts on it.

I have done this for one client and I can tell you that while it was very well appreciated by the Creative & Engineering team, the Top Management had different views. This was for a Tablet application for an Insurance company which was used by the company's agents.

Enterprises generally do not like animations or complex elements from Material Design guidelines, especially the Executives who prefer to have a more professional look. You need to decide accordingly to which rules you might have to bend in order to fulfill the needs of the Enterprise. Generally, executives only have pet peeves regarding few elements or the MD principles in general, and they aren't always listening to the actual users of the application who work on it for most of the time.

In my case, the Engineering team warned me against using Radio Buttons because the Executive found it to be confusing, apparently. So, I went ahead with Toggles for Gender-specific information with two options and Sliders for multiple options. Apart from that, other elements needed a color tweak for better visibility to the background white. Instead of using the Traditional date widget in MD, they needed a Calender view when the date's fields were clicked. Also had to make sure the error warning is seen immediately by the Agent so that he need not edit things after reaching the end of the form and can do it in the flow itself.

Form Page 1

Form Page 2

form page 3

In my case, they went ahead to implement it but I don't think so it made it ahead of the Executive's decision. I would not change a thing in my mockups, but I believe it was the colors and the amount of time and learning that made them skip the design.

I believe an Enterprise application which employees use daily needs to have a little color so that one could improvise the experience and thought patterns of the user psychologically, especially for Call centers. I also think you should implement a Night Mode/ Dark mode for Call center employees who work night shifts. I would recommend checking the Material Colors Doc and choosing colors appropriately.

Also, since you are designing it for the Web, I highly recommend using Polymer which has Material elements built in.

You should definitely refer this post by Kyle Ledbetter since it goes in detail on using Material Design in Enterprise Applications.

  • Why would anyone find radio buttons confusing? They have been around for decades! Those switches have only been around since the Apple iPhone came out. Executives should stick to what they are good at, and not interfere with our expertise. – SteveD Jun 10 '16 at 10:34
  • I know. Exactly my response when I heard from the Designing team that the executive found them "fancy" and wanted sliders instead. – Swapnil Borkar Jun 10 '16 at 11:21
  • 1
    Good advice - thanks. Already have activities planned with current users and a session with the team going through the Material Design guidelines so we can work out where we need to vary by extension, omission or just doing things differently to apply to our app and its context of use. – Stew Walker Jun 15 '16 at 1:25
1

I have used material design in a few enterprise projects. I find it is a very good base point. The only changes I have made are around padding & the input styles. Material design only has a single bottom border on inputs, which works really nice on phones, but desktops the inputs look a bit lost & it's hard for the user to identify them.

I just added a very light border although I do like the highlighting style when active etc

The padding issue, I just found there is massive amounts of padding in a lot of the css frameworks & for enterprise apps things can start to get very spread out.

Unsure which source u will be using for your css library, materializecss is good, I have also used a bootstrap plug-in which can be good as it uses the widely know bootstrap classes.

  • Thanks! The dev team is planning to use Angular2 but not sure about the CSS library. I'll find out :) – Stew Walker Jun 10 '16 at 6:38
  • Angular is very good because it can work with whatever UI framework you want, e.g. you can use Bootstrap and/or Material Design (you probably wont use both together because they look different). There are some custom ports of Bootstrap UI and Material Design themes into Angular, which you can find by searching in StackExchange and these will save you time. – SteveD Jun 10 '16 at 11:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.