Problem

Based on UX heuristics and principles (Jakob’s Law), it is uncommon to see modals with tabs outside of its container and social media logins without its brand colour.

The order of the social media platforms in the description do not match with the order of the social media login buttons.

Even when a user’s social media account is already connected, all of the social media login options remain there.

Research

While I had a good idea of a solution, I also conducted research into B2C apps (e.g. Twitch.tv, YouTube) that use a slightly different approach.

While both apps use a similar log in process, the UI communicates directly to users which account is connected or disconnected.

Solution

To provide a more familiar experience to users (Jakob’s Law), I decided to use social media login buttons that is commonly used in many modern day apps.

Opportunity

Users that would use Keyhole is someone who is in digital/social media marketing or works as a content creator.

So, based on the earlier research on Twitch and Youtube, it could be an opportunity that provides upfront value to users.

The choice of button colour is leveraging the brand colour that Keyhole has in its website and logo.

Problem

With multiple social media accounts connected, it could be confusing to users which platform they are posting, especially brands and content creators often use the same profile image across the platforms they are on.

The choice of using orange as button colour is arguable. First off, orange is not relevant to Keyhole’s brand colours. Secondly, orange could portray the idea of creativity and energy (based on colour psychology) but also could be used for warning or alert.

When it comes to the confirmation toast, it appears in the left bottom corner for less than 2 seconds which made it impossible to read the first time. Again, the choice of colour does not convey success.

Research

To better understand the scheduling post feature, I tested on Later, an already established social media scheduling tool and also Instagram’s new post advanced setting

Solution

For the actual modal, I made some changes to the UI. The goal is the provide more guidance to the users, especially the ones who are not yet familiar with the Keyhole platform.

• Added title providing more context to users

• Used default social media account icons

• Changed toggle to checkbox for users to post as reel

• Updated button colour to match Keyhole’s brand colours

• Updated toast colour and location

Opportunity

It’s crucial for content creators and brands to know when is the most optimal time to get reach and engagement, so providing suggested time to post could be a huge opportunity.

Problem

For the next part on status of scheduled posts, I broke it down to calendar view and list view.

Calendar view observations/problems:

• Left panel is essentially a filter, but is taking quite a bit of screen real estate

• Connected social media accounts are located far away from the calendar (off the screen)

• It is unclear what solid tags and white tags mean, e.g. which one means posted or scheduled?

Solution

1. Instead of text, using buttons as options for list view and calendar view

2. Social media accounts will be on the left side right under the heading. This creates less cognitive load for users to figure out which social media account is connected.

3. Instead of having the left panel to show different statuses, a filtering button is introduced on the top right of the calendar

4. To create a similar experience for users to switch between months, arrows are added on the top right of the calendar

5. Calendar is now using the full width of the screen utilizing as much real estate as possible

6. Inside the calendar, chips (or tags however you call it) with social media icon and time are used to indicate a post is scheduled.

   1. Each social media chip will use its brand colour for better association

   2. Post that are already published will have a green left border to the chip

   3. Failed posts will be indicated by a red left border

7. Outlined button will be revealed when users hover on a date

Problem

List view observations/problems:

• Using the social media handle ahead of the social media icon could create cognitive load, especially when the account handle is often the same across the platforms

• When a user presses ‘try again’ on a scheduled post that’s failed, the post gets deleted. It would require the user to rewrite the post instead of modify the post settings

• List view does not have a ‘show all’ option

Solution

• Improved the UI, where list views is presented by rows. Each row represents a day and a divider separates the each day

• Schedule a post button is also right aligned with the rest of the CTAs on the screen

• Failed posts have a similar left red outline as the ones seen in calendar view that would draw users’ attention

• An error message would also appear as part of the row.

• The error message can be tailored depending on the error cases

• 'All’ is an added filter option