Later Post Modal Redesign

Overview

Scheduling posts is a core workflow for Later customers. There are over 70k posts per week just on Instagram alone. Over the last few years, numerous features have been added to the post modal as Instagram continues adding new scheduling related features.

The Product team decides this is the time to redesign the modal. The primary focus is to optimize the workflow for our customers. However, the other benefit is to create a scalable design to accommodate additional features in the future.

The Problem

The post modal has remained the same since its original design. Minor visual changes are done to accommodate new features. With this approach, we have accumulated UX debts over the years. Important features have become increasingly difficult to find which leads to usability issues.

Research

The research comprises three parts:

1. Competitive Research
   The UX team conducts basic heuristics reviews for the competitors. We evaluate and document the pros and cons of each workflow and the organization of features.

2. Customer Feedback
   We have gathered customer feedback. Categorize them into two categories: feature requests and usability issues. For feature requests, the Product Owner has prioritized the requested features based on popularity and the strategic goal of the company. Usability issues are flagged and raised by our awesome Customer Support team.

3. Usage
   To ensure a complete and accurate picture of what our customers say and do, I look up the most used features of our post modal. We use Amplitude to track those events. Primarily, I focus on Instagram scheduling as it comprises 75% of the total scheduled posts (Instagram, Twitter, Facebook and Pinterest)

Left image: Later use Aha to collect user's suggestions and feature request

Right image: Feature usage data is exported to Google Sheets. It is easier for me to rank those events in Google Sheets. Data is blurred out on purpose ;)

Objective

• To have a design that ensures flexibility to accommodate new features

• To increase usage of popular features

• To ensure the usage of popular features does not drop

• To increase the visibility of paid features which should encourage upgrade

• To reduce the number of usability related issues

The Plan

Post modal is the core user interface of the scheduling workflow. It is important to get users' feedback as early as possible. UX designers, UX researchers and Product Visual Designers have come up with a plan for this project. The plan is simple. Test, reiterate, and repeat as much as we can.

Prior to user testing, the UX team and Product Visual Design team are responsible to present two to three concepts each. The objective is to generate as many concepts as possible. After the presentation, we consolidated into two concepts. It is easier to get feedback for two concepts from our users as opposed to five.

Key UX metrics, which are based on the objectives, have been set so we can create a baseline and track any usability issues. For example, the team monitors the usage of two Instagram publishing methods: Auto Publish and Notification. The success metric here is to increase the usage of Auto Publish as it has a positive impact on developing stickiness using Later. As for the baseline, the team uses the current Auto Publish usage. The goal here is to ensure the redesign does not have a negative impact on the current users.

As the lead UX designer, I developed the validation plan with the UX Research team and created all the clickable wireframes for the two rounds of user testing.

Here's the general plan

1. Develop a validation plan. I use the template that is created by Lex Roman

2. Identify key tasks for Instagram scheduling

3. UX and Product Design teams go off to brainstorm with their corresponding team

4. Present and review concepts

5. Consolidate concepts into two clickable prototypes with 4 basic tasks

6. Round 1: User testing

7. Determine which concept is easiest to use for users

8. Round 2: User testing 

9. Refine the chosen concept for beta*

10. Round 3: Beta Feedback (Percentage release to the beta users)

11. Refine and updated based on feedback before the final release

* The visual designers participate in all user testing. I will have a debrief with the designers to highlight the key issues that the users brought up. This type of collaboration allows us to work faster by avoiding the traditional handoff meetings.

Wireframe

The three UX designers including myself have spent a day brainstorming concepts. Each of us presents our concepts in a follow up meeting. Common patterns and directions have been noted. This way I can consolidate all these ideas into two concepts that can be reviewed with the Product Visual team.

Summary

• Leverage Later mobile app layout for a condensed design with a sense of familiarity

• Emphasize scheduling time and method on top

• Organize additional features in a table view for readability. The order will be based on qualified plans

• If possible, let users enter data inline as opposed to modal

• Entered data is displayed to confirm users' action

• Upgrade CTA can be added for features that require a paid plan

• The existing side modal on the right will only trigger the additional context of the selected additional feature

Summary

• 3 options for concept 2. The overall idea is to simplify the layout by having features hidden until users activate them

• Icons require less space so that different badges can be added to notify users about paid and/or new features

• Option A: Frequently used features will always show. Additional features will be available if users click ">". The side panel on the right-hand side is where users enter information for the features

• Option B: Similar to Option A. Experiment with a different layout of additional features. This is inspired by the Facebook post creation modal

• Option C: Emphasize the preview area as users are creating a post. This concept leans heavily on one of Later's UX principles which is visual first scheduling.

Round 1: User Testing

Details of the usability plan and concepts will not be shared due to NDA. However, we have recruited participants who we consider as active to participate. This is to ensure the feedback is useful.

Concept 2 of Option C is preferable. Here's a summary:

• Highest SEQ rating

• Users like the generous Preview area

• The wide layout is preferred as users can reference the image as they are working on the caption

• The wide layout can accommodate more content without increasing the height that reduces scrolling

• Suggest consolidating the preview and edit image area. Feel redundant. Just add edit under Preview

• Do not like the tabs for additional features. Prefer the table view from concept 1 as it flows more naturally

Based on the feedback, I work with the Product Visual Designers to focus on two areas:

1. Generous modal space to accommodate post preview and caption area

2. Additional features will be organized in a vertical accordion list that suits our users' workflow

With those in mind, we created two concepts to explore our options. One main difference is the position of the additional features. Details of the concept will not be shared here; however, I have included the cropped samples below

Round 2: User Testing

The process is the same as round 1 with an updated concept. One of the new research goals is to identify the elements of post modal that are easy to use for users. This is to make sure we are meeting the objectives of this redesign.

Option 1 is preferable. Here's a summary:

• 5 out of 9 users preferred option 1

• Like how similar it is to the current design but just better (easier to use and understand)

• The workflow is natural but having the additional features under the caption area

• Option 2 is aesthetically pleasing

• Option 2 additional features have the checklist appearance. It encourages users to use those features that might not otherwise

• Workflow for option 2 is not as natural compared to option 1

• Users worry the additional features will be crowded as future features are being added

Based on the findings, the team has decided to move forward with option 1 for the beta.

Round 3: Beta Feedback

The beta is made available to our selected beta users. We have waited two weeks before reaching out for feedback to ensure users have adequate time to try the redesign post modal.

The overall experience is positive. Beta users find the redesign is more simple, clean, and easy to use. Here are some highlights of the result:

• Both the NPS and the Ease of Use scores are above Later's average

• 4% increase in auto publish usage

• 20% of beta users do not notice a difference in the redesign

• The average post creating time prior to redesign is 4 min 13 sec

• The average post creation time with the redesign is 4 min 4 sec* in week 3

* The first week post creation time of the redesign modal is longer than the current design. It makes sense as users are learning the new design. There is a trend in time reduction week over week until week three, in which the time is stabilized

Results

Due to the positive feedback from our beta users, the redesign is released to the remaining users in the following weeks. The team is happy with the result and excited that we have created a foundation to accommodate future features while solving the common usability issues from the previous design.