Our Blog

Our team of specialists wanted to share some articles on technologies, services, trends and news of our industry in the era of digital transformation.

UX/UI Design Foundations: A quick guide for your business.

UX/UI Design Foundations: A quick guide for your business.

Nowadays, platforms such as websites, apps, management systems, among others, play a fundamental role in the day-to-day life of your organization. A website, for example, helps you gain customer trust and visibility. When someone hears something about your brand, the first thing they do is search for it on the internet. And if your website is friendly and attractive, you already have some points earned.

It is also important to have an effective user interface and an appropriate design of the experience in business management systems. ERP, CRM, SCM, are acronyms that are heard a lot in companies. Its objective is to optimize the work of employees and the organization in different key areas, such as production, supply chain, marketing, customer relations… User interfaces centered on experience can help your employees to work efficiently and, then, deliver greater value for your customers.

 

UI/UX Design: What is UX and how is it related to UI?

User experience (UX) focuses on how a person feels about using a product or service. It highlights the experiential, affective, significant and valuable aspects of user interaction. It covers all aspects of the end-user interaction with the company, its services and its products. It is subjective in nature, because it deals with an individual’s performance, feelings, and thoughts about a system. It defines the user’s path as they interact with the design, form, and functionality of the platform.

The user interface (UI) is the means by which a user interacts with a device. It includes all the elements, such as buttons and controls, of the interface of a web or app. An interface developed from a UI approach will surely have also been planned with user experience in mind.

The ultimate goal of a UI/UX design is to develop an excellent user experience when using the interface of the website, app or program. In this sense, it is important to consider different dimensions that interact with the user: words, visual representations (such as graphics, illustrations, and other elements), different spaces in the interface, usage time and, of course, user behavior.

 

UX UI Design

 

A clear example of UI/UX design is the mobile app we developed for YPF Argentina. This project was focused on improving user experience through a mobile application for oil supply inventory management.

 

What should be taken into account regarding UI/UX design?

Interface design focused on user experience should follow the following principles:

  • Structure. The layout should organize the user interface in a meaningful and useful way. This relates to the general architecture of the user interface.
  • Simplicity. The design should facilitate simple and common tasks, communicate clearly and simply with the user’s own language, and provide accesses that are meaningful and related to the main processes.
  • Visibility. The design must make visible all the options and materials necessary to be able to carry out a task without the user being distracted by other types of information. Good design doesn’t overwhelm users with alternatives nor confuse them with unnecessary information.
  • Feedback. The design must keep users informed of the actions carried out and changes in the status of the process. It is also important to inform the user about errors or exceptions that are relevant through clear, concise and familiar language.
  • Tolerance. The design must be flexible and tolerant, reducing errors and redundancy for the user.

 

Key considerations for UI/UX Design.

 

Personas and scenarios.

The creation of personas or archetypes is a staple tool in UX, mainly because it can help you visualize who the user you are designing for is. The persona methodology consists of determining, through prior research, a semi-fictional representation of the ideal user. It is about “putting faces and eyes” on the people who are going to use the platform. In turn, we need to place this persona in the potential scenarios of use of the platform. The scenarios are the situations in which the user finds himself, for example, an employee who receives a complaint from a client and needs to register it in the CRM platform, or one who has a shortage of stock due to a malfunction of his SCM system.

 

UX UI Design Persona

Persona example by Adobe

 

Responsiveness of the platform.

We know that users work in different screens, so the design has to be responsive, that is, able to adapt and be used in a variety of screens.

 

UX UI Design - Responsiveness of the platform

Illustration by Surfthedream

 

Platforms need to adapt to both desktop and mobile versions. But the mobile environment represents a number of design challenges. For that, it is necessary to consider some tips to offer a good mobile experience:

  • Minimize content.
  • Offer simplified navigation.
  • Restrict to the minimum amount of possible actions.
  • Guarantee continuity and consistency in navigation.
  • Anticipate potential errors by conducting usability tests.

 

