User Experience vs User Interface | UX vs UI

5 min read

It can get a bit overwhelming when you aren't familiar with all the technical jargon that gets thrown around the digital world. In particular, UX (user experience) and UI (user interface) often get used interchangeably when talking about web design. But there are clear differences between the two and each fulfills important functions in the web design process. By the end of this blog, you’ll get a better understanding of what UX and UI are and how they complement each other.

wireframe image

User Experience Design

Simply put, UX design refers to the overall experience a user has during a journey across a product. For example, someone planning on what bus to catch home using the Metlink App or someone trying to apply for a course on the Outward Bound website. The UX process typically involves researching, developing, and improving how a user interacts with a company’s product. At Somar Digital we define UX design as a user-centered approach to finding and solving problems. In other words, if you want to create a product that people can actually use and want to use you need to be able to define who uses your product. Through user-testing, you can then define what problems users have with your product and you can make informed decisions about how you want to design and build your product.

Ultimately, the goal is to create a product that is useful and valuable, as well as easy and pleasing to use. We’ve found that projects that have had a strong emphasis on UX from the get-go have had less time having to go back and redesign and rework the product at a later date. This ends up saving our clients a heap of time and money.

Some of the key aspects of UX design include:

  • User research
  • Competitor analysis
  • Personas
  • User testing
  • User journey mapping
  • Design sprint
  • Accessibility audit

So we know that UX is the experience a user has during a journey across a single product like a website. But to make things a little more complicated a user experience can involve multiple user interfaces which are used at different stages of that journey. To understand this better we need to define what exactly UI means.

UI image

User Interface Design

The simplest way to understand UI design is that it is the visual appearance of the product. UI designers decide how to visually design the product for a better user experience. An example of this is how we designed the UI of the Citizens Advice Bureau website so that it struck the right tone with users when they were on the website. We knew that some users of the CAB website might be in a stressful situation when looking for information on the website so as part of our visual design for the website, we created illustrations and undertook user testing to get an insight into how users felt when navigating the website.

Some of the key aspects of UI design include:

  • Visual design
  • Colours
  • Graphic design
  • Layouts
  • Typography
  • Forms including buttons, tags, text fields, checkboxes, drop-down lists

Our designers at Somar Digital, while specialising in either UI or UX, tend to have skills across both fields and utilise these skills across our different projects. UI designers decide how to visually design the product for an effective user experience. A good UI design helps attract users and ensures a product experience that benefits the user.

UI/ux image

How Ux and UI complement each other

UI is made up of all the elements that enable someone to interact with a product or service. UX, on the other hand, is what the individual interacting with that product or service takes away from the entire experience. UX and UI are equally important. No matter how beautiful the UI is, without UX, users would find the product useless and their underlying needs would not be addressed. And without an effective and pleasing UI design, even great UX would become dull and unengaging.

Whether its increasing conversion rates and improving the overall donation experience for Cancer Society’s Daffodil Day or keeping Kiwis informed with vital safety information in New Zealand’s alpine regions, in the end, we want to create products that put our client's customers and users first.

Conclusion

Hopefully, you now have a better understanding of what UX and UI actually mean and how they complement each other during the web design process. In an upcoming blog, we’ll get to the bottom of what Customer Experience (CX) represents and how it relates to UI and UX.

If you want to chat about any web design projects you have coming up click the link below. We’d love to hear from you!

Get in touch

by Somar Digital
UX UI