Asseco • Design Language
Creating Design System — Case Study
Illustration: Responsibilities of a User Interface Architect
As the Chief UI Architect, I was leading the design team and updating the existing framework. At the same time, I was cooperating with CTO, Product Line Managers and Developers within the working group for the new platform.
Based on the business needs, inputs of the group and my own research, I created a design language for the future. Phases of the process are listed in reverse chronological order.
Scope: software platform
Coordinator: multiple platform, product and project coordinators
Position: Chief UI Architect
Manager: Product Line Manager
Documenting Goals and REQUIREMENTS
Image 1: Design problems and proposed solutions
The design direction of the new platform needed to be communicated to all stakeholders. I had created the manifesto and elaborated on the topic of design language in the working group meetings – explained the problems, outlined high-level design goals and suggested design solutions. I communicated the intention to continually improve the design along the way.
Image 2: Business needs and the resulting design goals
That was all about the business needs that had to be addressed. The requirements were to support consistent experience on various platforms, quickly create banking products with different technologies and unify branding across all digital channels. The design language was my proposal for strategic solution of design-related pain points of the banking software.
Image 3: High-level design targets
Product teams were effectively using the existing desktop framework I had designed and styled to be implemented by product developers without any styling interventions. It was impossible to apply the same approach to so many different technologies. I have introduced the high-level design guidelines as the approach we had to take in the future.
Designing Mobile UI Components
WIDGETS and Shell
Image 4: Full-size widgets inside the Android shell
I designed full-size widgets for touch interaction that were identical on all platforms. Detailed views occupied the whole screen on mobile devices, implemented complex interactions and used a permanent color palette. Most of them had a compact-sized equivalent. Shell UI elements applied brand colors but remained platform-specific.
Image 5: Compact widgets for the banking industry
The compact widgets were also identical on all platforms, easy to understand and use. They encapsulated the most common banking functionalities, provided a quick overview and simple interactions: a drill-down to details screen or simple navigation links. I designed them to be combined in various contexts and screen sizes. Each of them had a full-size mode.
Image 6: Color palettes for the platform
The formation of seemingly complex color schemes began with the refinement of chart colors for the existing framework. I had noticed that charts, forms and content do not require a significantly different color palette for different brands. I was combining twelve shades of shell colors with two slight variations of content colors palette to form a branding color theme.
Refreshing Desktop Applications
Image 7: Color themes applied to the Branch application
Stakeholders wanted a brand refresh and a modern user interface. New UI colors successfully differentiated existing apps, but with some limitations. Not all colors could be used as background due to contrast issues. Red and Orange were associated with errors or warnings. I recommended Green for admin apps, Blue for front office and Purple for back office apps. This wasn’t a firm rule and all color themes except Red were used. The result was a huge success.
Image 8: XAML code for appearance and interactions
The applications relied on the in-house framework that separated logic from appearance and interaction. I have updated the XAML code and refactored the entire user interface: screen layouts, controls, content templates, images and icons, and updated UI elements to apply branding colors. The updated interface was applied automatically to all existing apps. A set of color brushes with predefined names is all that was needed to create a new theme.
Image 9: Charts with spectrum color sequences
The charting library suffered from aesthetic and usability problems due to some spacing issues and a poorly defined color palette. I have updated the XAML code for all chart controls, created a pastel color palette and defined several color sequences: either to mimic the spectrum or to form more contrasted color combinations. Stakeholders recognized the impact of color and spacing on this example and decided to update the entire framework in the future.
Going Modern on the Web
Credit Scoring Web Application
Image 10: Tablet-first, touch-enabled user interface
Banks started using 10-inch tablet devices for on-site loan sales and needed a credit scoring app on their devices. I was outsourced to company’s BI department to apply modern, responsive design for the first time. Unlike classic desktop applications, the app was characterized by smaller data density and a more generous spacing for bigger touch targets. It featured flat colors, monochromatic glyphs and bigger fonts and avoided using UI chrome or drop shadows.
Credit Scoring Website
Image 11: Custom illustration for the homepage
I defined the brand, colors and style, created the logo and illustration for the product and for the website. I have created numerous custom icons for the banking concepts in the app. The response was overwhelmingly positive. Stakeholders decided I should start applying this design approach to existing desktop applications and all future products. In the meantime, I continued leading the design team and supporting our product development.
Supporting Product Development
Image 12: List page, used for all business entities
Business Analysts needed a way to quickly specify the exact content and functionality of banking applications during their gap analysis. Customers wanted all the requirements documented early in the process. They were business people familiar with PowerPoint.
Image 13: Overview page, example of a customer entity
We have created the detailed PowerPoint wireframes template for consultants. Both sides were able to update their wireframes whenever necessary, without worrying about the actual design of UI elements. Templates contained all the features supported by the framework and the existing application suite.
Image 14: Main task page, rich with functionality and information
With this approach, consultants and developers could easily identify and assess existing or new feature requirements for customer’s banking needs. During the development, product developers were using wireframes as a visual reference specification of product features that they were building.
Environment and Circumstances
Most of the processes described here were taking place at the same time or overlapping over a considerable amount of time. I was participating in projects that had no clear start and end dates. My design decisions were inspired by the reactions of our users and influenced our strategy over the years.
I was taking care of the design vision, software brand and framework design, while overseeing my colleagues that invested most of their time into applying the framework, understanding the product features and customizing the product design as needed.
Relying on Coworkers
I trained the designers and dozens of developers to use the framework we created. By providing wireframe templates and ad-hoc consultations, we were sharing design responsibilities with our in-house analysts in the environment where design team serviced a framework, a dozen of products built with the framework and several other projects along the way.
Relying on consultants and fellow designers allowed me to work on the Design Language and to dedicate some time to the side projects like the Credit Scoring application and website.
In the software industry, it’s not a question of whether you’ll have limited resources for a product or a service. You most certainly will. The question is how to best use them in a multi-tasking environment with an ever-changing set of requirements.
I tried to solve this in two ways. The first one is by sharing the design responsibilities with fellow designers and non-designer coworkers, and the other one is by picking the right tools and assets to speed up the design process. Being a hands-on designer made it easier for me to assess the available options and decide when to purchase rather than create high-quality visuals.
But for mission-critical designs, stakeholders have always insisted that I create the visuals we needed.
Various projects designed by Darko Antanasijevic