Connected but different: What separates UX from UI

UX is the procedure a design department uses to create products that provide meaningful and relevant experiences for users. It encompasses methods of product incorporation such as design, branding, ease of use, and functionality.

The priority is to transform products and services into something intuitive that is enjoyable and accessible. It relates to digital design for websites and apps.

 

 

In UI, the person responsible has the mission of generating easier and friendlier interfaces in which the user will make several interactions.

 

There are four elements to think about:

• What buttons are there and what do they look like?
• What typography is chosen?
• What do the icons look like?
• What colors are used?

 

“In times where we are overloaded with information, the user likes to be surprised outside of standardized and automated experiences. Color, shapes, and typography, influence the user’s emotions and are key points when designing a website or app. There is no better response to our project than a WOW!” Mariana Santos, UX/UI Designer at Ytech

 

 

In short, UX is all the research work, interviews with users, market studies, and even wireframes. UI is the visual part of the interface after being studied and after concluding, it is passed to high fidelity prototypes

In other words, UX is what those who interact with those items or services take with them, in terms of content. What does the person feel when using the product or service, during and afterward?

UI would be the composition of all the elements that make their interaction with a product/service. What path does the user take through the visual interfaces, while using it?

Both aim to enhance the user experience. For content to be of value, it should follow the following topics:

• value content
• content with relevant meaning
• originality
• it must fulfill a need
• intuitive to the user
• general usefulness
• desire to consume: the whole identity through the image, the brand, and other design elements are used to thrill and arouse a reaction in those who read.

 

“The focus of UI Design is everything that users can see and interact with! As a UI Designer, one of the things I pay attention to in an application is the balance of colors, images, fonts, sizes, and even spacing. Our job is to make navigation easier and more fluid, and we should always take into account all the details, and develop interfaces that are innovative and captivating.” Sara Santos, UX/UI Designer at Ytech

 

 

• Contributes to engaging users through interaction and dynamism;
• Facilitates customer retention;
• Attracts more users;
• Decreases the amount of time and costs in the development of a product;
• Positively interferes in productivity

 

After analyzing the briefing, we propose the project. ​We’ll have a team of 2 people working on it. This project has been customized, based on your current needs.

UX research​ includes:

• Business challenges​;
• Customer interviews;​
• Feature requests​;
• Ideation & Strategy;​
• Information architecture;​
• User/Usability testing​

​

UI design​ includes:

• Wireframing​;
• Functionality exploration​;
• Prototyping​;
• High-fidelity mockups​;
• UX deliverables​;
• Style guide & functional specs​

 

 

 

 

PHASE 1: Discover, plan and research:

To understand as many perspectives as possible, we need you to first identify key users (5-10). The gathered findings will be then categorized into three major groups:

• What users would like to see improved;
• What users wouldn’t like to lose;
• What users would like to have.

 

 

PHASE 2: Comprehensive user journey

At this stage, we will define the application’s navigation structure and main layout. The challenge when building architecture is in understanding how your app works from the user’s perspective, and how to organize that information into a readable format.

Based on phase 1 conclusions, we will organize information through a visual hierarchy (features, functions, behavior) and create a flowchart.

 

PHASE 3: Prototype and test visual representations

During the design and testing stage, low-fi prototypes  (sketches, wireframes, and clickable interfaces) will be shared with users to show different solutions right or wrong, and iterate quickly over the winning ones.

The level of fidelity of prototypes will increase as we get closer to the final design. Lastly, we will deliver a linked prototype for easy understanding of pages related to each other.

 

PHASE 4: Support documentation and next steps

No one is better than the designer who knows the prototype from end to end. That’s why we think it’s important to record the complete animation of the final prototype to be reviewed later. We will write a detailed text of flow and functions telling what decisions were made and how can they lead Deimos to the set business goal.

We will also provide a style and features guide with our suggestions for future work.

 

 

Agile Methodology

The agile methodology emerges to break the traditional and linear methodology. The focus is on constantly reviewing the project as needed without having to wait until the end to review and correct it.

This methodology gave rise to new and different concepts and methodologies: Scrum, Kanban, and lean.

• More collaborative
• Quicker
• Open to change

 

 

Scrum

With this methodology, work is broken down into short cycles known as “sprints, which typically last 2 weeks. The work is put into the backlog for each sprint.

Tools & Apps: JiraSoftware, Azure DevOps, YouTrack.

 

 

Kanban

In this method, progress is represented visually by tasks in columns. The backlog is fed with the tasks that are still to be done and moved according to the development.

Tools & Apps: Trello, asana, miro

 

Scrumban

Methodology in which the team pulls tasks from the backlog, defined at the beginning of the sprint, according to its capacity. Through the limits of what is WIP during the sprint, the flow can be continuous through planning, revisions, and retrospectives.

Tools&Apps: Any of the Scrum / Kanban tools discussed above

 

Lean methodology

Maximum value, minimum waste. Reduce what consumes resources and does not add value for the customer, overproduction (inventory or processes), and overload that can lead to breakdowns.

Tools&Apps: teamwork, runrun.it

 

Tak to us if you need a UX/UI Service!