Rahul Rane

Dec 25, 2020

5 min read

Design Guide: Design Process for a UI UX Project

Photo by UX Store on Unsplash

User Interface User Experience Design is one of the fastest booming industries 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) is related to 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 interface. So, how do we actually stumble across and overcome these design challenges?

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

  1. Ideate
  2. Information Architecture
  3. Wireframing
  4. Visual Design
  5. Prototyping
  6. Test
  7. 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 their 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. The 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 a user testing process. Testing helps to gain feedback from the users and gain helpful insights to make any changes with things that 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 hand off all the elements used in the designing process to the developers. Elements like the 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.

Though the design process seems pretty linear, most of the time it is implemented in a non-linear fashion. Non-linear fashion means for example prototyping and ideate processes can be carried out together to test out any new ideas. These processes can be carried out parallelly to obtain the best outcomes and test new ideas efficiently.

🥳Hooray! You made it till the end!

… and that’s a wrap, folks! Thank you for reading my first Medium article. Let me know your thoughts about my process, any kind of feedback is appreciated!

Let’s Stay connected!

Hey everyone👋 Rahul here, an Engineering student turned Product Designer from Mumbai, music and food lover, a guy designing solutions to interfaces that stand out!

Start a conversation! design, tech, memes, music, food, sports, movies, work, anything goes! Portfolio | Twitter | LinkedIn