UI Design and Development: Capabilities for Enterprise Development

Macrosoft’s Future Technology Directions Series: UI / UX

This paper provides an overview of Macrosoft’s latest UI design, prototyping, and development toolsets for creating compelling and intuitive user interfaces for the enterprise systems we build for our clients. In addition to what our current technology stack looks like, we also describe the new technologies we are now evaluating and moving to, including new capabilities for incorporating interactive and animated UI features.

We consider UI design and development to be a leading and integral part of our overall enterprise design and development efforts. The fact is our customers see the new applications we just built for them thru the User Interface first and foremost.

Our methods for UI design revolve around ‘design thinking’, that is, we always work closely and intensely with our client’s business users to ensure that the applications we build are exactly what the client needs and wants. For our part in the client-vendor relationship, we emphasize always that the UI needs to be as simple, minimal, and intuitive as possible.[1]

Most importantly, our UI designs nowadays must adhere to two new critical design principles:

• Always make all tasks in the UI and the system overall as automated and streamlined as possible. Minimize and de-clutter user requirements and inputs throughout the business process embodied in the UI and the overall app. So, in effect, we are now utilizing our UI design process to support our clients in the automation of their business processes as much as possible.

UI design is one of the dimensions in which we can move a client’s business process to a new dramatically more automated level. During the design stage, we don’t only ask the client what the current business processes look like now (which we certainly need to know), but much more importantly, we discuss with the client what the business process could look like if/when it is fully automated. That forms one of the central pillars of all our current enterprise development work efforts and we are expecting that trend to continue to grow going forward. [2]

• Make the UI as smart as possible. By smart, we mean building in capabilities and algorithms that anticipate the user’s next steps and expectations. This can range from simple well-known things such as building all functionality needed for a particular task on one screen rather than spread across many screens and moving the cursor to the next position the user will likely be going to.

At the other end of smart, it can mean the incorporation of smart algorithms that anticipate a user’s next need and fill in place-holder information for the user to start with. There is no limit to how advanced and productive this type of UI design and development thinking can be, and we feel we are on the leading edge of this type of thinking.

Currently, we have about 20-25 separate enterprise development projects ‘in process’.[3] In most all these new app development efforts, effective and intuitive user interfaces form a key part of achieving ‘best in class’ apps. So, in a nutshell, to achieve best-in-class we strongly adopt the principles of ‘design thinking’ with the two major additions noted above. We strive to ensure we embed in our new UI designs the most business process automation possible, and we incorporate as much smartness as possible.

On the tech side, we are constantly testing and validating the latest tools available in the marketplace, always looking for ones that provide significantly better functionality or productivity. Once a new tech is selected, we work hard on intensive education and training of our design teams in the new selected technology. Our goal is to make the transition to the new tech as seamless and effective as possible, so we and our customers gain the benefits of the new tech without all the startup problems and hiccups.

So read below to see what we are currently doing and the new directions we are moving to. One last point before we dive in. Macrosoft’s Enterprise Development line of business is a contract enterprise development shop – clients come to us to enquire about a new system or app that they need to be built, either to replace an existing system or to add new functionality to an existing system. As such, we understand fully that the tools and methods we would like to use may not be the ones used by our clients, and of course, in these cases we will adhere to the client’s final choices. We are versatile in a whole slew of technologies and tools other than the ones in our recommended tech stack.

Background

This is the first in a series of short technical papers on advances and innovations Macrosoft is now pursuing and implementing within each of our six LOBs. This paper relates to our Enterprise Development LOB and highlights the advances in methods and technologies we are making to our UI design, prototyping, and development efforts in support of developing new enterprise applications for our clients.

UI Design and Development Technologies

Here we describe the toolset we currently use for UI design and the new tools we expect to move into our recommended tech stack before the end of this year.

1.   Current Tool Set

As shown in the pie chart below, about 50% of our current work is done using the mainstay tool Photoshop, no surprise there. In addition to this, we are using Adobe XD for about 20% of our current work efforts. The third tool, Figma comprises about 30% of our current work efforts, and therein lies our movement to the future. It is expected by end of this year, a much greater percentage of our UI design efforts (probably more than half) will be based on the Figma design toolset.

Of course, as noted earlier, this tool mix is directly influenced by our client base. For all new projects, we offer our clients a recommended tech stack that includes the tools for UI design and development.[4] However, in the final analysis, it is up to our clients to approve our recommended tech stack or to substitute their choices. So, while our first choice will be to move as much of our new UI design efforts to Figma, that may not be possible in all new projects. 

With respect to UI development tools, the right-hand side of the chart above shows the mix of development tools we currently use. There is a broad mix of tools we are currently using and the choices for any particular project are driven in large measure by client expectations and wishes. For work where we have the option to select our tool of choice, it has been the Angular toolset. We are also now doing several projects with the React toolset as well, and we have now incorporated that tool as a viable option in our ’Dazzle’ tech stack.

