Your Beginning Doesn’t Define Your End

Since childhood, I have been very fond of drawing. It fascinated me how I was able to express what is on my mind through drawings. Back then I didn’t have a passion to be an artist. I just liked drawing something whenever I had free time on my hands. When it came to A/L stream selection, I went ahead with Commerce as it wasn’t an option for me to make a career out of art. From there I continued to follow the  Bachelor of Information Systems (IS) program at the University of Colombo School of Computing. It was a life changing decision that got me into designing.

The IS program at UCSC had a variety of subjects that taught students the business aspect of the software engineering process. But it was not my degree that got me into designing, rather the volunteering activities at university. One morning I got a notice that we would be having a meeting with seniors regarding university societies. I decided to go ahead and see if it was something that sparks my interest. It was at that meeting I got introduced to the IEEE society. They were about to organize their annual hackathon, “CloudHack” and wanted to recruit freshmen. I was pretty nervous as I had never participated in a hackathon, let alone organizing one. Even to this day, I remember  eerily reading out the task delegation list multiple times to find out something that I could contribute to. 

At this point, you would think that I went with graphic designing because I had a knack for drawing when I was small. Surprisingly, before I actually chose one on my own, I got unwillingly pushed into the Graphic Designing team as it didn’t have enough members. This reminds me of one of the famous quotes by the Self-made billionaire, Sir Richard Branson,

“If someone offers you an Amazing opportunity and you’re not sure you can do it, say Yes – then learn how to do it later.”

Volunteering for “CloudHack” as a graphic designer was the first stepping stone of my career. That is when I discovered that I had this knack for designing as well. Be it my previous art skills or my interest in creating digital art, it was relatively easier for me to grasp the beginners concepts of digital design.  To this day, I am quite proud that I was able to achieve a name for myself from my first gig as a graphic designer for “CloudHack”, as it created many opportunities later to hone my skills.

Managing designing work alongside the studies was a strenuous attempt that needed careful time management and dedication. I believe that it aided me to develop myself into a designer who could work under pressure. Looking back, if I didn’t have to push my limits during my university years, I would have never been able to cope up with the deadlines of my career now. Rigorous work ethics was not the only advantage that I received from volunteering as a graphic designer. I had to work with a lot of people who weren’t well versed in designing. It is far easier to design something for a person when that person knows what he wants. But the usual case is the complete opposite  where people don’t know what to expect. I had to learn how to read people in order to understand the kind of output they wanted from a design.After two and a half years, we were about to face the final semester of coursework at UCSC, which was the internship. The internship process was designed in a way that you could choose upto three preferred areas of internships and where you’d end up after was out of your choice. At this point I was quite convinced that designing was what I was meant to do with my life and so I chose. After I gave my preferences, I was only getting offers for BA roles for a while. That is when I decided to take matters into my own hands. I crafted a CV myself with a custom design and started applying for internships through the career portals of companies. Soon after I got an interview with Zone24x7 and was offered a position as a UI Engineer intern.

“There’s a personality trait known as agreeableness. Agreeable people are compassionate and polite. And agreeable people get paid less than disagreeable people for the same job. Women are more agreeable than men.”

-Jordan Peterson

The decision to seek a designer role instead of accepting a BA position shaped my career as a digital designer. Having completed the internship at Zone24x7 after 6 months, I got promoted to the role of Associate UI Engineer. This was a positive shift in my workflow as I got to work with various frontend technologies. I believe that it was not only my passion for designing that allowed me to be successful rather the mentoring that I received at the workplace as well. Sometimes I take out my old university laptop covered with event stickers. It reminisces of the choices that I made which got me into where I am today. And I believe that it was one of the best decisions that I made in my life when I chose to pursue what I love instead of what I was supposed to do.

“You can only become truly accomplished at something you love. Don’t make money your goal. Instead pursue the things you love doing and then do them so well that people can’t take their eyes off of you.”

Maya Angelou
Pamudi Dahanayake

UI Engineer


The blurred line between BA and UX

