Vestiaire Collective
Inbox
Summary
We noticed that there were a high percentage of important messages and notifications getting missed or going unread by our users. The two goals of this project were to, one uncover why this is happening and two, propose changes that would reduce the number of important messages that are missed.
Role
Senior Product Designer
Skills
Competitive Audit
User Experience
Visual Design
User Testing
Design Systems
Prototyping
Branding
Key Issues
Volume of Notifications
Vestiaire sends a high volume of notifications to it’s users. This has two outcomes.
- Important messages and notifications are easily missed.
- The high volume of notifications encourages users to pay less attention to this channel.
Notifications Filter
Based on a data analysis, generally, users do not interact with the filter at the top of the page. We suspect the reason for this is that they are only icons with no further description.
Vague Message Information
Currently user only receive a notification that a message has been sent to them. There is no preview of what the message might be about.
Sent or received offers are currently located in another area of the site/app.
Section Title Within App
For users who are looking for their messages or offers, the title of “Notifications” is too limited. Moving forward we need to update the title of this section to reflect all the content that is contained here.
Themes from Competitive Audit
Section Title Within App
The title seen across many of the benchmarks is “Inbox.” We think it is a title that is becoming synonymous with where users expect to find messages and notifications.
Two Tabs
Within the benchmark examples that had an “Inbox,” there were also two tabs labeled “Messages” and “Notifications.”
Using this pattern to create a “Messages” section will ensure that users are always able to find time sensitive and critical messages from other people on the platform. This increases the chance of successful connections and leads to more sales.
Sub-Filters
Sub-filters have two functions
Filter: Allow users to quickly reduce the results down to the group of messages or notifications they are looking for.
Educate: For a section that might be empty, the text on each sub-filter describes the type of messages or notifications they would expect ot find there. Answering the question, “ What can I do here?”
Final Designs
The final design proposal included structural changes such as incorporating tabs to separate messages from notifications within a single space, and it brought offers into the context of the messages. With these changes in mind it felt appropriate to rename this section from "Notifications" to "Inbox." Creating a singular space for users to stay up to date on any important messages or notifications.
Messages
This is the landing page of Inbox. It surfaces the most critical information — chats and offers.
The messages view lists all messages and offers. Sub-filters allow a user to find a specific type of message.
List of Filters:
All, Unread, Offers, Selling, Buying
Notifications
All other notifications appear in this view. Important notifications are labeled to make them easy to see.
The goal is to make it easier for users to navigate the volume of notifications they receive, and help them quickly find notifications that are important to them.
List of filters:
All, Important, Buying, Selling, and Deals.
Important Notifications Banner
When there are unread important notifications, a banner will display at the top of the messages tab. When a user taps on this banner it will take them to the “Important” section of their notifications. Once they are there, they will see all of the clearly marked “Important” notifications.
The banner will persist until they mark the message as “Read” by tapping on it.
Structure Changes
Section Title
As we have seen in our benchmarks, we would change the tab title from “Notifications” to “Inbox”
Two Tabs
We would adopt two tabs at the top of the page labeled “Messages” and “Notifications”
Sub-Filters
With a tab focused on messages, sub-filters help users to focus on the most important groups of messages. Such as unread messages and offers.
This also enables users to filter down to the most important notifications.
States & Behaviors
Message States
The counter for messages will display the number of “Unread” messages.
- Unread: Has a dot to the left and bold text to indicate that the user has not opened the message.
- Read: This shows that the user has opened the message thread.
Notification States
The counter for notifications will only display the number of “Unseen” notifications.
- Unseen: User has never seen that notification before.
- Unread: User has not tapped on that notification before.
- Read: User has interacted with the notification.
Anatomy of a Message Card
Profile Image
The default image for users who have not uploaded a profile image will be a color field with their first intial on it.
Main Section Contents
This will hold the name of the person who you are talking to, a preview of the last message sent, and the item you are talking about.
Offers
The offer component on message cards will display when ever there is an active offer on the message. The offer component will persist as long as the offer is still active. All new message previews will still appear above the offer component.
Anatomy of a Notification card
Notification Image
This image could be a variety of things. It would be preferable if the card was built with the following functions in mind.
- Images from items in our marketplace
- Images for marketing campaigns
- Vestiaire logo for notification from the company
Notification Content
This area is simply a text field. It can expand to as many lines as needed for the copy in the field.
Important Notification
For notifications that are “Important,” there will be bold text as a call out on all notifications of this style.