UX Design

PennyBois Hub & Member Dashboard

PennyBois—an educational program helping individuals navigate the stock market, cryptocurrency, and other financial products—needed a centralized dashboard for members to access to livestreams, guides, exclusive resources, products, and billing details. 

PennyBois Hub & Member Dashboard by Dane O'Leary Media
Project

An Interface for Members-Only Content, Services & Account Management

Tasked with designing a flexible, scalable interface for subscribers to more conveniently exclusive members-only perks and resources.
Details
Role

Lead Designer

Industry

Finance, fintech

Timeline

4 Weeks

Goals & Challenges

As the first step toward creating a unified first-party platform, PennyBois was looking to create a dashboard interface that would consolidate resources spread across numerous third-party tools while giving subscribers an easier way to engage with members-only content and features.

The dashboard needed a clean, intuitive design free of unnecessary clutter with streamlined navigation. Additionally, the visual style of the dashboard needed to be consistent with the brand’s existing aesthetic. 

For me as lead designer, one of the biggest challenges would be designing a system that balanced educational content with live data.

  • Jakob's law
    • Needs to resemble the sorts of interfaces that most users are accustomed to.
  • Flexible, Unified Platform
    • Consolidates exclusive members-only content that was previously strewn across numerous platforms.
    • Needs to be scalable and easily expanded over time as PennyBois rolls out new services and products.
  • Account & Membership Management
    • Providing an easy-access view of billing information, including days remaining in the current billing cycle.
    • Needs to give users the ability to adjust their plan and billing details.
  • Encouraging referrals
    • Subscribers’ referral codes need to be accessible, easily shared to earn membership discounts and other perks.
Robinhood
Coinbase
Stripe
Slack
YouTube

I was very inspired by Robinhood’s sleek, minimalist interface. Keeping things simple allows the app to highlight essential metrics and content at users’ fingertips.

The main elements I hoped to implement were legibility and ensuring important dashboard elements (i.e. livestreams, billing, account management) are accessible.

Robinhood logo | Dane O'Leary Media
Robinhood app UI depicted on an iPhone 15 | Dane O'Leary Media

Among other things, the Coinbase dashboard is notable for its strong data visualization and intuitive navigation. The easily recognizable icons and well-structured data were clear inspirations for how I laid out the PennyBois dashboard, especially the dynamic data/content.

Coinbase logo | Dane O'Leary Media
Coinbase app UI depicted on an iPhone 15 | Dane O'Leary Media

Stripe’s account management system balances user information with transaction details in a flexible, modular layout. I used this technique for building out the Plan & Billing sections of the PennyBois dashboard, ensuring that users could quickly view their payment status, referral bonuses, and upcoming charges.

Stripe logo | Dane O'Leary Media
Stripe app on desktop | Dane O'Leary Media

The master-detail UI pattern that Slack uses allows users to quickly switch between conversations, channels, teams, and even workspaces. For me, it made the most sense to implement a similar structure for the PennyBois dashboard so that navigating between livestreams, guides, and other content was far more intuitive

Slack logo | Dane O'Leary Media
Slack desktop app UI | Dane O'Leary Media

YouTube is known for its grid-based interface with strong data visualization and intuitive navigation. The use of recognizable icons and well-structured data were clear inspirations for how I laid out the PennyBois dashboard, particularly the stock charts and livestreams.

YouTube logo | Dane O'Leary Media
YouTube website on desktop | Dane O'Leary Media

Research & Discovery

When designing the PennyBois dashboard, I analyzed several well-known tools and platforms, focusing particular on some of those commonly used by traders and SaaS platforms for account management.

Production

Design Process

While interviewing PennyBois members, I learned that many users were frustrated at how scattered everything felt. They wanted a way to more conveniently access everything included with a PennyBois membership.

Toolkit
sketch-symbolCreated with Sketch.Figma.logoCreated using Figma
Wireframing & Prototyping

Using wireframes to work out the layout and navigation, my low-fidelity wireframes helped validate the overall structure, ensuring each feature was easily accessible. From there, I made high-fidelity mockups that incorporated the color scheme and brand identity of PennyBois.

Development Handoff

Once the design was finalized, I made detailed handoff documents in Figma that included style guides, interactions, and annotated specifications for each component.

See More Projects