Back

The Interconnectedness Between UX & UI.

User Experience abbreviated as UX is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy, or website, up to larger, integrated experiences such as a museum or an airport. - User Experience Network.

So much of our day to day interaction with a specific design has been made more convenient to the point where we expect convenience to be the default. We take the convenience of the modern world for granted, it's hard to imagine the world otherwise. However, what we don't realize is the complex processes behind the grand mechanic of User Experience that makes this convenience possible.

User Experience (UX)

Much of UX's power lies behind the scene. Beyond the tip of the iceberg of the UI lies the skeleton (wireframes), the structure (sitemap), the scope (requirements/content) and the strategy (concept/user research); all of which work together to produce a design with intention.

Wireframes vs Sitemap.

There is so much confusion between wireframes and sitemaps differences because they both belong to the layout category. The main differences between the two is a wireframe focuses on the visual design of the page i.e. where the buttons go, how the users will interact with the content etc, in the format of a rough sketch since it is one of the initial stage of the whole process. In contrast, a sitemap shows the relation of each page and its corresponding content.

Scope & Strategy.

A scope may consist of the requirements / content of the website. One of the reasons why it's advised to have the content ready before the design phase is because the content can affect the visual design, depending on its length. A common analogy used in the industry to convey this importance is 'Designing a website without content is like designing a tailor made suit the measurements'. Similarly, a strategy may consist of user research which holds the answers to how the product and experience would be perceived or interacted with and must not be overlooked.

UI Is A Part of UX.

One of the biggest misconceptions regarding the approach towards UI and UX is the attempt to look to the two as separate ecosystems, implying that each can cope independently without the other. However, rather than pitting the two against each other (UI vs UX), it's more beneficial to recognize UI as a part of UX; as illustrated by the iceberg analogy. A good design isn't just for show. A good design ensures a good User Experience.

Whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all. - Douglas Martin Book Design.

UI is Only Skin Deep But UX is To The Bone.

The old saying 'beauty is only skin deep but attitude is to the bone' mirrors the relationship between UI and UX.  Although it's only the tip of the iceberg, UI tends to receive more emphasis than UX. This is understandable considering our brains are wired to rely on visual cues and any knowledge of depth only comes later with time. However, long-term thinking is what guarantees sustainability and thus, requires the integration of all components that make up the UX umbrella.

Some Examples.

Our project to build a digital ordering solutions for Heineken reflects our attention to details to all UX components. Starting with the Research phase before moving onto the Design and finally the Development phase; we were able to help Heineken's distributors move away from a disorganized and error-prone paper-based ordering system to a fully digital solution, where orders would never be lost or forgotten, ensuring that the end customers had the best possible ordering experience.

The research phase was important in understanding the need of all the stakeholders and customers and thus, in determining the goal, which is to completely revolutionize the supply chain management for Heineken both in Cambodia and eventually the region.

Design for us has always been much more than a makeover. Transforming Heineken's traditional supply chain management is thus, much more than simply digitizing the current offline processes. Often, our meticulous approach takes us somewhere unexpected and that's precisely why it's important because the unexpected is easily missed.

We've determined that rather than following the offline processes that differed amongst the different stakeholders i.e having an entire suite of mobile applications, each tailored to suit the precise needs of each type of user; we would have instead, have one mobile application that would dynamically offer different features and functionalities to different types of user depending on which phone number was used to log in. This makes it much easier to manage.

The digital ordering solution surpassed $1m in orders in less than 14 days, and was widely appreciated by the outlets included in the pilot test phase, which placed it well to eventually roll out to 30,000 national outlets and also to offer the 26,000 wedding couples that choose Heineken products for their special day a better way to order products.

Another example can be seen from our work for a driver's app for a food delivery company. One of the components of the driver's app is the requirement for drivers to rate their delivery experience. Initially, during our prototyping phase, we had chosen the 10-point star rating scale with the assumption that it was the most self-explanatory. However, the usability testing phase proved that it was not the case. Upon our clear instruction to the drivers to give the experience a full 10 star rating, we had observed that the driver's reflex went straight to the left, in their attempt to drag the star from 1 to 10 in order to rate the experience as excellent. However, when we prototyped the star-rating system, we did not consider the 'dragging' function in mind. Instead, we had assumed it would take on more of a 'click' function. The finding implies that there is no general consensus on how the star rating works. Therefore, we revised the UI and UX accordingly, moving away from the star-rating system to a 2 point scale—'had an issue' vs 'great' to simplify the process for the drivers.

The Significance.

The reason why good UI and UX are taken for granted is because it's easier to recognize and recall negative experiences than positive ones. When framed in this context, UX is comparable to air; you don't notice it until it smells bad. It also doesn't take long to spot bad designs—"it takes only 1/20th of a second to decide if you like a website".

The simplicity of Apple and Google products vs a typical company's system.

However, the return on investment of UI & UX is not to be underestimated. From the start, the role of UI and UX is to ensure long-term satisfaction that persists into the future. Good designs are intuitive and require little to no instruction. This translates into savings gained from reduced cost on support and maintenance. Beyond project and maintenance benefits, the statistics are very clear and in favor of the prioritization of UI and UX for businesses.

70% of customers abandon purchases because of bad user experience.
80% of customers abandon a mobile site if they have a bad user experience.

While,

A well-designed site can have up to a 200% higher visit-to-order conversion rate than a poorly designed site. And visit-to-lead conversion rates can be more than 400% higher on sites with a superior user experience.

At Mäd, it is our philosophy to adopt the paradoxical mindset i.e pursing the both/and approach whenever possible, over the either/or approach. Our approach to UI and UX is no different. We continuously harness and leverage our team skills and persist to explore how different disciplines fit together to produce an everlasting impact.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Elevate Your Business Today

Work with our expert team to get measurable results. 
Together we can Make It Happen.™

Start a Project
back to top icon