Understanding of web Application design & development.

A walkthrough of a web development journey from scratch.

by the Cloudwerx UI team.

Hey there! hope that based on the above image you might have got the context of this article, we are going to talk about web development’s entire journey and will try to cover all the myths and reality of the web development process.
Let’s Start with the bullet points of it in the next sections!

Innovative Requirement : 📖

If you have an idea, we determine your needs by providing custom innovative suggestions and let you know the whole process of development. The customer/client has a business idea in his mind but is not sure whether to jot it down on paper or make it functional on the web to give super exposure to his idea and promote it to the web for exposure, so here are the below factors come in the picture like :

UX research :

When it comes to any concrete integration with a set of multiple factors in one place we need to make particular preparations for it (we do our homework first) so the UX designers connect with the customer to understand his business idea and simultaneously his petitions and interest, there are lot many other factors to check with the customer while interacting with him, as eventually the designer is also investing his time and he always try to see that my time is not going in vein.

Requirement gathering :

Further, he gets all the details from the customer and starts working on it, with some rough work, such as :

Persona creation :

What is a persona? A persona is an archetype of a user that helps designers and developers empathize by understanding their users’ business and personal contexts.

Prototyping :

What is a prototype? A prototype is a simple experimental model of a proposed solution used to test or validate ideas, design assumptions, and other aspects of its conceptualization quickly and cheaply so that the designer/s involved can make appropriate refinements or possible changes in direction.

Review, suggestions, and iterations (if any) :

Later he gets the persona and prototypes reviewed by the customer, and he takes the customer’s review and work in case of any iterations of it later he moves further from a development point of view.

Finalization of the UX stage :

Once the design gets finalized by the customer

• Proceed it to UI development
• Backend and functional development
• QA
• Fixes and deployment
• Go Live

Let’s have a detailed view on the same, meanwhile, we will see the run time interesting example and compare the web development journey with the house-building activity along with videos and description since this is a very close thing to any human being and he goes through it at least once in life.

UX Research Basics

What are UX, UI, and CX? 🤔

The journey is pretty straightforward, UX designer is the real old person of the web application, after the Sales/Marketing team he is the one who interacts with customers and gets the required details and communicates with the other team stakeholders later he passes his work to the UI designer to convert the prototypes into the web/HTML pages and so on.

UX — User Experience :

User experience refers to the interaction between the user and a product or service. The purpose of user experience design is to create an easy, efficient, seamless, and all-around good experience for the user, ultimately the user story.

Principles of UX design :

• UX design is the process of developing and improving the interaction between users and a company.
• To design UX can refer to both digital and non-digital mediums.
• UX design is not focused on visuals but rather on the overall feel of user experiences.
• UX is a powerful way to drive profits.

Features of good UX answer the following:

• How does the experience make the user feel?
• How easy is it for the user to accomplish their tasks and goals?
• Is the experience smooth and easy, or confusing and difficult?
• Does navigating through the website/app feel intuitive and logical or unclear and clunky?

UX is often measured with metrics like success rate, error rate, abandonment rate, time to complete the task, and (since we deal in digital) clicks to completion.

UX designer skills include:

• Research through user journey workshops and competitor analysis

The business analyst takes the initial ideas from the customer and starts involving the UX expert in the discussion with the client, further UX expert starts getting the idea and innovative approaches from the customer and starts drawing the rough wireframing for him, later he get those reviewed from the customer and the process starts.

After having the rough wireframes approved UX designer starts working on

• Product development
• Wireframing and prototyping
• Testing and iteration
• Development planning

Are UI and UX the same?

No, UX is not UI, but the two are interwoven! According to UserTesting, UX encompasses all of the user experience, from looking at a website to buying the product, while UI only deals with how a customer interacts with the interface.

so pertaining to our home building activity the architect create the plan and shows that to the customer for his approval similarly our designer creates a wireframe and gets it approved by the customer to move further.

UI — User Interface

User interface (UI) is anything people may interact with to use a digital product or service — such as visual elements, interactive design, sounds, and screens.

