UX Design and Product Development
For the real UX Designer Candidates or just curious!
Do you belong to the following groups:
- A developer or student who is curious about what UX Design is?
- Are you curious about what a UX Designer does daily?
- What do you need to learn to be a UX Designer?
- Are you interested in UX, want to learn UX, but are confused about where to start?
- People who are looking for references and recommendations to learn UX Design
If you have any of the questions above, then please continue to read this article.
Let’s get started ^^
First, we begin with an introduction to UX.
What is UX? UX (User Experience) increases user satisfaction (application users or website visitors) by improving the usability and enjoyment of interactions between users and products.
So, in a nutshell, this User Experience is …
A science that focuses on learning how to build a product that doesn’t make the user dizzy when using it.
From another perspective, it means making it easier for users to use the product.
The “Golden Circle” theory practically explains that selling a product successfully does not start with its features but with the reason for creating the product. In other words, we must understand the reasons behind the activities carried out and the goals to be achieved; (according to Simon Sinek); other people ‘buy’ the reason we do what we do, not what we do.
So, in this golden circle theory, everything related to making a product must start from WHY; we must be able to answer the question, “why do we do what we do?” Until it gets its value and purpose. Then move to the second step, HOW, which will answer questions about how the process will be carried out. Then move to the third step, WHAT, which is the outcome; it can be in the form of products or what we do.
In another sense, UX is a slice of Human, Technology and Business.
How UX Designer works in IT product development
Here we will learn UX Design in product IT Development based on McCall’s Quality Models.
What is behind this model is that the lack of clearly defined requirements to cover critical functional aspects of software is the cause of poor software performance. And the purpose of this model is to bridge the gap between the User and the Developer.
We will briefly explain the 3 main perspectives of this model, namely:
- Product revision (Maintainability, flexibility, and testability): The ability to experience change.
- Product transition(Portability, reusability, and interoperability): Ability to adapt to new environments.
- Product operations (Correctness, reliability, efficiency, integrity, and usability): Operational characteristics.
- A UX Designer only goes through the process in Product Operation about what a product should look like before its release to the market. If a product has gone through the Product Operation stage, it can operate properly and has good usability.
A UX Designer only goes through the process in Product Operation about what a product should look like before its release to the market. If a product has gone through the Product Operation stage, it can operate properly and has good usability.
UX (User Experience) vs UI (User Interface)
It can be analogized to this iceberg, UI is only a part of the iceberg that can be seen from the surface, and UX is a large part of the iceberg that is not visible from the surface. Can you imagine how UI is without UX or vice versa?
“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”
This is an illustration of how the scope of UI and UX.
FrontEnd Developer vs UI/UX Designer
The scope of work of a Front End Developer is not only translating a design into a usable web or application. But it also includes managing data from or to the server, testing, learning frameworks, implementing git-flow, managing a software product’s aesthetic and functional balance, and other work.
While the scope of work of a UX Designer is to do a deeper exploration of how to solve a user’s specific problem, the responsibility of a UX designer is to make sure that every step by step goes logically and clearly. And a UX Designer must understand the habits and needs of the user very well.
Very different, isn’t it?
The products produced from the work of a UIUX Designer are only up to a Prototype, while the products made by a front-end developer are up to an MVP.
Why is a UX Designer influential in developing/manufacturing a product?
A UX designer can reduce the cost and time of developing a product/application because the requirements have been met and the product is delivered well to the user because the experience provided by the product is of good value.
Layers in UX Elements
The theory of The Element of User Experience was first coined by JJ Garrett, based on the User-Centered Design (UCD) concept. According to James JJ Garrett, a digital product built based on the five elements of User Experience will be an excellent digital product. It’s the same as making a building. What’s below is the foundation. No matter how good a structure is built, if the foundation is not strong, it will collapse too, so in this process of UX elements, the foundation lies in the first element, namely Strategy. Here is a brief description of these five elements:
Strategy Plane
What do we want to get out of this product?
What do our users want to get out of it?
In this element, we will find out about two parts: the needs of the user (user needs) and the purpose of making the product (product objectives). At this stage, research will be carried out to align user and business goals. This strategy is not only about how users use the product but also how the product is made according to user needs. To understand user goals and business goals, even a UX researcher must talk and meet directly with users and the business team (including product managers, management, and maybe even the CEO).
Product objectives are goals in the form of business goals, such as company revenue targets, conversion rate targets, and others. The determination of these business goals needs to be identified and explained in detail the solution to the user problem to be solved. Brand identity also needs to be built to give users a positive impression of the brand we create. You can start by developing a Lean Canvas or Business Model Canvas to make it easier to create Business Goals.
User needs are product goals in the form of user needs who will use our product. We must know what users want from our products and how eligible the products are for the goals of the development. To make it easier to find user needs, what needs to be done is to understand user needs by researching to collect information related to the product you want to develop. Many methods can be used to obtain more specific data. We can do a user test/field study.
The next step in this layer is the creation of personas to define a more specific target user. A persona is a fictional character that is represented by user segmentation.
Scope Plane
This element consists of functional specifications and content requirements. In general, it means what we will and will not do.
Functional specifications are descriptions of a set of features in the product, for example, food order, cart, payment, and others.
Example :
- Be Positive
- (Negative) The system will not allow the User to buy Bread without buying Jam
- (Positive) The system will direct the User to the Jam page after purchasing the Bread
- Be Specific
- (Not specific) The product with the most views will be marked
- (Specific) The product with the most viewers will appear at the top of the hotlist page.
Content requirements are descriptions of a set of content elements in the product, for example, maps, videos, images, illustrations, icons, buttons, and others.
Structure Plane
The structure plane is an element that is on the third level. This element consists of interaction design and information architecture. Now, the content elements and features defined in the scope plane will be further arranged in this structure plane.
- Interaction design defines how the system responds to what the user does. In essence, we will create a user flow/task flow that will be passed by the user from the beginning of using the product to the end (until the user’s goals are met), for example in e-commerce: the flow that the user passes from home to the checkout process and the user is successful. Make a payment. Besides that, we also make how to interact with each flow, whether the user has to swipe, scroll, etc.
- Information architecture is the arrangement of content elements to assist users in understanding the information displayed on the product. These contents will be grouped into several categories or menus.
Skeleton Plane
The Skeleton Plane is an element that is at the fourth level. This element consists of information design, interface design, and navigation design. At this stage, we have already started the design part.
- Information design is the presentation of information for easy understanding. Report that has been grouped in the information architecture will be poured into a screen.
- Interface design is the arrangement of interface elements to allow the user to start interacting with the functions or features of the product. This interface design is in the form of a wireframe.
- The navigation design is a set of screen elements that allow the user to move through the information architecture.
- The implementation of the skeleton plane is the creation of a wireframe that will provide a rough description of the interface of the product that the user will use.
After the interaction design, information architecture and navigation design are clear. The next step is to create a wireframe.
Surface Plane
The surface plane is an element that is at the fifth level. This element consists of sensory experience, which is realized through high-fidelity design. High-fidelity design is very detailed in font, color, resolution, and others.
The things to note on this layer are:
- Contrast: Can help communicate essential information to users and draw attention to specific areas.
- Follow the Eye: Know how the user flows through a page, such as the Z pattern F pattern.
- Grid: so that the interface layout we create looks neat and comfortable for users to see, for example, The 8-point grid system or the 12-grid system.
- Consistency, Color Palletes, Typography, and Style Guide are no less essential to think about in this layer.