UI Challenge: WhatsApp

Objective: Introduce a function into WhatsApp where you can save starred messages into different folders. Maximum design time: 1h30.

Delivered and approved for my Masters’ UI + UX module.

The brief

Objective

The objective of this UX/UI test is to evaluate the candidate's ability to design a user-friendly and visually appealing interface for the page.

Task

Message tags: WhatsApp wants to implement a tagging system for messages, which would allow users to organize and categorize messages based on themes, priorities, or any other custom classification, making it easier to search and manage conversations.

Deliverables

The candidate must deliver the following:

  • Wireframe of the solution.

  • High-fidelity prototype.

Evaluation

The candidate's design will be evaluated based on the following criteria:

  • Visual appeal and aesthetics

  • Ease of use and user-friendliness

  • Navigation and information architecture

  • Consistency and coherence with the WhatsApp brand

Phase 1: Wireframe

To wrap my head around how to proceed with the challenge, I wireframed the flow users would need to follow to achieve the objective.

Phase 2: Find templates and create components

Our teacher gave us a variety of WhatsApp screens. From there, I found the most accurate ones, edited them, and created the components I needed to bring my idea to life while respecting WhatsApp’s brand identity.

Phase 3: Design

With everything I needed plus some extra icons from the plug in Phosphor, I designed every screen.

Phase 4: Prototype

Now, the final, most glossy step. The finished prototype! My final grade was ‘Sobresaliente’, the equivalent of A*.