Designing an overview of scheduled content for Buffer mobile app: A case study

The following case study is a part of submission for design challenge by Buffer. I had the opportunity to interview with Buffer team and participate in this design challenge.

The challenge

Buffer is a content scheduling platform. Its iOS and Android apps help agencies, brands and publishers schedule to manage and track the performance of all their social profiles in one place.

Problem

Here are some specific pain points users have shared with us:

  • It’s challenging to get an overview of scheduled content at a glance.
  • It can be difficult to identify gaps in the upcoming content schedule.
  • It’s not easy to quickly move or reschedule content.

Show us your solution for giving users an overview of their scheduled content, while making it simple to spot and fill gaps in their schedule, all within a mobile app.

Deliverable

  • Process — show us how you arrived at your final solution. Sketched, wireframes and mockups are perfect. What constraints did you consider? how did you keep the user top of mind? Show us the “why” behind your work.
  • Solution — show us what you final solution looks like and how it works. Static screens or interactive prototypes are great.
  • Breakdown — include any interaction notes, context or other helpful details your future team would need to make your solution a reality. Annotated screens or notes are perfect.

My approach

I approached the exercise in 5 parts:

  1. Understanding the task: Contextual analysis, constraints & assumptions
  2. Defining audience: When/Where, user context and needs
  3. Exploring ideas: Sketches, lightning demos, user interactions
  4. Visual design: reiterating sketches and ideas
  5. Conclusions: measure success and future explorations

Understanding the task

Buffer’s vision is to build the simplest and most powerful social media tool, and to set the bar for great customer support.

Social media is a big part of businesses in the modern world. People use it to convey brand voice, support grievances and respond to queries. Buffer enhances the social media management experiences by building related tools.

One of the core problem it solves is content scheduling. It helps people to buffer content in advance so that they can focus more on creating best content for their brand.

Apart from building great tools, Buffer is also known for its transparent culture. As a result, a relationship of trust exists between its users and the company.

Immediately after I got the exercise, I started taking notes on my notebook. It helps me immerse myself into the problem and understand the task at hand. Once I did that I got back to the email with my doubts.

Initial notes on understanding the task.

Understanding Social media

Before moving on to understanding user’s contexts and problems, I wanted to deep dive what contributes to a successful social media strategy. I created this mindmap to identify contextual details which will help me in making design decisions during ideation process. This will also help me understand where Buffer fits holistically.

Figure 1: Mindmap of factors contributing to successful social media strategy

Buffer obviously contributes to the tooling aspect of the factors. I came to know about other product offerings by Buffer from Joel’s recent tweet 👇

The above tweet made me want to brainstorm ideas on how to potentially increase usage of other products by leveraging the most popular one.

Constraints/Technology

I made assumptions on how teams or individuals use Buffer in their day-to-day workflow, from my personal experience and brief exposure while working at an ad-tech startup.

Figure 2: Different stages of social media manager workflow

For the scope of this exercise, I will be focusing on the “Plan” & “Action” aspect of the workflow.

Buffer already has reputed products 👏 🎉 ranging across multiple devices. I will try to integrate my ideas to existing ecosystem so that they fit organically with minimal change.

Defining audience

The scope of the tool varies a lot depending on the audience. An individual running a side project would have very limited requirements, while an Enterprise company with global social media team will be completely different. As a result I will focus on personas that range from single person to a small team of 5–6 people.

  1. Solo entrepreneurs
  2. Small startup, with 2–3 people in marketing team.

The rationale behind above assumptions is that people on mobile app prefer tasks that are easy and quick to complete. It is not necessary to replicate all the features from desktop to mobile. It all depends on the context and the goal of the user. I also wanted to avoid edge cases or complex scenarios an Enterprise client would have.

I alway give example of online purchase in desktop vs mobile. When buying a new gadget, people prefer using desktop because they want to compare prices, features etc, and mobile view do not fit that criteria. But once they have locked in a decision and put it in a cart, they can buy it from anywhere using the mobile app.

Understanding the users context and needs

Before jumping off to solutions, it is better to understand current contexts on when/where the app will be used and what the current challenges faced currently by the users.

As mentioned in the exercise these are the problems currently known while using the mobile app:

  • It’s challenging to get an overview of scheduled content at a glance.
  • It can be difficult to identify gaps in the upcoming content schedule.
  • It’s not easy to quickly move or reschedule content.

