UX UI Work Together media header
HomeNewsExpert NoteHow Do UI Design and UX Design Work Together?

How Do UI Design and UX Design Work Together?

An article by Pegah Mirzadeh, UX Designer at ELCA

UX became a household term — at least at a corporate level — it isn’t uncommon to hear folks mix up the terms or use them interchangeably. Although the field of user experience design will no doubt continue to evolve, it’s important to understand each profession’s vital role in the wider realm of human-centered design. 

ELCA’s take on UX (and UI) is aligned with the Agile approach and we practice our best effort to collaborate in different phases of product life cycle to deliver high quality IT products, which satisfy clients and end user needs.

UX vs UI: two sides of the same coin.

"Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.”, Don Norman says in The Design of Everyday Things. “In this sense, UX and UI design are two sides to the same coin. Both are (or should be) focused on empowering the user and creating an accessible product. But they only succeed when they work together.”

The differences between UX and UI design:

ppt_599_ui-ux-graphic_02.svg

UX/UI and Agile framework

Deep understanding of UX process by managers and leaders in an organization is the key to a successful Agile UX; simply “they get it”. They understand what UX is, and why it is valuable to the product and how it provides the project a key competitive edge. Decision makers in these organizations know that UX is not only an extra coat of paint to take features and workflows that have been already decided upon and make them look nice. Instead they bring a UX designer from the beginning to the project to determine product strategy, features, structure, interactions, content, and aesthetics.

 

An Agile life cycle for an IT product, which is practiced at ELCA, is the structured series of stages a product goes through as it moves from beginning to end. It contains three phases: “Elaboration”, “Construction and Transition” and “Continuous improvement”. For a better understanding of how UX/UI designer can collaborate with business analyst in this cycle, let’s focus on how user-centric design maps on different stages of the Agile process.

UX framework in an Agile IT product sprint:

ppt_599_ui-ux-graphic_03.svg

Elaboration phase:

 

After reading the available documentation of the project, a UX designer defines the UX principles for the project. To define the UX principles, the UX designer defines a road map for UX methodology and UX deliverables. In this stage, they can plan for workshops and activities, perform user research and understand user needs, user goals and pain points, define success KPIs, define personas, and prioritize scenarios for each persona (in collaboration with BAs, PMs, and stakeholders). During this phase, accessibility requirements are analyzed, user research is performed, and ideation workshops are held. The main UX activities in this phase are as follows:

 

  • User research and interviews,
  • Define user groups, goals, needs and pain points,
  • Define and synthesis problem and solution,
  • Design site map and information architecture,
  • Create user journey and user flows to validate complex UX behaviors,
  • Iterate until the client validates the information architecture (based on the UX plan).

 

While the mentioned planning steps are done by a UX designer, UI design is also a part of this phase with the following steps:

 

  • Create wireframe prototype to validate complex UI behaviors,
  • Iterate until the client validates the sketch (based on the UX plan),
  • Complete UI design for the sprint(s).

 

 

Construction and transition phase:

 

During this phase, the UX/UI designer plans UX quality assurance and usability testing. The UX activities in this phase are defined as:

 

  • Create screens and interaction design according to user story scope and for each user story (UI),
  • Support Business Analyst with a description of the user story,
  • Iterate and adapt to client feedback,
  • Support developer in delivering assets and finding alternatives,
  • Perform user testing (If possible) for new features or changes in the concept,
  • Revise and update UX guidelines and UI specifications.
  • Document UI components (shortcuts, …).

 

Also, user acceptance and support from customers during the roll-out phase are obtained. The main UX activities in this phase are as follows:

 

  • Plan customer feedback,
  • Perform final tests and ensure integrity,
  • Create training materials for users,
  • Support user acceptance and onboarding,
  • Support change requests.

 

 

Continuous improvement phase:

During this phase, the live solution is improved, further developed and maintained based on user feedbacks, usability testing and stakeholder requirements. The main role of the UX designer, who is embedded in an Agile team in this phase are:

  • Serve as a single point of contact for developer team, concerning UI specifications,
  • Specifying new features,
  • Improve existing features based on different feedback channels,
  • Continuous quality assurance.

UI/UX experts weigh in

As a final point, let’s summarize the distinction between the UX and UI approaches by some field experts.

 

UX is focused on the user’s journey to solve a problem, and UI is focused on how a product’s surfaces look and function.

 

Ken Norton, Partner at Google Ventures and former Product Manager at Google, believes we should “Start with a problem we’d like to solve. UX design is focused on anything that affects the user’s journey to solve that problem, positive or negative, both on-screen and off. UI design is focused on how the product’s surfaces look and function. The user interface is only a piece of that journey. I like the restaurant analogy I’ve heard others use: UI is the table, chair, plate, glass, and utensils. UX is everything from the food to the service, parking, lighting and music.”

 

There is no difference between UX and UI design because they are two things that aren’t comparable.

 

On the other side, Craig Morrison, Associate Creative Director at Truvani, thinks: “There is no difference between UX and UI design because they are two things that aren’t comparable. It’s like asking, “What is the difference between red paint and the chemicals the paint is made up of? There is no difference. Red paint comprises all sorts of different chemicals that, when combined, make red paint. Just as the user experience comprises a bunch of different components, user interface design is just one of them, and when combined, they make up the user experience. ”

References

  • “UX vs UI: What’s the Difference?”, Link here
  • “Agile is not easy for UX: (How to) deal with it”, Page Laubheimer, Link here

 

Read article also on medium.com here: UX vs. UI; The Difference Between User Experience and User Interface

Pegah Mirzadeh

UX Designer

Meet Pegah Mirzadeh, our Designer specializing in UX. Contact Pegah to discuss how he can help propel your UX initiatives forward.

Related Content

UX UI media header

The Difference Between User Experience and User Interface

Discover the differences between User Experience (UX) and User Interface (UI) as we delve into the fundamental elements shaping digital interactions and product success.

User Experience

User Experience (UX)

We aim to facilitate the acceptance and efficiency of a solution and to generate awareness of and commitment to a brand platform.

Best of Swiss App

Digital Experience

ELCA Digital Agency was honored at the Best of Swiss App Zurich 2023. A great recognition from the market for these two mobile applications designed and developed by our team.