UXUI Design: Stages & Deliverables

Whether you’re looking for UXUI design services for a SaaS product, eCommerce platform, website or any other digital product, an efficient UX design process that includes standard protocols and the company's quality standards is vital for the smooth functioning of the project.

However, following the systematic UXUI design process is not the only factor for project success; selecting the right UIUX design deliverables does justice to the client, designer, and all project stakeholders.

The UIUX design process is broken into stages. It's important to understand the stages of your project so that you can plan for them and use them as a foundation for your design work. This article will cover each stage of the UX design process in detail, including the deliverables of each stage:

The design process is divided into three stages, i.e. UX Research, UX Design & UI Design.

Stage 1: UX Research or User Research

Before initiating design, it's vital to understand the following:

• Who are the targeted users in this project?

• What are the user's needs, preferences, and challenges related to the product?

And to design delightful user experiences, it's vital to understand to discover or study user insights that guide in creating a successful design by conducting UX Research. Below are the steps involved in conducting User Research.

1. User Interview- you ask them how they use your product or service. This is one of the most important parts of user research because it allows you to understand what people want from a product, which also helps inform design decisions.

2. User Testing- where people try out an app on their own (as opposed to being told by someone else) so that designers can see how easy it is for them to use without having had any training first. This allows them to make changes accordingly when developing new versions of the software later down the line!

3. Heuristic Evaluation- This method is used for finding the usability problems in a user interface design so that it helps in designing the final product.

Read our detailed article to learn more about how to conduct User (UX) Design Research Yourself.

Deliverables of UX Research

• Detailed Presentation/ Report

The brief presentation/ report is a representation of user analysis & key user insights gained with the help of UX Research and the suggestive UX solutions that can help enhance the product's user experience.

Well, one of our USPs in the UX Research service is we provide our clients with a list of actionable solutions in priority order, so it's easy for clients to refer to and understand what needs to be incorporated first.

A glimpse of Ungrammary's Priority wise UXUI Task sheet for its client

Stage 2: UX Design

Once you've gained insight into what users want from your product/service offerings, it's time for some hard work! Based on user research, it's time to start with UX strategy framing, i.e. defining user flow/journey and Information architecture.

Now, what are these?

a) User Flow/User Journey

User flow is a sequence of steps that take your users from entry to exit. It's the path they take to complete a task or accomplish an action, and it can be as simple as clicking a button or entering information into a form.

A glimpse of the user journey design by Ungrammary for its client.

b) Information Architecture

Information architecture is the underlying structure of a website. It determines how content is organized and presented on your site and how users navigate it

Deliverables for UX Design:

• Document

• Excel sheet

• Tool link on which user flow is designed example: Miro/Overflow

Tip: Before proceeding to the next stage, curate feedback from the key team members on the IA so that information can be used to streamline your UI and no major structure or user flow change comes at a later stage.

Stage 3: UI Design

In the previous stage, you determined what kind of experience you want users to have and how they will use your product. So this last stage of UI design focuses on determining how you will make this happen with your chosen technology stack (e.g., HTML5, CSS3). UI design is focused on designing the visual feel users get about the product, involving choosing the right colour pallet and fonts that resonate with the brand and give a trusting feel.

This stage is divided into 3 sections:

a) Wireframing

Wireframes are a visual representation of the user interface. They're not high-fidelity, but they serve as a low-fidelity tool for communicating design ideas. Wireframes show how content appears on each screen in the app, how users will interact with it, and where navigation occurs. You can use wireframes to sketch out potential designs before you build them (or at least give yourself some clarity on what you're trying to achieve).

b) Design system

This involves setting the right theme, colour pallets and fonts, and button types that resonate with the brand, i.e. finalizing the UI components.

c) UI Mockup

A glimpse of the Final User Interface (UI) Design by Ungrammary for its client.

UI mockups are the final representation of the platform, i.e. how users will see the platform you're this includes content, banners and so on. This step is further broken down into two depending on your requirement:

i) UI with Prototyping- this helps the client understand how the design and micro-interactions placed would function. Simply, it explains how the final platform will function for users. This usually gives developers a fair understanding of the platform's functioning. However, prototypes cannot be coded or shipped for development. HTML is not part of this deliverable.

Note: This service costs you extra and is not included as your final deliverable.

ii) UI without Prototyping: This is where all the final UI screens designed are shared i.e. static screens. These can be shared with front-end developers to code (HTML).

Please note backend development isn't a part of this.

Deliverables of UI (without prototyping) design can be:

• XD Link/ Figma Link

• Sketch Link

• Zeplin Link

If you opt for UI Engineering service as well, the end deliverable can include the following:

• Bootstrap HTML

• React JS, Angular

• React Native

• Vanilla HTML & CSS

Conclusion:

We’ve covered a lot of ground here, but we hope you now have a better idea of how the UIUX process works & what its deliverables are. If any specifics still don’t make sense, don’t hesitate to ask us in the comments!