In almost every project, tensions, conflicts and disagreements between Business Analysts and User Experience Engineers never end. But the above roles have much similar work than they may appear at first glance. Overlapping and distinct responsibilities of BAs and UXers might make them rethink where their specialized skills will be most useful and applied. While business requirements are getting more complex and ‘human-centered’ than ever, each role holds important responsibilities over where a project is headed.

The Business Analyst

Starting with understanding the project domain and users, the business analyst goes on with a complicated list of gathering, defining and refining user requirements, generalizing or concatenating as necessary, defining user interface layouts, yes, you heard right, and so on. The ultimate goal of business analysts within the project is delivering the product that meets the needs of business and users, within the time and budget limitations. To achieve this, apart from the above-mentioned, the BA should work on a number of procedures, including, but not limited to, formulating business analysis plans, supporting technical implementation, helping the business implement the solution and assessing the value created by the solution.

The UX Engineer

Meanwhile, UXers are supposed to create and enhance how users interact with the product, making it more “user-centered”. Their responsibilities include creating user and content flow, user stories, interactions, designing wireframes, prototypes and working on visual aesthetics. They are also responsible for helping create a content strategy, deciding on information display and user testing. Yeah, not as simple as it may appear! Although in most projects, the UX engineer’s role is supposed to end in an early phase of product development life cycle (PDLC), it is quite important to get UX involvement in each and every stage of it. This is because his/her responsibilities are to cover a wide range of areas of the PDLC, such as designing, development and testing as well.

These responsibilities & job duties of both BA & UX roles will of course vary depending on the project these roles are involved in, the organizational culture and additional/custom job descriptions required for specific purposes. 

Business vector created by pikisuperstar – http://www.freepik.com

One destination, different paths

Although both of the above roles work towards the one goal of the entire team –  success of the project, they may choose different paths to achieve it. For example, business analysis focuses on ‘Business’ aspects while the user experience engineering focuses on ‘User’, just as the names suggest. Empathy is generally found with both the roles, although they empathise with different objectives – again the ‘Business’ and the ‘User’. Communication is another vital aspect where the business analysts and user experience engineers differentiate themselves. BAs tend to come up with writing down business requirements and preparing them into comprehensive documents while the UX engineers are strong in preparing visual documents such as wireframes, mock-ups and user flows to communicate. 

The importance of clarity in roles and expectations

Both of these roles are quite important for product development. Having a project manager do the business analysis or the front-end developer work on the user experience designing never gets the work done perfectly. Every important phase of PDLC, such as planning the roadmap, breaking down requirements, effort estimations and working on the deliverables, requires the service of these two roles more or less. If affordable, getting these project roles on board, with clearly defined responsibilities and job descriptions may add more value to your project than anticipated as well. 

Although the defined roles might say otherwise, very often, the responsibilities of BA and UX overlap. For example, building the information architecture must be a collaborative effort of both BA and UX. Likewise, there are several responsibilities such as identifying user stories, user interviews and testing, and documentation that should be handled by both the roles aligning with each other’s objectives and responsibilities. There must always be a mutual agreement between the business analyst and the user experience engineer, on whether they are on the same page at all times.

Does an all-in-one (UX + BA) resource make sense? 

This overlapping of UX and BA roles has come a long way that even having a BA with a bit of UX skills and a UXer with some logical and analytical skills, is nothing but a real advantage for the project. Complementing each role with a portion of the other never goes wrong, rather it helps conceive a feasible and attractive product. Moving forward, there might even be job requirements for this sophisticated skill set of both BA and UX.

An important message to UXers and BAs

Despite all the similarities and differences, what both parties should have a concern on is how to do each role effectively and efficiently, so it’s a win-win for everyone. Both roles must have an understanding of clearly defined responsibilities, and importantly the boundaries of each role. There’s no good of a UXer who tries to involve in business analysis without specific domain knowledge and similarly, a BA who tries to outshine a UXer without valid UX knowledge is doing no good either. On the other hand, the chain of command is important where each role understands how to arrive at a final decision without sparks flying. The collaboration between the BA and UX definitely reduces rework, and produces clear and well-defined instructions and roadmap for developers. 

Ian Worley, Head of Product Design & User Experience at Marshall Wace, states;

