Design Guide: Design Process for a UI UX Project
By: Rahul Rane
Tags: UX Design, Design Thinking, Design Process, User Experience, User Interface

Photo by UX Store on Unsplash

User Interface User Experience Design is one of the fastest booming industry in the world right now. UI (User interface) relates to the look of an interface, it is more related to design aspects such as Color Contrasts, Typography, Illustrations and design systems. UX (User Experience) related the feeling we generate or a sense of satisfaction that we have while engaging a particular interface, it is related to the psychological aspects of a design process such as Empathy. With the advancement in technologies, people are engaging more in User Interfaces. Designing these interfaces has been challenging since the need for constant upgrades and features in any Web or Mobile based interfaces. So, how do we actually stumble across and overcome these design challenges?

These following steps can be effective while designing any UI UX Project:

Research Ideate Information Architecture Wireframing Visual Design Prototyping Test Handoff

1. Research

Photo by Daria Nepriakhina on Unsplash

Having ideas or problem statements is one of the first and crucial steps of the research process. Any research carried out depends on the ideas you want to implement or any problem statement you want to overcome. Remember, as a designer you are designing interfaces for its user thus, any research carried out should be in the context of the kind of users whom you are designing for i.e. the target audience of your project. Including the ideas or opinions of your target audience in your research turn out to be helpful in the further stages of your design process. Feeling Empathetic toward your users is the key in this step of the design process.

There is a possibility that you could come up with new ideas or problem statements while carrying out your research, use these ideas and problems to enhance the user experience as these problems and ideas come directly from your target audience

2. Ideate

Once you have carried out your research the next step is defining and ideating features. The features that you come up with should meet the user and client needs. User needs being the features that would help the user achieve his/her goals with ease and client needs being allowing users to achieve his/her goals without exceeding the clients' expenses and gaining appropriate profits.

3. Information Architecture

Information Architecture or IA is basically laying out the process and features in an interface for a user to reach his/her ultimate goals. IA in simple terms is nothing but a flowchart of the interaction process. The following Image will help you understand IA efficiently

Designing a User-Centric IA is important as we don’t want our users to get lost or get confused while interacting with the interface.

4. Wireframing

Photo by Amélie Mourichon on Unsplash

This is where you eventually start designing your interfaces. However wireframing is the stage where you start designing a low fidelity mockup of your interface. Designing a low fidelity mockup is crucial as a designer should be able to make changes effectively, without waste much time and money as there could be changes in the design in the further stages of your design process. Thus designing High fidelity mockups are avoided as it could cost both time and money while making changes in the interface. Tools like Balsamiq are used to design wireframes.

5. Visual Design

Photo by Charles Deluvio on Unsplash

This is where your interface starts looking like the final interface which the users would interact with eventually. Design aspects like typography, colour contracts, illustrations, branding are used in this stage. Stakeholders get a look and feel of how the interface would turn out to be in the final stages of the design process. Tools such as Figma (Web, Mac, Windows), Adobe Xd (Mac, Windows) and Sketch (Mac) are used to design High Fidelity or visual mockups of the interface design.

6. Prototyping

Gif from Giphy.com

Prototyping is a process in which you design a clickable and functional prototype of your design. The users will be able to click, swipe, drag and tap through your designed interface. Prototyping generally helps to decide if the designed interfaces are working with the user's needs and intuitions to navigate and achieve certain goals. Prototype designed should be such that the user could easily memorise the interaction process and won't find difficulties in using it again. Popular tools used for designing Prototypes are Figma, Adobe Xd, Sketch, Invision Studio, ProtoPie, Framer and many more.

7. Test

Prototypes developed are further tested by carrying out user testing process. Testing helps to gain feedback of the users and gain helpful insights to make any changes with things which are not working out with the users. Answers like ‘I Like’, ‘I wish’, ‘what if’ certainly help designers to make appropriate changes and come up with different approaches to design. User testing, Usability Testing, remote tests are carried out in this process. Tools like Crazy Egg, HotJar, Treejack and Google analytics are used.

8. Handoff

Finally, the design handoff takes place when the finished UI has reached the stage for the developers to implement and develop it. Here the designer has to handoff all the elements used in the designing process to the developers. Elements like design system used, SVG, branding images are passed on to the developers. In order for a handoff to be successful, a good designer-developer collaboration is vital.