Re-Designing Love Letters

An engaging relationship advice column that debuted on Boston.com in 2009.

PHASE

TASK

THOUGHTS

EMOTIONS

Project Overview

Love Stories, Dating Stories, Relationship Stories, stories about romance, marriage, partnerships, sex, love, and the human heart. Love Letters is a column offering advice for those in love. Ask questions and get answers from columnist Meredith Goldstein. The column is featured on Boston.com and in The Boston Globe.

Meredith Goldstein has been writing the popular Love Letters column in The Boston Globe since 2008. Within her Love Letters column for The Boston Globe Media, she also hosts a podcast and her memoir, “Can’t Help Myself: Lessons and Confessions from a Modern Advice Columnist,’’ that explore her journey into self-help and how it changed her and her readers.

VI. Comparative Analysis

PROJECT TYPE

Solo Design Sprint

ROLE

UI Design | Graphic Designer

4 Weeks

DURATION

PRODUCT

Mobile-first design | Desktop

QUANTITATIVE ANALYSIS

In addition to the user interviews I performed and broadcast a survey—using Google Forms—consisting of 9 user behaviors and demographics questions. The survey received 15 responses and helped to paint a better picture of the target user and what’s important to our users. The findings are provided below.

Filter by most recent advice

SCENARIO

User A, feeling uncertain about where to begin, browses various advice columns to find a familiar topic related to his question and join the conversation.

  • User flow objective: Send Meredith an advice question

User B enters Love Letters with a clear goal: to seek help and advice from Meredith.

  • User flow objective: Browse Love Letters and filters to seek other users with a similar question

  • Navigate to filters and filter by most recent

  • Able to navigate previous and new advice

" I need answers as soon as humanly possible and see what others are talking about related to my question

Anxious

VI. Task Flows

VIII. Design Language System

IX. Hi-Fidelity Prototype

Browse through reviews

  • Take a quick look at the comment section to see how others responded.

  • See if Meredith is helpful

  • Find out what users are asking

" This expert needs to be credible and experienced in my specific top of needs”.

Hopeful

Advice Expert

  • Send a message to expert

  • See most given/talked about advice

" This expert needs to be credible and experience in my specific top of needs.

Satisfied

Understanding the Goal

I was the sole designer of this product, responsible for the entire design process while collaborating with a product manager and four software engineers. Processes include competitive analysis, usability testing, A/B testing, affinity mapping, card sorting, wire-framing, prototyping, and more.

I was tasked with designing this platform that enables anyone, anywhere to instantly chat with Meredith, posting advice while being able to engage with other advice seekers. The goal was to:

  1. Move Love Letters total under the boston.com brand

  2. Redesign love letters to enhance user engagement and improve usability.

  3. Maintaining key Love Letter functionality

The core requirements for this project were provided to be incorporated into the new design. The following features requirements were:

  • Allow readers to quickly move backward and forward through the series of letters without returning to the section front or “leaving” the page.

  • A way for readers to quickly get to the comments without scrolling through the whole article/letter

  • Featured comment

  • A call to action is asking for letters.

  • A place/widget to advertise the podcast and Meredith’s books

  • Social media links

  • An AD slot - keep a slot that appears above the header/nav of boston.com

  • Must contain a reaction feature

For the section front, the following required features were:

  • Uses existing blocks. Review the existing section on Frost to see what is available.

  • Use the widget at the top of the COVID page to introduce some Love Letters imagery.

  • Find a place for the Love Letter’s logo (potentially, this would be the only new bloc/update)

  • Highlight the most recent letter. Explore a way to include a snippet or quote from the letter on the section front.

  • Section for popular letters

  • Section for the podcast

  • Place/widget to link to the book

  • CTA for letters

  • CTA for the newsletter sign-up

Target & Challenges

I quickly learned that although very few expert advice platforms exist, even fewer are associated with a news platform. None cover all fields, and only a rare few are maintained from a design standpoint. This created a valuable opportunity to design a product that can benefit a wider audience across various fields.

The target user base for the Love Letter platform is people in the 18-35 age range. The requirements for this include utility, ease of use, and engagement.

I. Defining the Problem

“ BECAUSE WE ALL NEED AN EXPERT’S ADVICE AT SOME POINT OR ANOTHER”

Let’s face it —- when you’re hoping to learn some new information or advice on a question, Google, Twitter, and Reddit don’t always cut it. Therefore, Love Letters will serve as a better go-to.

This platform aids to offer a simple and intuitive way to connect with the expert, Meredith, on almost any topic within seconds. Users can feel more informed and receive answers to their most pressing questions and life problems.

II. Learning and Exploring

To better understand the user, I created an interview script and a survey to gather information about their specific wants, needs, user habits, and pain points. This guided my actions moving forward, ensuring I work empathetically for users.

III. The Results

QUALITATIVE ANALYSIS

After conducting one-on-one interviews with three active users of expert advice platforms, I identified several key points of importance:

Accuracy

Users want to know that the information or advice they’re receiving is accurate

Ease to Use

While researching through numerous websites and search platforms can be quite cumbersome and difficult, our users seek a comprehensive option that provides them with accurate advice — with minimal effort.

Convenient

Our users are on the go, which is why they prefer a simple and easy-to-use mobile and desktop platform that they can access whenever needed.

IV. User Personas

V. User Journey

Browse through available categories

  • Quickly access Love Letters

  • Browse through all advice

“ I hope Love Letters h is engaging and easy to use or else I’m though”

Discouraged

Product Requirements

I explored advice blogs that are not affiliated with news organizations to find some inspiration. The major news outlets, such as The Washington Post, LA Times, and The New York Times, mainly feature advice columns presented in a list format. Unfortunately, these columns often lack visual appeal and a clear user interface design.

ASK ERIN

  • Each advice article features a photo to enhance visual engagement.

  • - It employs a two-column layout to effectively manage page density.

  • - A description is provided to explain the article's content.

  • - There is a top navigation bar to help users navigate the site.

NEW YORK MAGAZINE

  • - Features a prominent "Search" call-to-action for easy navigation.

  • - Offers filtering options, allowing users to sort articles by newest or oldest.

  • - Displays articles in chronological order, with the most recent ones shown first.

  • - Utilizes a vertical list layout for a clean presentation.

  • - Each advice article includes a photo to enhance visual engagement.

ELLE MAGAZINE

  • Uses bold images for each article to enhance visual interest.

  • Employs a 4-column layout that combines vertical and horizontal lists.

  • Each article’s footer includes links to related topics.

  • Features a “Save” option.

MOBILE

The user’s wants and needs in Action.

Due to TBGM's restrictions on sharing sensitive information, please contact me to view the complete interactive prototype. Individual screen captures are available below.

LOW + MID-FIDELITY

Keeping these findings in mind, I then proceeded to develop some low and then mid-fidelity prototypes for Love Letters, using Crazy 8s Design Sprint.

Once I listed the pros and analyzed each blog/advice site, I focused on designing Boston.com Love Letters. It was crucial to maintain our brand and ensure consistency in my design.

VII. Wireframing

DESKTOP

The user’s wants and needs in Action.

Due to TBGM's restrictions on sharing sensitive information, please contact me to view the complete interactive prototype. Individual screen captures are available below.

READY FOR HANDOFF

Designing a functional and user-centric platform is important, but simply relying on a prototype can make it challenging for developers to create the final product. To facilitate a smooth handoff to the development team, I enhanced our design system and icon kit for Love Letters. After all, making the developers’ job easier also makes my job easier.