A UI designer will typically be an expert in:

• Visual branding
• Wireframing and prototyping
• Responsive design
• Interactive elements and animation

The primary difference between UX and UI :

User experience design is focused on anything that affects the user’s journey to solve that problem, both on-screen and off. User interface design is focused on how the product’s interfaces look and function.

So, the user interface is only one piece of that journey to solving the problem, while the term “user experience” refers to the whole journey.

Again post the customer’s approval the house builder starts creating the structure of the house, similarly, the UI developer starts building the web pages of the application based on the prototypes given by the UX designer.

CX — Customer Experience

The customer experience (CX) is the total of customers’ perceptions and feelings resulting from interactions with a brand’s products and services. Customer experience spans the lifetime of customers’ relationships with a brand, starting before a purchase is made, continuing to active use, and advancing to renewal or repeat purchases. It is a marketing-oriented function relating to a customer’s experience with an organization’s brand.

Although there are some differences between CX and UX, the two disciplines are becoming more blended but should not be considered in isolation.

UX activities might include:

• Designing a platform for single interactions, such as a website, phone service, or digital tool
• Undertaking product research and developing user personas
• Creating specifications and prototypes
• Testing and iterating versions of designs using feedback from end users
• Using best practices and expert knowledge from broader experience (known as UX patterns) to create experiences that are as usable and frictionless as possible
• We are working with product owners, product managers, coders, and visual designers to champion the end user at every stage of development.

CX activities will likely encapsulate more things. As well as the UX practices mentioned above.

• Research and map out customer journeys incorporating multiple interaction points across an omnichannel space
• Use market research and voice of the customer approaches to achieve a deep understanding of customer emotions, expectations, aversions, and drivers
• Study customer experience on a relationship level, covering the cumulative impact of multiple touchpoints, impressions, and interactions
• Work with all levels of an organization to understand business and customer goals
• Develop high levels of customer service, customer support, communication, and transparency to deliver a good customer experience
• Work to influence company culture, encouraging a customer-first mindset.

The difference between UX and CX 🤔

CX is all about the interaction between a customer and a business. Its purpose is to make a transactional relationship as mutually beneficial and sustainable as possible so that a customer keeps returning because their needs are being met. The customer benefits from good service and a feeling of trust, while the business benefits from repeated sales and an enhancement of its brand.

UX on the other hand tends to be focused exclusively on the end user, whether or not their experience translates into business benefits. (Often it does, but this will tend to happen as a by-product of good UX rather than a conscious goal.) UX advocates for the end user within a business or organization.

In both cases, there will be a need to strike a balance between the needs of the user and the needs of the organization.

During the web application, The CSS is used for beautification of the application similarly we beautify our house with color and other elements.

During the approval process and designing the prototype he gets it reviewed/consult by other folks on the team, i.e. UI developer, functional developer, backend developer, and Business Analyst so everyone will be on the same page and also any complications or limitations of the design can be discussed and overcome on it cumulatively or eliminate the particular part of the design based on the limitations (off course if any)

Since the design is approved by the customer and the rest of the factors mentioned above, the designer passes the prototypes to the UI developer for UI development. The UI developer starts working on the HTML/WEB pages of it and gets it reviewed from design aspects by the designer to forward it to the Functional developers.

Meanwhile, the backend developer starts discussing the data load and user interaction with the customer and also gets and gives the brief of the data handling matrix to forecast from the server integration point of view. Furthermore, I firmly believe that you all know the further process till going live and support.

Let's have a look at JS/JQ in the application, as shown in the above video the garage shutter gets open, the windows are functioning and the wind and leaves are flowing in wind similarly like we have validation and some animation effects with the help of JS/JQ in the web applications.

Overall how we build the house with the help of an architect and then the house builder, painter, and other household vendors to complete the house and make it to use and stay inside, similarly in web application building the Sales team, UX designer, UI developer, functional developer and go live/deployment happens in the web development journey.

I hope this helped you to understand the whole web development journey! 😄