Oppia Blog Integration

A blogging interface for a non-profit

Oppia is creating a blog feature that allows creators to share the latest news relating to community outreach, volunteer recognition, and updates to its web and mobile apps. We want the blog to gain more traction by hosting it under the Oppia domain name instead of using the site Medium to publish our posts.

To make these features possible, two primary interfaces need to be built for this blogging platform: a blogging dashboard for bloggers and a blog home page for site visitors.

Goals for our users

Bloggers are users who have experience with blogging websites such as Medium, Tumblr, and Blogger. I interviewed an Oppia blogger, Noah, and asked what his needs are. Blogging features should allow users to…

1. Create, edit, and delete their postings on a dashboard
2. Use editing tools that are intuitive for those already familiar with blogging
3. Look at quantitative metrics of their blog posts to get an understanding of engagement
   

Readers or visitors to the site are most likely parents and teachers who want to get the latest updates on Oppia. With a broad audience to design for, I believe these users should be able to…

1. Understand from a glance what the site is about while holding users' attention
2. Navigate the site through visual clues and contexts
3. Filter through tags, find posts with a search bar, and browse through posts by author
   

Common features in other blog sites

To find what interfaces are commonly used in these publishing platforms, the team researched what reoccurring components and features were used:

A thorough analysis of these features/components can be read here [1, 2, 3] with credits to Lizzie Kim.

We ranked what features were the most prevalent in these blogging interfaces and how difficult designing them would be. Once those were measured, features that are most prevalent in other blog sites were chosen to be built within Oppia's blogging interface.

Simple components were prioritized first because they quicker to mock up.

Mood Board

Research, design, talk, and repeat

This project has many features that are being designed from scratch, so multiple iterations are expected. We plan on gradually building more features into the mocks and meet with bloggers and developers to validate the designs.

Initial drafts

In the first round of designing, I sketched prototypes to run through various ideas and layouts that can work.

So much to create, where do we start?

Since the low-fidelity mocks helped me envision the overall product, the best process was to create this interface one feature at a time. This allows me to focus on each component and gives me time to review them with our blogger.

Iteration 1: Home Page And Blogger Dashboard

The main pages of the site were built first because they established how the remaining features will appear and function.

What I found was that even though web provides a lot of area to work with, I fell into the trap of needing to fill in every space available. Some features, like the side menu, were not necessary at all, but this helped me focus on making essential tools more intuitive for readers and bloggers.

Iteration 2, 3, 4... : Fine-tuning each feature

Once the main pages were established, the rest of the features were built. Each feature went through several iterations, reviewed by developers and our own blogger who were able to validate the designs.

Takeaway #1: Predetermined tags should be set in the blog's initial stages

If we let bloggers create any tag they want, the database can end up with multiple tags under the same meaning since spellings can vary (i.e. Covid-19, Covid19, CoronaVirus). Since the blog interface will start out with a few posts at first, and it would help to get the posts under the same tag first. The developers, blogger, and I agreed that establishing 12 to 15 tags would be best, and add more later on as the site grows.

Takeaway #2: Thumbnail images make the whole site more attractive

Adding thumbnails to the posts made them more appealing to readers and may help retain viewership.

Takeaway #3: Pagination is the best way to navigate the website as it scales to have more posts later on

One thing we had to keep in mind was what the interface would look like when there were a few postings and later on hundreds of postings. With pagination, users have an understanding of how many postings there are while infinite scrolling may feel underwhelming when there are initially a few postings. Pagination makes navigating to previously browsed posts easier because they are kept within a page, unlike infinite scrolling where it is more difficult to pinpoint a listing.

Although we borrowed many features from existing websites, it was necessary to make the user experience familiar to what we expect users to have come across. Reinventing the wheel would not only be taxing for designers to create an original product, but also on the users too since they will need to learn how to use an interface for the first time.

If you're curious to see how the interfaces look, check out out the final mock or the videos below: