There is no difference between the Group Chat and Personal Chat categories on WhatsApp application.

How might we help users to easily find room chats?

ROLE

UI Designer

DURATION

10 Days, 24 May-2June 2022

PROCESS

Ideate, HiFi, testing

TOOLS

Figma, FigJam

BACKSTORY

This redesign process is done as an exercise, without any direction from the client. This redesign process was obtained from the Binar Academy Bootcamp challenge. This time the redesign process was carried out with the group. We had discussions and both found difficulties when using the WhatsApp application. I’m in charge as UI Designer, but I am also involved in the process of creating flowchart, wireframes, and Usability Testing.

PROMT

Sabrina is an active college student in various activities on and off campus. To facilitate coordination, all activities use the WhatsApp platform to communicate. One day, 2 events were taking place at the same time from 2 organizations that Sabrina joined. Due to the large number of incoming chats and the mixing of private chats and group chats, Sabrina's WhatsApp chat sank when she was needed. Sabrina became overwhelmed and had trouble sharing incoming chats based on their urgency.

PROBLEM STATEMENT

Students with high mobility who are active in various activities need practicality and speed in accessing chat rooms on WhatsApp, because they find it difficult to find the intended chat room among the many incoming new chats.

IDEATE

Flowchart

This document was made to illustrates the program's operating processes through basic shapes and symbols, also it serves as a guide for ui designers in the process of making ui design. It shows the new flow of WhatsApp application,

Wireframe

The digital sketch of WhatsApp Redesign was made in Figma. According to the HMW question, the UI design is made to help users easily find room chats,

Design System

Design system contains components and design assets. The design system is made to make a consistent design asset and make the HiFi creation process way easier. As a UI designer, making a design system is very crucial in determining the effectiveness of UI design work. so that the design system is made neatly from the atoms, molecules, organisms, templates, to pages. Design system is created iteratively together with HiFi creation.

HIGH FIDELITY DESIGN

Hi-Fi

With directions from the UX Team and a design system that has been prepared, the UI design is made as follows. Please kindly check the full prototype through this link :)

Breaking Down the New Features

There is a highlight of some features in this redesign process,

USABILITY TESTING

Guerrilla UT

This Usability testing has been done by 3 users frequently use whatsapp application. They try the prototype, while following the scenario plan that has been prepared. Here is the UT Result...

UT Conclusion (Recommendation)

1. Add the ‘create custom group’ feature on the add new chat page
2. Add categorization to the tagged page
3. Fixed ‘reminder’ button to make it easier for users to find

What’s Next?

- Evaluate the 'Custom Group' feature
- Add create custom group function on the add new chat page
- Tagged page feature just for group chat

WHAT I LEARNED?

This my first UI/UX redesign process that done with a group. In this project, I feel much enjoy doing my work as UI Designer. We do a lot of discussions on this project, so I get a lot of insight and feedback from my teammate. Usually I struggle a lot doing design for the Interface, but in this project I tend to make everything clear and neat as possible. I feel I’m making a lot of progress in making the Design System, because I make it more neat and complete with various variant.