Billy So
UX designer

Later Post Modal Redesign

A complete redesign of the Later's core scheduling user interface

Overview

Scheduling posts is a core workflow for Later customers. There are over 70k posts per week just 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 lead to usability issues.

This is the current post modal for Instagram. (Yes I like Bob's Burger)

This is the current post modal for Instagram.

(Yes I like Bob's Burger)

Current Post Modal

I have summarized a list of usability issues based on two sources. One is by the customer support team. They track and label support tickets that are related to usability. Second, it is based on heuristics evaluation.

  • Saved Captions:  A popular free feature is hard to find (Can you spot it?)

  • Multi Profile Scheduling:  Customers wonder if they can schedule to another social platforms in the post modal (No they can't but we didn't make it clear)

  • Publishing Method:  Customers are unaware of the selected publishing method for Instagram which can be auto or notification (requires users to post manually when they receive a push notification on their devices on the scheduled time).

  • Inconsistent UI: Mixed action interface elements. There are links with different colour and buttons with different shapes

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 organization of features.

  2. Customer Feedback
    We have gathered customer feedback. Categorize them into two categories: feature request and usability issues. For feature request, 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 the 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 suggestion and feature request
Right image: Feature usage data is exported to Google Sheets. It is easier for me to rank those events in Google Sheet. Data is blurred out on purpose ;)

Objective

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

  • To increase usage of popular features

  • To ensure usage of popular features do not drop

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

  • To reduce the numbers 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 researcher 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 testings, 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 have 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 the the 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 use 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 have developed the validation plan with the UX Research team and created all the clickable wireframe for the two rounds of user testings.

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 team 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 final release

* The visual designers participate in all user testings. I will have a debrief with the designers to highlight the key issues that the users brought up. This type of collaboration allow 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.

Concept 1

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 to 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

  • Existing side modal on the right will only triggered for additional context of the selected additional feature

Concept 2

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: Simliar to Option A. Experiment with a different layout of additional features. This is inspired by Facebook post creation modal

  • Option C: Emphasize the preview area as users are creating a post. This concept leans heavily on one of the 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 reduce scrolling

  • Suggest to consolidate 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 the 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

Option 1

Additional features are located below the caption. The goal is to create a natural "top to bottom" workflow once they finished writing their captions.

Later Post Modal Redesign

Option 2

Additional features are located besides the caption. The goal is to maintain the natural workflow with no scrolling required.

Round 2: User Testing

The process is same as round 1 with 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 bu having the additional features under the caption area

  • Option 2 is aesthetically pleasing

  • Option 2 additional features has the check list appearance. It encourages users to use those features that might not otherwise

  • Workflow for option 2 is not as natural comparing 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 of the redeisgn

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

  • 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.

Try it on Later.com

Try it on Later.com