Having all the ingredients without proper step-by-step guidance is NOT enough.

Not many people are aware, but User Interface and User Experience (UI/UX) designers always stick to their own process as a baseline to design the website or app. “What process do you follow when designing a website or app?” is rather a popular question among the designers.

You may wonder why the UI/UX process is so important for designers. Unlike designing simple graphics, designing for websites and apps might need you to explore every little detail in order to deliver a design that’s interactive, useful and easy to use.

Here’s a not-so-secret fact about UI/UX I will let you in on...

Without a proper process planning, the design objective will be hard to reach. “Nothing easy in life”. Yes! Nothing is easy in life but by having a clear guideline, we can save a lot of our time.

In this article, we will share with you how we make a complex process become simple. The tea will be spilled based on our previous clients’s projects.

In Fixcolab, we separate the designing work into two stages. You might think the UI and UX design process will go together at once, but let me tell you, UIUX didn’t work like that. At least not for us.

That’s why we decided to separate it into two stages:

(i) UX design process

(ii) UI design process

Let’s have a look at how the UX design process was usually done in for Fixcolab’s project first:

1. Discovery session

• Before we begin any designing process, our UI/UX designers along with the project manager will usually set a meeting with the clients to find out more about their business, its goals, design direction and how the operation process goes and so on. The aim of this is to help designers visualize the design according to the clients’ needs, identities and goals.
• The things that we will try to find out during this process are:
  • Product details
  • User personas
  • Product concept
  • System specification (module & function)
  • User interview
• This process usually takes around 1-2 weeks to finish.

2. Information architecture

• After we have all the clients’ business details, our team will start to go through the needs and purpose of the product by creating the Task Flow and Wireframe Flow. The purpose of this process is to make sure that the tasks are delegated by the right person and completed within the allocated period.
• The process include :
  • Defining the task
  • Describing the task
  • Set the task priority
  • Set the task flow
  • Design the wireflow/sitemap
• No sugar-coat, this process is the longest to be completed and usually takes around 1 month.

3. Wireframe building

• Though the UX designer has been working alongside the project manager from the very beginning of every project, this will be the phase where the real work of a UX designer starts. UX designer will be responsible to plan :
  • The page component
  • Page layout flow
• Usually this will take around 2-3 weeks to be completed.

After the UX designer completed planning the task flow and wireframe flow, this is where the UI designer will take over the process. The UI designer will carry out the next step, which is:

4. Design inspiration

• During this process, it’s time for UI designers to visualize how they want the product to look and feel according to the client’s reference by finding the right design inspiration as the guideline to help them produce the design.
• The key point that UI designer will consider to carry out this process are:
  • Main design concept
  • Design inspiration for every section
  • Animation
  • Color palette
  • Typography & icon
• This process usually does not take that long, 1 week at the longest.

After completing the above processes, both the designers will work together to work on the next stage:

5. Developing prototype

• This process can only be done once the content and design base have been approved and decided. The process that are included when developing the prototype are:
  • Ensure the high fidelity design
  • Prepare a design mockup
  • Prepare the design system
  • Embed the animation
  • Prepare the clickable prototype
• To ensure high quality performance, we usually take around 2-3 weeks to complete this process.

6. Content Onboarding

• This is the last stage before the prototype is tested. During this stage, all content of the design will be extracted to make sure the prototype is ready to be presented.
• The content include:
  • Copywriting
  • Image and video
  • Brand guideline
  • Design principle
• This process usually takes 1 week to be completed.

7. Prototype testing

• After all the contents have been extracted, the designers will start to work on finalizing the prototype based on the approved content and design base.
• A few testing and evaluation will be done during this process, like:
  • Heuristic evaluation to test the usability of the design
  • Client/user acceptance testing to make sure the design is user-friendly
  • Crowd testing to test the whole performance of the site
• The whole process will usually take around 2 weeks

8. Prototype sign off

• This is where Fixcolab will sign off the design and document the design to the developer.
• The things to focus on during this stage are:
  • Data flow
  • User flow
  • Design specification
• This process usually takes around 2 weeks to be completed and this is the last stage that indicates the design is ready.

Designers need to bear in mind that the design they produce can only be “ready” or “presentable” and never “finish”. The reason why we said this is because there will be amendment after amendment needed from time to time. Therefore, it is safe to say that the design will never be finished but ready to be used.

However, does it work for every project? Did we apply this to every project that we have done before? The simple answer I can give you is, yes we did. We hope that this article will be useful for you. See you in the next article!

Want to know whether you have a good User Interface & User Experience of your digital products? Request a FREE Audit.

Have us go through your websites, applications and systems and show you how we would tweak it into a seamless user friendly experience for your users and customers. Click here to request for your FREE Audit.

This article by FixColab, a software development agency based in Kuala Lumpur, Malaysia, provides all of the information readers should be aware of regarding User Interface and User Experience (UI/UX).