top of page
messaging_thumbnail_dark.png

Re-design
Messages

Prototype↗

Proven to increase traffic to the Messaging function. 16% more clicks on the Messaging icon and fewer customer support tickets were produced. 

Overview
file (2).png

Company

DoraHacks

Timeline

June 2024 -

Aug 2024

Team

1 Operations

1 UX Designer

1 Marketing Specialist

Tools

Figma, Interviews  Sketch, Competitive Analysis

My Role

✍️  Optimized the existing feature through re-designing the UX

📊  Identified the user needs and use cases

🔍  Performed user research using interviews, competitive analysis, observation studies, surveys

This project highlights my ability to solve complex information architecture problems, iteratively craft design solutions, and UI mastery.

Problem

Problem

❓Nobody uses the Messaging function. In fact, very few users even know about it.

Users go off our product to communicate, losing valuable screen time

Customer support gets a lot of tickets when users do not know how to contact the organizers directly

Discrepancies of this function in our own product

Scope

Target Users:

Hackathon Organizers

image.png

-> send out announcements to hacker

-> contact specific hacker for inquires 

Hackers

image.png

-> message the organizers directly

-> message each other to form teams

Product Requirement:

Improve the UX and UI of the Messaging function across our whole product line

Success Metrics:

Based on the product requirement, I defined the following success metrics: 

  • ⏰ Time spent on Messaging function

  • ✉️ Messages sent across the whole site

  • 👫 More team formation in Hackathons

  • ⬇️ Less customer support tickets on how to contact the organizers

Ideate

Ideate

Because the product requirement is clearly outlined and based on user data. I combed through the preliminary research data and started to ideate the solutions.

👀How might we bring more exposure to the Messaging function?

❓Current:

currentflow.gif
currentmessage.png
currentmessage2.png

Looking at the current Messaging function, I identify several ways it could be improved:

  • The entry point for the Messaging function is not prominent                                 -> low visibility

  • The floating window is too small for users to interact                                             -> awful user experience

  • Discrepancies across the whole product: Mail or Message?                                -> Confusion

📚 Inspirations:

I then took a look at how other products' Messaging function look like and did competitive analysis regarding the several problems that I identified with our current product:

image.png

Airbnb: Host & Renter

✅ Dedicated messaging page

✅ trip information card to the right

✅ Icon displays unread number

image.png

Facebook: Friends

✅ Different colors representing sender

✅ Filter function to organize

✅ User actions to the right

image.png

Reddit: Users

✅ Floating window

✅ Good for short messages

✅ Users could multi-task

Taking our users' specific needs and our visual style into consideration, I started prototyping. 

Hackathon Organizers

-> send out announcements to hacker

-> contact specific hacker for inquires 

Hackers

-> message the organizers directly

-> message each other to form teams

💡Interview

7 Participants

988 dispatchers, deaf community event organizer​​

Prototype

💡 Design Solution: Icon Change
symbol=mail.png
image.png

In order to make the icon re​present the function, and distinguish it from the email icon currently used on our website. I designed a new icon with different states

The new sets of icon can:

  • represent how many unread messages are

  • change when new messages come, draw more attention

  • solid & outline icon in different scenarios

image.png

REPLACE THIS!

twomails.png
image.png

Before:

no new message indication, notification > messages

image.png

After:

show how many new messages, messages > notification

💡 Design Solution: Messaging Interface Re-design

✍️ Iteration I: Floating window 

In order to keep the floating window interaction to introduce as less friction to users as possible, but also improve the existing painpoints, I decided to change the flowing window's position and size.

sketch1.png

Sketch - minimized window

sketch2.png

Sketch - floating window

New Message (Default)

floatingwindow1.png

Open read & unread messages

image.png
image.png

Draft a new message:

image.png
image.png

User Flow:

image.png

Prototype: 

image.png
iterationI.gif

💡Testing and feedback

I quickly ran some casual user testing sessions with the operation analysts and designers at our company to facilitate the iteration process. Here is the feedback I got:  

  • Interaction perspective: floating window doesn't work -> I clicked banner and it appeared down there?

  • Technical perspective: harder to implement 

  • UX perspective: double column design is good -> facilitates multi-thread replying

  • UX perspective: search users is good -> display following users first

An important observation I had during the usability session is:

Our users often draft long messages using the messaging function. Most of the time, the floating window is too small to allow them to see the entirety of their messages

✍️ Iteration II: Dedicated page

New Message (Default)

image.png

In this iteration, I kept the two-column design of the previous iteration but dedicated an entire page to the Messages function. To better assist users in inputting long messages, I also implemented other functions. 

Typing Interface

image.png
image.png
  • Automatically overflow text input box

  • Users could also click the button to expand the text input box to maximum height, assisting them input longer messages

New Chat

image.png
image.png
  • Display following users first in the dropdown, adding a description in each row

  • Add user intro & follow button in the top bar

🧰 Components!

Screenshot 2024-08-20 at 11.15.39 PM.png
Screenshot 2024-08-20 at 11.16.39 PM.png
Screenshot 2024-08-20 at 11.18.29 PM.png
Screenshot 2024-08-20 at 11.17.53 PM.png

🧰 Grid & Breakpoints

Breakpoints.png

User Flow:

iter2flow.png

Prototype: 

image.png
iterationII.gif

💡Testing and feedback

  • Interaction perspective: the text expand button is useful!

  • Technical perspective: easy to implement, could build on existing framework

  • UX perspective: love the search messages function!

  • UX perspective: automatic overflow helps user navigate

If we recall, there are two groups of users I am designing for: the organizer and hackers. The organizers' messages often contain important updates and anncoucements. Hence I ask:

👀 How might we prioritize organizer vs. hacker messages?

✍️ Iteration III: Organizer badges and filter

Organizer Badge

image.png
image.png

In order to better distinguish organizer messages, I introduced the organizer badge next to the user name, and users could click it to go to the hackathon details page.  

Filter

image.png
image.png

I also introduced the filter function for users to sift through their messages efficiently.

Spoiler alert: this function is actually put into the next release, as we are gaining more traffic to the Messaging function. As of current our users don't have that many messages to filter. 

💻 Final deliverables

User flow:

finalflow.png

Responsive layout:

Screenshot 2024-08-20 at 11.42.30 PM.png

390 (Mobile)

1920

960

Desktop Prototype:

image.png
finalprototype.gif

Moblie (Web App) Prototype:

image.png
finalprototype(mobile).gif

Impact & Learnings

✨ Impact

  • Shipped! 

  • ​Proven to increase traffic to the Messaging function 

  • 16% more clicks on the Messaging icon 

  • Fewer customer support tickets were produced. since its launch

✨ Learnings

Screenshot 2024-08-21 at 12.12.30 AM.png

Sometimes users cannot vocalize/request features that they need. As a designer, it is our job to identify areas of improvement based on the interaction we observed.

 

In this project specifically, earlier feedback for the text expand button is negative, deeming it unnecessary. However, only by understanding the real problem and user goal can you design a product that users actually want.

 

Users love the expand button :)))

bottom of page