“Clients do not buy UX people and BA people, they buy solutions. Work together to make that happen. We should be focusing on how we can organise our resources and skills, rather than our professional labels.”

In the end, saving the day actually depends on business analysts and user experience engineers getting along and making people “need” things they produce.

References:

BA vs UX: The Great Debate

Madhushani Dissanayake

UI/UX Engineer


Visual Design – Icing on the Cake

It’s a lot more than what meets the eye!


We once lived in an era where people only expected the products to be functional as it was required. If it worked right, it was all they wanted. Then became another, where people were thrilled by new technological features in products. They were very satisfied by the mere capability of those products to finish the tasks fast, accurately and successfully. With time, this particular technology became rather invisible, since it was the core of the product.

The coat of the product; design, which was neglected in the past, sooner became a core ingredient. People started expecting good user experience, which ended up in demanding sophisticated digital products, rather than being only smart. They wanted the product to be doing what is assigned while offering the pleasure alongside.

This is where Visual Design comes to reside within building up User Experience (UX). While the user experience incorporates the whole concept of making the product interactive, visual design makes sure that the product is visually aesthetic and representative.

Visual Design is the collection of visual components used in the design of a product, such as colour, space, typography, lines and shapes, contrast and balance. The combination of these should make a product accessible, understandable and pleasing.


Once the colours are applied, elements are aligned and wording is done, the design process cannot be considered to be over or perfect. The visual design is meant to be started with the product design and to be ended with the completion of the project. Visual design must be an ongoing process, because the design will never be complete or perfect with the changing design requirements.

“First impressions are 94% design-related.”
— www.researchgate.net


Peeking into the importance of this — Visual Design — within the boundaries of UX, there are various reasons one would not easily think of. First and foremost, though we admit it or not, the visual elements make the first impression on the product, in user’s mind. Most probably, this might even lead the user to make the decision of continuing or discontinuing the use of a particular product. Would you rather wait for a second chance to make that first impression?

Studies have found that the majority of the users attend to the visual cues more than the actual content of the digital product. This might lead to a discussion of what actual use there is if the users are more into the coat rather than the body. Yet, the ultimate conclusion would be that if you want to hand your product successfully to your customer, you should never ignore the User Experience which you are offering along with.

Another important thing comes along with this, is branding. Knowingly or unknowingly, you offer your entire brand with the design elements of the digital product. From colours to typography, to spacing and even to the balance of elements, it represents your brand. That is where one should consider visual design as a priority than ever. The days are coming where the users will be first looking at the design rather than checking out the content, because now that the technology has become an essential, users believe that it is already and perfectly out there. It simply means that designers are to present the taste before the users actually taste it.

“People ignore design that ignores people.”

Behind all these, what would be the obvious element? It’s none other than one’s own mind. We, in this world, do everything to be compliant with mindsets, just because it is when the things are most acceptable. Visual design is no difference; people like to see, hear or feel what their minds want to. Psychology plays a major role in designing since visual aesthetics and interpretation heavily depend on perception.

In the field of Human-Computer Interaction (HCI), visual design holds a prime position as it directly deals with the human psychology. Cognitive models that are associated with design have been introduced. Design guidelines have been made incorporating the cognitive psychological facts. For example, reception of colours and related views vastly depend on the diverse factors of humans such as cultural, demographic and even scientific. To work with these differences, sets of design standards and principles, which are related to cognitive factors and primarily based on the perspective, were brought up. When designing for general, the guidelines and the standardization became important for a better experience.

Visual metaphors are another thing which was influenced by the relationship of visual design and psychology. Humans tend to find the familiar things even in an unfamiliar environment. This is because of the brain’s ability to remember and recognise. One good example of relating this into visual design is iconography. Icons are mostly designed as the reflections of real-world objects. They metaphorically refer to the concepts that are familiar to the user. Icon of Recycle Bin reminds the user of the physical dust bin and it implicitly reminds of the functionality as well.

“Visual Language — Language of Dreams”


This emphasis on psychological aspects of design has been an influence for the emerging of a rather fascinating concept — Design systems — or simply, visual languages. World’s pioneering digital product manufacturers such as Google and Microsoft have already stepped in to the competition of introducing diverse design systems, yet based on the same primary principles.

