UX design is a field that has been around for a while but is still in its infancy in terms of being structured. As technology merges more and more with our daily lives, the focus is gradually shifting from the purpose the technology serves, to the experience it provides. In short, the UX designer is responsible for making the product as user-friendly and delightful to use as possible. What exactly that entails and the tools and technologies required to do this, are discussed further in this article.
A UX designer needs to understand who s/he is designing for. This requires a combination of psychology and market research. The UX designer does not need to have a degree in psychology but needs to be able to understand the users’ behaviors and requirements. Surveys, field studies, analyzing competitors, eye-movement tracking and even using a few online tools help do this.
Google Analytics, Crazy Egg and Kissmetrics are a few of the tools that help analyse how a user perceives a website or a mobile app. Google Analytics is pretty much the standard used but it can be limited at times. Crazy Egg collects data from every click received. It then creates a heat map of your page and Kissmetrics is one of the best available. Its only limitation is that it does not give you any location or demographic data.To compare two versions of a site or an app (aka A/B testing) the UX designer can use tools such as
GA experiments (a Google product) and Optimizely.
Based on the findings of the research, the UX designer may create a fictitious identity or persona of the kind of user they need to design for. With this, the designer can create imaginary scenarios to understand how the user will react to the product. The basic idea here is for the UXer to put themselves in the shoes of the person they are designing for.
2. Information Architecture & Wire Framing:
Information Architecture is the process of structuring information. It is the skeleton or blueprint of the product. If the user can not access information easily, they will lose interest and move on to the next best product.
So Information Architecture done well goes a long way for a company. In terms of websites and mobile apps it refers to organizing the flow of content, hierarchy and navigation.
With wire framing each step that a consumer might take while interacting with the product is represented. Mockplus, Sketch and MS Visio are a few commonly used tools to create wireframes and site maps. Mockplus is relatively simple to learn and easy to use. Sketch is known for its vector shapes that easily adapt to changing sizes and
layouts. MS Visio can be linked to multiple data sources such as MS Excel and Active
Directory.Information Architecture is an overall view while wire framing is more specific.
3. Visual Design:
This is when the wire frame is brought to life. Colours, images, graphics and typography are added to the wire frame. Here, the aim is to give a visual representation of what the final product will look like. Some UX designers prefer to create these ‘mock-ups’ themselves using software such as Photoshop or Indesign, while others prefer to hand this over to a front-end developer. Good UX designers may even have some basic knowledge of UX animation software such as Principle or Adobe After Effects. With these, mock-ups become more interactive and give clients a better understanding of the product at an initial stage itself.
As the name suggests, a prototype is a sample of the final product. In the digital space it focuses on interactivity. By prototyping, the UX designer can understand the practical implementation of the design. This method is commonly used to check a product for glitches, before actually launching it.
Digital Prototyping involves using software to create your prototype. By doing this, the UX designer doesn’t need to write a single line of code. Adobe XD, Axure, Proto.io and Invision Studio are some of the popular digital prototyping tools. Axure is one of the most comprehensive prototyping tools. It requires some coding skills and is mostly used for website prototyping. Invision is useful if you need to share files in real-time and Proto.io is used to create high-fidelity and highly animated prototypes in browsers. For designers who can code, the next level of prototyping is HTML prototyping. However, only those who are extremely confident of their coding skills attempt this. Once a product is launched, the UX designer continues to work on improving and upgrading it. His/her job is an on-going process.
Depending on the requirements of the project or the job, the UX designer may or may not need to know how to use every tool mentioned in this article. As quick as technology is evolving so is the toolkit of the UX designer. There are no hard and fast rules on which technological tool a UXer needs to know. And it is humanly impossible for everyone to learn all available software! However a basic knowledge of each kind of software is what is required.
Given the above, it may seem like a UX designer needs to have a very strong technical background. The most important skill though that a UXer needs is the ability to link these processes together keeping the larger picture in mind.