How Do UI Design and UX Design Work Together?

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.

"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.”

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.

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.

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