This is the current post modal for Instagram.
(Yes I like Bob's Burger)
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 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.
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
The research comprises three parts:
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.
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.
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 ;)
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
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
Identify key tasks for Instagram scheduling
UX and Product Design team go off to brainstorm with their corresponding team
Present and review concepts
Consolidate concepts into two clickable prototypes with 4 basic tasks
Round 1: User testing
Determine which concept is easiest to use for users
Round 2: User testing
Refine the chosen concept for beta*
Round 3: Beta Feedback (Percentage release to the beta users)
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.
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.
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
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.
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:
Generous modal space to accommodate post preview and caption area
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
Additional features are located below the caption. The goal is to create a natural "top to bottom" workflow once they finished writing their captions.
Additional features are located besides the caption. The goal is to maintain the natural workflow with no scrolling required.
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.
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
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.