Details
My role
I was the sole designer on a team who owned the message center and all social and collaborative experiences on Ancestry. I worked with six developers and one PM and had access to UX Research resources
Tools
Figma, Illustrator, UserZoom, Zoom, Rally
Methods
Competitive analysis, critique sessions, co-design sessions, user Interviews, metric reviews
June ‘21 - Feb ’22
Timeline
What happened
Bad chat
Confusing indicators
No file attachment
No archive/delete
Forces third party messaging
Rich conversation
Clear indicators
Group messaging
Faceted search
Direct file attachment
Dedicated settings
Archive/delete/hide options
Emotional conveyors (emojis and reactions)
How we got there
This was a long journey involving several teams and a whole lot of compromise.
I started by looking at what popular messaging services such as, Slack, Messenger and WhatsApp have in common. I found their strengths and used them to green field envision a message center for Ancestry.
Me and the research team then went to ask people what they thought of the current message center and what features they are looking for.
With those interviews in mind I expanded on our initial designs.
The last refinement came from working with the newly formed design systems team.
What people had to say
“I write all of my messages in Word and then copy and paste them into Ancestry.”
“Usually I take screenshots of the doc and then email the screenshot with a link to my source.”
"I wish there was a way to clean up the inbox so I can get rid of the conversations I no longer need.”
Takeaways
People want to be able to attach and send things they find on Ancestry
People want to be able to clean up their inbox
People want to be able to search their inbox
People need more feedback from the system
Addressing pain points
Sending messages
1 Attach anything (mostly)
People often sited needing to send files that were unsupported by Ancestry messenger as a reason they used text or email. So , we added the ability to attach anything on Ancestry or almost anything from your computer.
2 Reactions
One of the advantages people explained about texting and WhatApp was the robust set of reactions that made the conversation feel more personable. So we added the ability to add emojis in message as well as react to incoming messages.
3 Smaller box
Folks on smaller devices struggled to view longer messages so we reduced the size of the message box by making it all fit on one line. We did this by reducing the send button from a text button to an icon only button as well as moving the message box settings from the message box to the message center settings, a new feature as well.
Searching
4 Faceted search
One reason people chose other messaging platforms was in order to be able to search their conversations later. So we added faceted search so that people could find specific parts of conversations as well as content inside of those conversations.
Cleaning up inbox
5 Archiving conversations
With the ability to archive people will feel more in control of their inbox, while not losing any potentially valuable content.
6 Hiding messages
Sometimes folks get a message that is triggering and they don’t want to see it at the moment, but they think the overall conversation is still valuable. For those situations we gave people the ability to hide individual messages.
Person panel improvments
7 Surface profile facts
A common complaint we get about the message center, is that people do not get responses because they person they are messaging is not a regular Ancestry user. So we wanted to surface the last sign on date and other demo info for people while they are messaging someone.
8 DNA preview
DNA is one of the largest reasons that people come to Ancestry so we wanted to make it easier for people to determine their connections with other users before or during a conversation.
The goal of the design system was to reduce the number of novel components in the product, so over the next few months I scoured the site and tried to find as many reusable patterns that we could use in the message center. However, since we were first to transition to the new design system we helped create standards for what components would be reused.
Secondary header
The secondary header allowed us to create a universal context specific action space. So no matter where someone was within Ancestry, they know where to go to interact with the page they are on and where that page sits in context of the larger site.
Nested pages
Nesting pages allowed us to create a place for Archives and personal inboxes. This pattern opens up opportunities across the site to simplify and specialize pages to better focus on their main jobs to be done.
Threaded conversations
We pulled threaded conversations from the forums section of the existing site. Threaded conversations allowed us to add more rich text editing and better group messaging.
Content cards
The content cards were created for message center, but will be used throughout the site specifically for siting sources. They allow us to identify specific pieces of content and better convey what information is being shared during the share flow.
Standards set
Overall value added
By improving the usefulness and path finding ability of the message center we hope to increase number of messages, decrease amount of people leaving and ultimately increase time on platform.