I love JTBD framework where we brainstorm on core needs. One of its famous quote is “people do not want a quarter-inch drill, they want a quarter inch hole.

Following the above framework, I brainstormed WHY people want to know overview of scheduled content at a glance in a mobile app. I also wanted to know why people would prefer mobile app over desktop as most of the traditional workflow are aligned with apps that are best viewed on large screens e.g. Google sheets, Airtable, Project/Task management tools (Basecamp, Asana).

The following pointers try to rationalize above statements:

  • Convenience: People love to have assurance that they can access anything from anywhere.
  • Control: People need to be mindful about situation and the content that goes out.
  • Quick: Life is not perfect and it always does not as planned. People need to react fast to real-time events and situations.
  • Effective: Content planning in advance means doing work in batches. As a result there is always chance of human error and its not a bad thing. Having overview of what goes out for the day is helpful to skim potential mistakes and correct them.
  • Efficient: Ability to work on the go enables to perform job efficiently. For e.g evaluating scheduled posts during daily 1 hr commute.

Next, I listed out good and bad user experiences when people want to get an overview of the scheduled content, easily spot and fill gaps in an mobile app.

  1. Overview experience
  • Good : individualized recommendations, showing important information to make better judgement
  • Good: leveraging established mobile interaction gestures for delightful experience
  • Good: ability to see related texts, links and images associated with scheduled content
  • Bad: dense display of information, increasing anxiety and confusion.

2. Spotting gaps

  • Good: easy visual representation that make finding gaps easier
  • Bad: no visual or overlap of content, increasing frustration and hindering ability to perform job correctly.

3. Filling gaps

  • Good: supporting existing ecosystem to enable easy sharing of content. (e.g supporting cloud storage platforms, publication aggregator)
  • Bad: forcing people to multiple screens or steps in order to share content which can be done in 1 click if in desktop.

Exploring ideas

I love Buffer’s open blog and noticed people really appreciate the content and contribute to it. Going into ideation process, I wanted to replicate the same experience in the mobile, an app that is thoughtful, pleasant and simple.

Buffer’s design system principle “Be clear, not clever”, really resonated with my approach.

https://buffer.gitbook.io/buffer-design-system/guidelines/overview#be-clear-not-clever

Also I would like to thank Tyler for answering my doubts and providing helpful links. 👍

Kudos to the documentation team, it had all the answers I was looking for and was very easy to find.

How people use it now

For understanding how people currently use, I sourced all the inspirations from the existing patterns in the Buffer’s web and mobile app.

Figure 3: Screenshots taken from documentation

Lightning demo

I love to do lightning demos with the team. We generally present ideas or any existing solutions we love in other apps or products. This helps in getting buy-in from the team quickly as a group.

Figure 4: Shopify dashboard view
  • I liked the personal greeting and how it showcases overall overview of the e-commerce store.
Figure 5: Uber’s promotional card (old)
  • I like this pattern. This can be potentially used to outbound people who are interested in other product offerings by Buffer or any promotional campaign.
Figure 6: Headspace app (consistent layout across iOS and Android)
  • I love Headspace design due to branding and marketing in social media.
  • I also like how the design is consistent across iOS and Android devices.

Rough sketches

screenshots of my raw notes

One of the first task I want to handle is how information be structured so that it is easy to get overview of the content but also fast when one decides to drill down to a specific situation at hand.

As a result I came upon this information architecture.

  1. Introducing the concept of organization.
  • Organization will help agencies and people who handle social media for multiple clients. It follows similar pattern used in Instagram for multiple accounts.
  • Each organization will have multiple social media channels.

2. Streamlining navigation to 3 options at hand.

  • Overview, Content, Profile
Figure 6: Rethinking IA of the app

Next I brainstormed on how landing screen will look like when user opens the app.

Figure 7: Anatomy of Overview screen

Moving to the content screen, I followed existing pattern followed in the website with a new addition Grid view.

Figure 9: Anatomy of Grid view under Content screen

After defining basic skeleton and design direction, I directly jumped to Figma for designing the UI. I frequently jump off between hand drawn sketching and high fidelity designs. It helps me play with new ideas and validate it quickly.

Visual design