In our recent project for Exolgan, we developed a corporate web portal, which offers an optimal experience on the different screens. You can reed more on it here.

 

Quick UI tests with users.

Thanks to the contribution of Jacob Nielsen in his paper “Discount Usability for the Web,” the UX world has been using different techniques for many years to simplify the process and reduce the costs of usability testing. Nielsen created a simple and practical way to perform informal testing, which consists of conducting a quick test on a small group of five users. According to the author in the paper, with five users we can detect 85% of usability errors.

The test consists of developing a navigable wireframe, which could be built on paper or with the help of prototyping tools, and then testing it with users. What will be sought is to know the user’s first impression of the interface and understand how it interacts with it, to detect opportunities for improvement. This stage of the process is similar to the prototyping and testing phases of the design thinking methodology.

 

As you can see from what we discussed in this article, UI/UX design is essential for all types of companies. Platforms must have friendly and efficient interfaces, and the user experience must be the focus of the design. The benefits for organizations are varied and there are methodologies, like the ones we use at Huenei, that can help you achieve the perfect development.

Hardware-accelerated frameworks and libraries with FPGAs

Hardware-accelerated frameworks and libraries with FPGAs

Introduction
In the previous articles, we talked about Hardware Acceleration with FPGAs, the Key concepts about acceleration with FPGA that they provide, and the Hardware acceleration applications with FPGAs. In this latest installment of the series, we will focus on Hardware Accelerated Libraries and Frameworks with FPGAs, which implies zero changes to the code of an application. We will review the different alternatives available, for Machine and Deep Learning applications, Image, and Video Processing, as well as Databases.

Options for development with FPGAs
Historically, working with FPGAs has always been associated with the need for a Hardware developer, mainly Electronic Engineers, and the use of tools and Hardware Description Languages (HDL), such as VHDL and Verilog (of the concurrent type in instead of sequential), very different from those used in the field of Software development. In recent years, a new type of application has appeared, acceleration in data centers, which aims to reduce the gap between the Hardware and Software domains, for the cases of computationally demanding algorithms, with the processing of large volumes of data.

Applying levels of abstraction, replacing the typical HDL with a subset of C / C ++ combined with OpenCL, took the development to a more familiar environment for a Software developer. Thus, basic blocks (primitives) are provided, for Mathematical, Statistical, Linear Algebra, and Digital Signal Processing (DSP) applications. However, this alternative still requires a deep knowledge of the hardware involved, to achieve significant accelerations and higher performance.

Secondly, there are accelerated libraries of specific domains, for solutions in Finance, Databases, Image, and Video Processing, Data Compression, Security, etc. They are of the plug-and-play type and can be invoked directly with an API from our applications, written in C / C ++ or Python, requiring the replacement of “common” libraries with accelerated versions.

Finally, we will describe the main ones in this article, there are open source libraries and frameworks, which were accelerated by third parties. This allows us, generally running one or more Docker instances (on-premise or in the cloud), to accelerate Machine Learning applications, Image processing, and Databases, among others, without the need to change the code of our application.

Machine learning
Without a doubt, one of the most disruptive technological advances in recent years has been Machine Learning. Hardware acceleration brings many benefits, due to the high level of parallelism and the enormous number of matrix operations required. They are seen both in the training phase of the model (reducing times from days to hours or minutes) and in the inference phase, enabling real-time applications.

Here is a small list of the accelerated options available:


TensorFlow is a platform for building and training neural networks, using graphs. Created by Google, it is one of the leading Deep Learning frameworks.


Keras is a high-level API for neural networks written in Python. It works alone or as an interface to frameworks such as TensorFlow (with whom it is usually used) or Theano. It was developed to facilitate a quick experimentation process, it provides a very smooth learning curve.


PyTorch is a Python library designed to perform numerical calculations via tension programming. Mainly focused on the development of neural networks.


Deep Learning Framework noted for its scalability, modularity and high-speed data processing.


Scikit-learn is a library for math, science, and engineering. Includes modules for statistics, optimization, integrals, linear algebra, signal and image processing, and much more. Rely on Numpy, for fast handling of N-dimensional matrices.


