How to create a solution UX - UI in just 3 hours
Tags: ui, challenge, ux, uiweekly
Published: 2024-03-02 21:22:17

In my previous studies, our teacher presented a challenge in which we had to create a new functionality for an existing application, specifically **WhatsApp**. The task was to integrate this new feature seamlessly into the app's functions and aesthetics.

This function was to **add a labeling system to the app's messages**, so that the user could classify them into folders

Fortunately, since we were already familiar with the application, the challenge was somewhat easier. Nonetheless, it still took us three hours to develop a solution, design it, and create a prototype.


So, after the initial panic, let's analyze what we can do to avoid wasting time.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpwr8aaajzi6expm1muz.gif)



## 1- Analyze the app, its design line and structure

Working on an existing app comes with pros and cons. On the plus side, we avoid starting from scratch as colors, fonts, and styles are already established, saving us significant effort. However, the challenge lies in adapting to an existing image, language, and identity within a tight timeframe of less than 3 hours

It's crucial to persist in aligning with the established aesthetic guidelines. Any deviation in design, not in line with the predetermined standards, **can lead to user confusion and potential issues in the proper functioning of the app**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnqo1b1u8jyvu6a437v7.gif)

## 2- Search for references

In this case, our references should focus more on functionality than aesthetics. When tackling unfamiliar functions, seeking references becomes crucial for realistic development and adherence to standards.

Remember, seeking references can be time-consuming. **With only 3 hours available, allocate a maximum of 20 minutes to this task.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r69j8vd8tlrhu4h2kl6.gif)

## 3- Create a wireframe

After establishing standards and outlining our approach, we move on to the enjoyable stage of designing. However, it's crucial not to rush into the final design immediately. While time is limited, creating a preliminary wireframe helps identify and address potential issues before diving into the final design.

Investing a bit more time upfront is worthwhile if it accelerates our work in the long run.

There are some tools that can reduce Wireframe creation time if you are new to the world of design and have not yet created a UI kit to create your wireframes, **I have 2 tips for you**:

**1-** If you are working in **Figma** you can download a multitude of templates to make your wireframes in a comfortable and quick way.

**2-** If you are not familiar with these templates, I give you my solution. **Whimsical** is an incredibly fast online tool.
I leave you the link to the solution here: 

[Whimsical link](https://whimsical.com/whatsapp-wireframe-W844vHz4HxPf4E9Y1ANmiA)

**Trust the process**

## 4- UI Kit, Foundations and Template

Another crucial investment in our 3-hour challenge is creating a **UI Kit, a foundations and finding related templates** for the app we're enhancing—WhatsApp, in this case. It's worthwhile to search for free community-offered templates, and though finding the perfect one might be challenging, it saves more time than starting from scratch. If the template doesn't align with our initial design, consider modifications to make it as similar as possible.

For the UI kit and foundation, keep it simple. We're offering a quick and functional solution to a problem, and time is our foe here. Even if you think it's unnecessary, creating a basic kit speeds up assembly and future tweaks. Plus, it's handy if we revisit the project later or repurpose it for other tasks. 
Nothing goes to waste!

## 5- Let's start with the design, finally

Now, we can dive into designing and prototyping our solution. With the dedicated time for each part, assembling everything should be a breeze. 


Phew, take a breather, we made it through the stress. In a nutshell, when we put effort into each step, it really speeds up the whole design gig!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph7ympmflspfrssgg3t1.gif)

Here's the link to the Figma – take a peek at my solution: [[Figma link](https://bit.ly/3IlrXOn)]

## Thank you for reading!