While BALLPRK’s original design was well received I found that I had trouble easily adding new features and the aesthetics got in the way of the content. Since the original release I have been experimenting with a philosophy and collection of patterns that prioritized minimalism as a way of creating focus and branding through typography and placement. This showcase is the latest example of my experiment based on two years of testing and its application in different projects.

Content

Internally we split BALLPRK into two main sets of features: Content and Community. Sooo let’s organize this showcase in the same way so we’re all on the same page.

Onboarding

We’ll start our journey the same way our users do by taking you through the onboarding process. We use onboarding to do two important things: create just the right amount friction to keep out the riffraff and start to introduce our users to the patterns we’ll be using throughout the app.

Fun little trick: The feed is built in microseconds but we add a few seconds delay to make it feel like an algorithm is really working hard to personalizing things.

Feed, Explore, and Tags

While a feed and explore are very similar we have to keep in mind the purpose of each. A feed is based on a personally curated experience (their following, groups, tags, etc.). Exploration is all about showing users the kind of experience they could have.

Content Creation

BALLPRK does content thusly: Image, Video, Shout, Question, Write, or Link. Nothing too crazy. Shout and Question are text snippets stylized to easily understand their purpose, Write is blog-esque, and the rest are what you’d expect.

I always try to design any type of content creation so that the editing state is as close as possible to the final content state. In the cases below we throw the profile info section up top and organize the inputs in the same order as will be displayed in the post.

The most important thing to keep in mind is that these views needs to be flexible to add features without breaking the content creation flow that our users have memorized.

This is a little sample of the content creation views. No need to bore you with every single view so here are our two most used: Image/Video and Write.

Post

I bet you’re just dying to see what a post looks like in its full glory! How I envy you right now. Posts need to support a few different views based on their content type and how they’re navigated to. For example, the same post could render differently if it’s clicked on from the feed vs. an external link. As well as comment and link views.

Aaaand another sampling.

Search

We realize that Search can be touches both Community and Content so let’s use it as a bridge between our two feature sets. In most cases where search can be used for a bunch of different result types I use a pattern that organizes results into their respective types, allowing the user to see top results for each type and dive in deep if they need. This shows the user an overview of the types of content the app provides. It also provides an easy way to create custom views based on content type (eg. custom filters, list types, etc.).

Two left-most views show the more functional aspects of search state: activated-with-no-input-so-show-recent-searches-note-the-type-preview-left-of-text, and activated-with-input-before-submission.

Community

This feature-set is based on the users and how they’re organized, as well as how they communicate. The former is represented by Groups, Hubs, and Profiles. The latter by Messaging and Sessions.

Profile, Brand, Hub, and Group

For profile, brand, hub, and group pages we use basically the same layout but with some variation. These views do basically the same thing: display content specific to one context with some specific events (eg. “Join” for groups, “Message” for profiles, etc.).

On glorious display in these views is a common example of BP’s component reuse. We use a variation of the user/group/brand card component as the persistent section of this view (or vice-versa).

Sessions and Messaging

Sessions and Messaging

The backbone of BP is redefining mentorship. This means that mentorship can happen through something as small as a piece of inspiring content or as involved as a series of one-on-one sessions. Messaging and Sessions represent the latter and are tightly coupled.

We use Twilio for both our messaging and video sessions and that allows us to merge those two functionalities. That means we can allow the conversations inside sessions to persist outside to keep the relationship alive and the advice available.

The basic session flow goes like this: mentee requests session > checks off some possible dates/times > mentor selects date/time from options > mentee pays > 15 minutes before session mentee and mentor are allowed to join session.

The booking process is missing here and it’s honestly not all that exciting so I’ve left it out for everyone’s sake.

Future Scaling and Iterations

This experiment is constantly evolving and but we’re already seeing the benefits of reduced branding and minimalist interfaces:

1. Reduce cognitive load by keeping things aesthetically simple
2. Typography and element placement work as functional branding
3. Elements that need a stronger focus can easily be modified without breaking the composition
4. Naturally flexible layouts make adding/removing features very little work
5. Patterns can easily be scaled up or down to create reusable components
6. Bonus: Fresh and clean