XGBoost (Extreme Gradient Boosting), is one of the most used ML libraries, very efficient, flexible and portable.


Spark MLlib is Apache Spark’s ML library, with scaled and parallelized algorithms, taking advantage of the power of Spark. It includes the most common ML algorithms: Classification, Regression, Clustering, Collaborative Filters, Dimension Reduction, Decision Trees, and Recommendation. It can batch and stream. It also allows you to build, evaluate, and tune ML Pipelines.

Image and Video Processing
Image and Video Processing is another of the areas most benefited from hardware acceleration, making it possible to work in real-time on tasks such as video transcoding, live streaming, and image processing. Combined with Deep Learning, it is widely used in applications such as medical diagnostics, facial recognition, autonomous vehicles, smart stores, etc.


The most important library for Computer Vision and Image and Video Processing is OpenCV, open source, with more than 2500 functions available. There is an accelerated version of its main methods, adding more version after version.


For Video Processing, in tasks such as Transcoding, Encoding, Decoding and filtering, FFmpeg is one of the most used tools. There are accelerated plugins, for example for decoding and encoding H.264 and other formats. In addition, it supports the development of its own accelerated plugins.

Databases and analytics
Databases and Analytics receive increasingly complex workloads, mainly due to advances in Machine Learning, which forces an evolution of the Data Center. Hardware acceleration provides solutions to computing (for example with database engines that work at least 3 times faster) and storage (via SSD disks that incorporate FPGAs between their circuits, with direct access to data processing). the data). Some of the Accelerated Databases, or in the process of being so, mainly Open Source both SQL and NoSQL, are PostgreSQL, Mysql, Cassandra, and MongoDB.

In these cases, generally what is accelerated are the more complex low-level algorithms, such as data compression, compaction, aspects related to networking, storage, and integration with the storage medium. The accelerations reported are in the order of 3 to 10 times faster, which compared to improvements of up to 1500 times in ML algorithms may seem little, but they are very important for the reduction of costs associated with the data center.

Conclusions
Throughout this series of 4 articles, we learned what a device-level FPGA is, how acceleration is achieved when we are in the presence of a possible case that takes advantage of them (computationally complex algorithms, with large volumes of data). General cases of your application and particular solutions, ready to use without code changes.

How can Huenei help your business with Hardware Acceleration with FPGAs?


Infrastructure: Definition, acquisition and start-up (Cloud & On-promise).


Consulting: Consulting and deployment of available frameworks, to obtain acceleration without changes in the code.


Development: Adaptation of existing software through the use of accelerated libraries, to increase its performance.

Guide to create a User Story Mapping

Guide to create a User Story Mapping

User Story Mapping is a visual exercise often performed by product managers and their application development or web development teams to define the work that will create the most enjoyable, optimal, and agile user experience.
In other words, it is an agile and powerful product design method that is used to create a user-centered product, that is, they are the visual aid to build a shared understanding between the members of a web or application development project, to learn how to develop a successful design process.

This type of method is used to improve the understanding of the teams of their clients and to prioritize the work of all the development teams, where they create a dynamic diagram of the interactions of a representative user with the product, evaluating what steps the greater benefit for the user and prioritizing what should be built next.
In this case, this process always begins with the understanding of a problem and at the same time, knowing the user’s objectives, allowing to centrally draw the steps that this user will go through to achieve their objectives and thus narrate a natural narrative flow. user journey to explore all user activity easily.

Basic elements of a User Story Mapping
In order to know how to elaborate a User Story Mapping, it is important to know what are the structural elements that organize this type of design, that is why in Huenei IT Services we first present their names and in this way, you will be able to better understand each of the steps.