A design system consists of certain guidelines for a better user experience, including usage of colours, white space, lighting, typography, depth and balance and many more. Basically, it is a derivation of visual language which is as any other language yet communicates with visual elements. In a well thought-of design system, there is a set of design rules and patterns that if used well, offers a significantly intuitive and friendly user experience.

When talking about design systems, currently, the most popular and widely discussed system is Material Design by Google. It was introduced in 2014 with the code name of ‘Quantum Paper’ since its primary concept was ‘Paper-and-Ink’. Material Design relies on light-weighted materialising of the visual elements, synthesizing the classic design principles with innovative technology. It is expected to be a single underlying system that allows for a unified experience across platforms and device sizes.

While Material Design became one frontier visual language, back then Microsoft presented a rival — Fluent Design. It was built on Microsoft Design Language 2, incorporating five main design elements as building blocks. Fluent Design is said to be more interacting with mixed reality with sensory experiences, while Material Design focuses on tactile reality inspired by real-world objects, along with sleek and smooth materializing. Yet, according to many critics and reviewers, Material Design has had a head start with its universal, consistent and easily-adaptable design system, while Fluent Design is often criticized as a close resemblance of Material Design, except for its said capacity to work well in 2D and 3D. Other than these two hottest development trends, digital leaders such as Apple, Asus and Samsung have also come up with their own design systems.

“Where is Visual Design headed?”

The day when people will prefer aesthetically pleasing visual design over anything, is not so distant. Agreed by the designer community all over the world, now people believe that the digital products must contain what is required, and therefore the delighting components — the design — should also be there at no additional effort or cost. What customers require is a sophisticated digital product, which should be able to please the user with its unique delighting capabilities, demanding higher expectations from UX.

Now that the technological trends such as 3D motion art, design elements developed for Virtual and Augmented reality, have entered the design arena, professionals in design are expected to be competitive than ever. Even the visual artists and 3D motion designers have shifted to UX designing recently, just seeing the huge demand. For example, Perception — a big motion graphics company, has recently moved into designing UI for tech leads such as Samsung, Microsoft and Ford. Users expect irrational UI designs and amazing UX with the products, which emphasises the fact that visual design would come forward playing a major role in UX.

In near future, it will never be enough for a user of digital products, to have the best flow of the activities, accurate functionalities or mere completion of what is required. It will always be the delightful design that was only a decorator earlier, but now comes up as a primary need, that would please the user, tapping the art, aesthetics and the creativity in mind.


References

Material Design :
https://material.io/design/
Fluent Design System :
https://www.microsoft.com/design/fluent/#/

Banner Image Courtesy: Deva Williamson on Unsplash

Madushani Dissanayake

Associate UI Engineer


At the Gates of UI and UX Design

This week in ZoneCast

We are scratching the surface of User Interface (UI) and User Experience (UX) design. Our hosts Umaya and Lasitha are joined by Michael and Dhammika, who are Lead UI Engineers at Zone24x7. They start by unraveling the often most interchangeably used terms in design, UI and UX and where Customer Experience fits in this puzzle. We dig into the basics for any listeners out there, who are new to the subject with examples. From there, we explore the UI Engineer’s role in all this and how teams ensure good UX in the process.

This is neatly packaged episode that delivers a quick crash course on the basics of UI and UX design. Listen below:

Discussion Breakdown

UI and UX at Zone24x7 – 00:44

UX and the difference between UI and UX – 01:12

UX and its applications beyond Software Engineering – 02:21

Where Customer Experience fits in – 04:14

UI Engineer’s role in UX – 06:25

Examples for good UX – 09:16

Future UX trends – 10:34


Michael Lu was Lead UI Engineer at Zone24x7 and you can follow him in Behance.

Dhammika Gunaratne was Lead UI Engineer at Zone24x7 and you can follow him on LinkedIn.

About ZoneCast: Simply put, ZoneCast is a podcast about technology. Listen in and discover all the tech that is brewed inside Zone24x7 and the many passion projects of our associates. To listen to previous ZoneCast episodes check out ourZoneCast SoundCloudPage.

Image Courtesy: Header image from unsplash.com/@igorm