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.
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.
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.
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:
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!
Here's the link to the Figma – take a peek at my solution: [Figma link]
Top comments (0)