Next, the basic elements of this type of design, which, when organized in two dimensions (the vertical denotes priority, while the horizontal represents the steps a user takes to perform actions in the system, also known as the user’s journey or Buyer’s journey, allow a simple and clear reading of the general structure:

1) Backbone
In English, you will find it as “Backbone” and this is the base of the map, it consists of epics or themes that describe the general activities of the user in the system, such as “Search Products”, in this case, the epics are organized in horizontal order, as they represent the steps a user takes while interacting with the product, which is basically a simple visualization of the user’s journey.

In order to better understand the concepts of epics and epics within this structure, it is important to know that the epic represents the User Story so large as to be able to accommodate multiple stories and the epic refers to when multiple epics are held in and of themselves.

2) User Stories
Also known as “Stories” and unlike a flat backlog structure, user stories are organized in vertical and horizontal dimensions.

In this case, they are grouped into corresponding epics, which describe more specific tasks that a user may require. If an epic describes a search phase, it can include stories like basic search, filter products, advanced search, etc. When stories are vertically prioritized, they can be broken into releases.

3) Users
It refers to the fictitious people who will use the product, that is, they will carry out the steps described in the user stories.
This element is provided by UX specialists or by the marketing department and will serve as the basis for the map, since not knowing who the users are, it will be impossible to understand the epics of the product and, therefore, will lose the whole point of the story mapping.
By having user people or talking to UX staff, you can define who are the people who will perform certain actions in the system.

Guide to develop a User Story Mapping
Making a User Story Mapping will be as varied and different according to the size of your team, the scope and duration of a project, and the maturity phase of the product.

However, this is a process that must be carried out, especially when optimal results are expected from start to finish, and for this, the best time to start making it is when you have met all the product requirements and defined the equipment to the project, already knowing what the backbone is, the stories of the users and the users, it is easier to carry out these steps.

Step 1: Set the objectives of the project
First of all, focus on the potential customers of your business and summarize what goals these customers can achieve through the use of your product, write each of the goals and organize them in the logical order, you can use stickers or do it on aboard.

Step 2: Create the trip map
After collecting the objectives, it accounts for the user’s journey to achieving the objective, identifies the steps and avoids errors by faithfully following the narrative flow, to organize it closer to reality, placing the steps on the second line, step by step.

Step 3: Find solutions
Through this process, you create “user stories”, initially, you can use the following template: As a user – I Want This Goal – So the step is this.
Brainstorm with your team to collect most of the possible solutions and put all the user stories in the related steps.

Step 4: Organize the tasks according to their priority
If the brainstorming team was successful, then the story map should be full of great ideas, however, these stories cannot be run at the same time so in this step, you determine the different priority levels.

Identify the most common behavior or basic solution to the problem, so you organize user stories by priority and put the most important one at the top of the column.
Discussing customer priorities is crucial, so make sure you stay connected to your partners.

Step 5: Determine the launch structure
To do this, it initially indicates the smallest part of the product, the minimum viable product, and tries to complete the user’s journey starting with the most common or easiest tasks to carry out.

In this part, just focus on completing at least one user journey, after that, organize the rest of the accumulated work into tangible pieces by drawing horizontal lines between tasks.
By adding estimates to user stories, you can plan and schedule the entire development process version by version.

All the steps in this guide to elaborate a User Story Mapping are important, especially the latter represents one of the most important pieces of information in the whole process because it not only represents a crucial phase of the map but also because it will help you calculate the delivery time and costs.

Conclusions
The most important thing is to always keep in mind the end-user experience since their level of satisfaction and adoption are key in the success of the development, as well as in the fulfillment of the business objectives.

If you need to know more about User Story Mapping, we recommend you visit our services page UX / UI Design Services .

What is User Story Mapping?

What is User Story Mapping?

In large projects, collaboration and teamwork are often crucial to make iterative and incremental progress possible over time. The more complex the project, the more difficult it is to reach the final goal: connecting with the end-user.

For Software Development projects where a team must carry out complex Testing & QA processes to ensure the final product meets customer expectations, it is vital to have a simple mechanism that allows monitoring that development is directing its resources to meet the corresponding needs.

This is where techniques such as User Story Mapping become a reliable way to create engaging projects that combine the vision of users and developers in a balanced and functional way, creating representative prototypes that provide a glimpse into the final result, and promoting teamwork.

What is User Story Mapping?
User Story Mapping is a technique to set the requirements for a service or product, using inputs from users and developers, so that the essential functions can be determined. This  is called Minimum Viable Product or MVP.

In large-scale projects, the User Story Map can be broken down into two dimensions: the horizontal dimension –also known as Customer Journey– and the vertical dimension, which will help identify the actors involved in the project both directly (users) and indirectly (developers).

Main uses
Initially, the User Story Map can be difficult to implement and much more difficult to identify, especially when many steps are being taken in the development of a project. It generally helps us develop each area where the project has some type of direct or indirect interaction with users. During the development process, we seek to identify each of the variables that will come into contact with the user, such as activities, waiting times, minimum needs, information, interaction with visible content, login, etc.

It is also used to create a user archetype that helps identify different steps that the user will take when using the final product or service, as well as visual designs for each phase of the project, to provide a vision of what the user will experience at each stage.

Implementation process
Implementation can be done in two ways: by making an archetype of the user model (also known as Customer Journey) or by identifying the minimum characteristics of the product; these are also called horizontal dimension and vertical dimension, respectively.

 

Designing an archetype user model (Customer Journey)
A card is made with all the characteristics of a user, so that it can be identified as if it were a real person (for large projects, several cards representing different users are ideal to make testing easier).

This allows us to identify the parameters by which the project can be developed, having each of the users as participants. This phase can be applied as many times as necessary to identify all the existing user archetypes.

 

Setting the minimum characteristics for the product
The second type of implementation is not much different from the first, but in this case, the focus is on the user and type of Customer Journey. This allows us to set the steps that will be affecting the project or even those events that may be important in the final resolution.

 

For example, Huenei IT Services provides multiplatform UX/UI design services, so if a project changes in its final phase and the client requires a custom mobile application, we can provide seamless mobile development.

Benefits
Beyond optimizing resources by allocating all efforts to solving the real needs of users and the key development functionalities, we have found that:

  • User Story Mapping helps build a product from scratch, making it much easier to correct mistakes and evolve your processes in the future.
  • Threads can be detailed for the main processes that were hardly detailed at the beginning. These are vital for creating tailor-made solutions, improving decision-making in the future, knowing what to prioritize, etc.
  • It makes it easier to identify one or more versions of the product that you want to provide to the user before delivery, so the product’s features and functions can be defined more precisely.
  • It helps prioritize activities to avoid delays.
  • Analyze each of the activities performed by the user to create a completely level systemic structure.
  • Help control User Stories in different environments, so that each member of the team can keep track of every movement made in real time.
  • It controls delays or failures of all kinds in a general and structured way, so that it is much easier to foresee future events that may harm the user experience, such as system failures that can be identified by performing a Testing.

Recommendations

  • Implement post-its or any other similar tool (such as billboards) to make the process of writing ideas much easier and more dynamic.
  • Hold constant collaborative brainstorming sessions where you can discuss topics and come up with creative ideas.
  • Keep a record of everything that is discussed during the meetings. This will help you keep a digital record of the topics to discard them in the future.

    Summary
    Developing projects focused on iterative progress is often a challenge for anyone, especially when the project’s main objectives and purpose are unclear. Teamwork is, without a doubt, the basis of everything, and that implementing User Story Mapping is so convenient and easy.

    Huenei IT Services knows that no matter how far you want to go in a project, sometimes choosing a simple technique is the best way to achieve your goals. Software Development Projects, Mobile Development, QA (Quality Assurance) and even outsourcing in IT projects could require a flexible and dynamic technique such as User Story Mapping. It is a fairly intuitive method focused on collaboration where each member of the development team is encouraged to participate and come up with ideas that can bring the project closer to its final resolution.

    The impact of story mapping on a team’s work dynamics is definitely positive, and aside from facilitating an understanding between developers and users, it promotes communication within and outside the team, a factor that can make a difference in any project.