Exists a lot of ways to create web applications with a good UX,basically I think that the UX has a bunch of core values that we should have in mind at the hour of design the Prototypes or Wireframes such as: Usability, Utility, Desirable, Valuable, Accessibility , Reliability and Findability.

Usability:

Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.

Utility:

We can known if we are fulfilling the utility of our apps answering these questions:

Is this feature useful to our final users?

Every time that we are defining our user interfaces,we should be able to answer this question in order to prevent work in features that our final users doesn’t care about.

Does the feature meet the needs of the final users?

When we are designing User Interfaces we should care about the needs of the final users in order to have a good User Experience.

Desirable:

Desirability gives users what they really want as well as need.

Valuable:

Based on the  Hardvard Business Review they say: “The amount and nature of value in a particular product or service always lie in the eye of the beholder, of course. Yet universal building blocks of value do exist, creating opportunities for companies to improve their performance in current markets or break into new ones. A rigorous model of consumer value allows a company to come up with new combinations of value that its products and services could deliver. The right combinations, our analysis shows, pay off in stronger customer loyalty, greater consumer willingness to try a particular brand, and sustained revenue growth”.

Accessibility:

Is a measurement of a user’s ability to use products/services, the extent to and ease with which they can meet their goals. Designing with accessibility in mind enables people with a range of abilities and disabilities to perceive, understand,navigate, interact with, and contribute to the web.

Reliability:

Is that the research results must be repeatable or reproducible. Other researchers must be able to conduct the same research under the same conditions and generate the same data.

Findability:

Is a measurement of how easy it is to locate content on your user interface.It means users will be able to find content easily on your app.

What I need to design the UI of my app?

In order to design and create the wireframes and prototipes of your web application I think that is important have a balance between the Business Needs and the Final User needs,so there is a bunch of methods that we can use to evaluate the needs of your final users such as: Stakeholder Interviews, Questionnaires, card sorting,Storyboards,Diagram of Use Cases,User Testing,Surveys…

Stakeholder Interviews:

Stakeholder interviews are one-on-one conversations with people who have a vested interest in the success of the product you are working on.A stakeholder is anyone within an organization who can offer useful advice about the product and ultimately help simplify the design process. Additionally, stakeholders rely on the product’s success for their own gain, either personally or professionally. Although these are normally high-level employees, stakeholders can be lower-level employees or even prominent users.

Questionaries:

There are nine steps involved in the development of a questionnaires:

• Decide the information required.
• Define the target respondents.
• Choose the method(s) of reaching your target respondents.
• Decide on question content.
• Develop the question wording.
• Put questions into a meaningful order and format.
• Check the length of the questionnaire.
• Pre-test the questionnaire.
• Develop the final survey form.

Card Sorting:

Is a method used to help design or evaluate information architecture. In a typical card sorting session, participants organize topics into categories that make sense to them and group them accordingly. To conduct a card sort, you can use actual cards, pieces of paper, or one of several online card-sorting software tools.

Storyboards:

The purpose of UX storyboards is to consider and communicate a sequence of states, rather than provide specific visual direction. They demonstrate how someone might interact with a future product or service.

Diagram of Use Cases:

The use cases are the description that explains how the user should be able to use the product for the completion of the task. A Use case depends on Users action and the system responses to the users action.Once that we have already covered these features with one of the methods presented above , we can continue with the next steps that consist in design your wireframes and then the Prototipes of the UI’s.At this point is important to have already identified your use cases, once that all the parts approved this diagram(Stakeholders, Team Leads,Product Owner,UX Leads,…) now we can start to design the wireframes and then the prototipes.For example this is a Diagram of Use Cases that I created for the Pokedex UI project:

What is a Wireframe?

Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. Is a practice most commonly used by UX designers. This process allows all stakeholders to agree on where the information will be placed before the developers build the interface out with code.For example this is a Wireframe that I created for the Pokedex UI project:

What is a Prototype?

A simulation or sample version of a final product, which UX teams use for testing before launch.The goal of a prototype is to test and validate ideas before sharing them with stakeholders and eventually passing the final designs to engineering teams for the development process.

What is the difference between Wireframes and Prototypes?

• A wireframe is low-fidelity that takes less time to create, while a prototype is high-fidelity that is more time consuming.
• Wireframes are tools to get approval from stakeholders. A prototype will allow you to test the user experience and get user feedback from user interaction.
• A wireframe is more to convey the 30,000 foot view of the idea of the product. A prototype is something that will be similar to how the final product acts and behaves.
• A wireframe will make use of placeholders and focus on the overall structure. A prototype will make use of the actual design.

In my oponion a prototipe is a design of High Reliability about the design of every User Interface that you will have inside your web application,during this process we can work toguether with Graphic Designers in order to provide a beatiful UI.

Finally design the Backend

Once that we have the prototipes already created is time to design the Architecture of your Web Application,for these step we might use a bunch of Diagrams to describe your Backend such as diagram of architecture,diagram of Entity Relationship, Diagram of Classes.

Basically we need to define the components of the BackEnd that we will need we also need to define what kinds of databases we need for example MongoDB, MySQL,Postgres or MSSQL. Where we will put our web application or our microservices for example Google Cloud Platform, Microsoft Azure or Amazon Web Services? How much will be the costs of these components? to do that the Cloud Providers have a bunch price calculators such as Microsoft Management in Azure or AWS Pricing Calculator. What kind of authentication and authorization we are going to need? It depends of your business rules to ensure that only authorized users can access this services.How we can scale the resources of your backend in case of High demand? for this question is a good practice the use of Docker with Kubernates to automatically scale based on metrics such as CPU utilization, memory usage, or network traffic. Some cloud providers have some services to auto scale your resources such as AWS Auto Scaling.

Sometimes we might need diagrams of sequence to understand some process that intereacts with multiple Objects inside our system. Also we are going to need diagrams Entity Relationship to design your Database because we this diagram we can understand the data structure,we also should take care of the limitations of our app and the scope of this web application.Finally a custom diagram of architecture about how will be our backend with all this infrastructure working together.

Last but not least once that all team members have already identified all these features is time to define the User Stories that we need to address and split the development of these user stories in sprints , then we can start to program.

References

• https://www.interaction-design.org/literature/article/key-question-in-user-experience-design-usability-vs-desirability
• https://uxmag.com/articles/accessibility-in-ux-the-case-for-radical-empathy
• https://baymard.com/learn/findability-vs-discoverability-ux
• https://uxmastery.com/resources/techniques/
• https://uxdesign.cc/the-ultimate-guide-to-stakeholder-interviews-understand-your-clients-a3bcf87b6e8b