2.   Target Tool Set

The trending design and prototyping tools in the marketplace today are shown in the chart below. The three top tools are Figma, Adobe XD, and Sketch, each at about 30% of the trending pie. These are the three general choices our UI design team is versant with.

For most new UI design efforts our first choice will increasingly be Figma and, as noted earlier, we expect it to be our mainstay design tool for most new project by end of this year. So, as noted in the chart, in terms of Macrosoft usage we are expecting it to increase from its current usage percentage of 30% to well over half our new projects by the end of 2021. Figma is now considered the best suited for almost all types of design work we encounter in our work efforts.

For our target UI development toolset, we are intensely evaluating the new Bootstrap 5 toolset. The version 5 of Bootstrap was just released officially in May of 2021. It had been in beta test for a long period prior to that and we are expecting that it will now be fully debugged and ready to go. 

As shown in the two charts below it offers major new advantages over release 4 of Bootstrap and is well suited to our UI work mix. Based on our testing to date, we believe Bootstrap 5 will simplify and automate our UI development work and lead to an overall reduction in our UI work efforts of about 20%, which clearly is a big saving for us and our clients to share. Perhaps more important, some of the new features it offers will ensure that the UI designs we build will be more consistent and less needful of intensive testing to ensure consistency across browsers, for example. So, by end of this year, we will likely be adopting Bootstrap 5 as our top preferred UI development toolset.

As noted in the second chart below we are now in the testing and evaluation stage for this new version of Bootstrap. So far, our evaluations are going well. Once a final ‘go’ decision is made, we will then begin intensive training and education of our design teams in all the best practices available to us by using this new technology. Of course our goal is to get as much benefit as possible out of using it.

One key point is noted in the second chart below. To begin with, we do not it effective and worthwhile to retrofit our existing enterprise apps to using Bootstrap 5. This may be a longer-term goal heading into next year, but for now, we will leave all existing Bootstrap 4 apps we have already built as they are. The new version will be applied only to the new enterprise apps we build.

3.   Interactive and Animated UI

Another target UI design area we are currently investigating concerns interactive and animated user interface techs. We see this as a big wave of the future even for corporate enterprise applications, and our investigative work in this area is twofold.

First, we are evaluating and understanding best practices in the use of interactive UI and animation for enterprise UI applications. This is now truly leading-edge, but in several years it will be commonplace in UI apps. We want to build up our store knowledge of the best use cases and practices for its use in enterprise apps. Second, we are investigating the best toolsets for us to rally behind in bringing this capability to our UI design work. As noted in the chart below we are currently evaluating tools with respect to capabilities such as Canvas/CSS animations; parallax effects; and transition and transform effects.

4.   AngularJS vs. ReactJS vs. VueJS Frameworks

These are the three major UI development frameworks in the marketplace today. The point we want to make here is that, as a major part of our commitment to staying o the leading edge of development toolkits, our UI design and development teams continually stay abreast of all the latest developments and enhancements in each of these three toolsets. All 3 of them are vital to our work in the enterprise development area, and we intend to stay tuned into all the latest each framework has to offer. We consider ourselves to be fluent in all 3 of them.

Training and Education

As mentioned earlier in this paper, once a new UI tech is slated to be added to our Dazzle tech stack, we make a concerted effort to train and educate, and knowledge share among our UI teams in all the ins-and-outs, and nooks-and-crannies of how best to use this new technology.

We consider this a critical success factor for us. So, in addition to learning how best to use the new technology itself, we also build up a digest of best-case use cases and practices. In all instances, our goal is not to just say we are now using this or that new UI tech, but rather to be able to utilize it to its maximum best value.

Summary

In this short tech trending paper we highlighted the UI design and development toolsets currently used by Macrosoft in our Enterprise Development line of business, and some of the new tools we are currently evaluating for moving our work efforts forward before the end of 2021.

As noted, this is the first of many such papers that will highlight the technologies and capabilities available within our company now, and the new more advanced toolsets we will be offering for our clients in the near future.

[1] To ensure these goals are met, we constantly implement new features and functionality. For example utilizing techniques of ‘glass morphism’, ‘soft gradients’, etc.

[2] In fact, within Macrosoft, we now have a separate business line devoted to business process automation using the Microsoft suite of Power Platform tools: Power Automate; Power BI; Power Apps; and Power Virtual Chat.

[3] This is an increase from the average last year of about 15-20 separate projects.

[4] Our proprietary recommended tech stack is called “Dazzle”, and we are constantly changing and updating the tools and technologies used in this framework. Moreover, this tech stack provides a number of different options depending on the nature of the application to be built and based on a clients preferred choices. For example, the tech stack now incorporates using Reactive in addition to Angular for UI development.

By Praveen Kumar, G.N. Shah, Ronald Mueller | August 10th, 2021 | Enterprise Services, Web Development