Illustration: Responsibilities of a User Interface Architect

Asseco – Client
Software platform – Scope
Chief UI Architect – Position
6 months – Duration

➜ Image gallery

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.

Design Manifesto

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.

Business Needs

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.

Design Guidelines

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.

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.

Compact Widgets

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.

Color Schemes

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.

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.

Design Multitasking

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.

Limited Resources

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.