I didn’t intent to re-invent the wheel. I strictly followed the guidelines in the Design system.

https://buffer.gitbook.io/buffer-design-system/

I wanted to design a universal app that is consistent with layout and design irrespective of OS and device. Some companies I know that do the same are Headspace, Airbnb, Uber, etc. In the past when I was design-team-of-one, this also helped me in saving time as well as getting team buy-in on theme and overall feel.

For the sake of this exercise I have decided to choose iPhone — X for designing the screens.

Figure 10: Redesigned app

Home screen

Figure 11: Home screen

The Home screen is personal and act as an advisor. It prioritizes what to show based on situation and context. It also act as a gateway to other screens to take desired action. It features quick KPIs social media manager would love to know when using Buffer.

Figure 12: redesigning bottom navigation

One of the other factors that led me redesign the bottom navigation was to avoid conflicting actions with newer iphone models. The physical home button is gone and people have to swipe up from the bottom to go home. As a result I wanted to avoid overlap of gestures and provide the action button only where it is needed.

Figure 13: Prioritizing display of content

The content of the post changes based on recency. The more immediate one displays extra information with larger photo to let user know what will be going out if unchanged. I wanted to explore a new feature called Preview. It will mimic how the post would look like in the local context of the specific social media channel.

Figure 14: new feature exploration: snooze

This screen showcase when you tap on more actions. I wanted to explore a new feature called Snooze, where user can delay the timing of post instead of moving down the schedule pipeline.

Figure 15: different types of individualized recommendations

Individualized recommendation or personalized content delight users and according to the following article users don’t mind privacy concerns if it will help them getting their job done effectively. I would love to explore leveraging Machine learning to enhance this experience.

Individualized Recommendations: Users' Expectations & Assumptions

Content Screen

Figure 16: List, Grid and Calendar view for queued content

Following the existing pattern in the web app, I have added a new view Grid view. The screen showcase 1-day schedule at a time with ability to view schedule for next 3 days. The reason behind this constraint is I don’t want to overwhelm users with barrage of information. As I mentioned earlier, people want to perform easy and quick tasks when mobile. 1-day view provides them enough context to take decisions immediately. If the ask is to view monthly or weekly schedule, it would be best preferred at desktop as the goal would be completely different from what they want in mobile.

It also features easily identifiable empty slots and fill in the gaps.

Figure 17: Floating action button (FAB) in action

Though FABs are very android specifics, it is a common pattern in many of the iOS apps (Lyft, Uber etc). I brought pause queue options here because it felt more intuitive instead of going into settings to pause a queue.

Figure 18: Mico-interaction on a list item

I have tried to visualize one of the micro-interactions on the content screen. It features drawer sliding down when someone taps on the list item. The multiple actions are aligned with what was presented at the Home screen.

User can:

  • preview what the post will look like when published
  • snooze the post for custom time
  • edit the post
  • share the post now

I would love to explore more with Instagram like quick view feature on the grid and common interaction pattern associated with calendar view.

Measure success

Next steps would be to validate my assumptions by doing usability testing and see how this concepts perform at the hands of real users.

To measure the success of this interface and its future iterations, I’d track:

  1. Engagement count — how well the Home screen attract attention.
  • what % people are tapping on the recommendations
  1. Compare metrics — I would like to compare key metrics with old design
  • mobile usage %
  • overall action completion
  1. List, Grid, or Calendar — which view is used the most and why

Next iterations would include

  1. Better personal recommendations. Leveraging Machine learning to provide more accurate and personal recommendations based on extensive training.
  2. Analytics. More powerful analytics with daily reports and alert system.
  3. Vertical content. Better support for content that are vertical.
  4. Social media checklists. It would act as Linters, identifying potential human errors like og meta tags, smart suggestions, hashtags etc.

Conclusion

I enjoyed working on this design exercise. I am certain that I have barely touched the surface and there’s more to this than meets the eye. One of the challenges I like about designing for consumer apps is that there is not right or wrong answer. Its about retrospection and iterations.

Mobile ecosystem is changing every year and we have to adapt to it. This means leveraging latest innovations in technology to create delightful experiences.

Follow me on:

Twitter 👉 https://twitter.com/tridipthrizu

Instagram 👉 https://www.instagram.com/tridipthrizu/

Portfolio website 👉 https://tridipthrizu.com