Maven Coalition

A Story of Launching a New Media Platform

Maven Coalition was a startup aimed at creating a media platform for professional publishers, journalists, community leaders, and niche audiences. The founders, leveraging their experience in building vibrant fan communities on previous sports media networks, aimed to assemble a coalition of medium-sized publishers with active, engaged communities. The goal of the platform was to blend user-generated content with premium content, creating a unique and engaging user experience.

The Maven platform logo I designed in the early phase.

Challenges

  • Balancing the branding of individual channels with that of Maven.
  • Integrating user-generated content, content from professional publishers, and advertisements within each channel, ensuring a harmonious blend.
  • Making design decisions swiftly in a dynamic, fast-paced environment.

My Role

As a product designer, I spearheaded all design-related initiatives, including branding, logo creation, UX/UI design, and front-end development. In the project's initial phase, I also took on the responsibility of hiring designers. Working in collaboration with developers, the network team, and executives, I played a pivotal role in driving the project forward.

Product Design
Prototyping
Design Style Guide
UX Engineering
Logo Design

The Launch Journey

Basic Assumptions and Quick Start

Drawing on past studies of Scout.com and Rivals.com, and leveraging our experience, the development team began constructing basic structures and pages. Concurrently, I developed high-fidelity comps for presentations to investors and clients. We frequently analyzed Medium and Facebook in this stage, as these platforms possessed similar features to those we aimed to implement.

Simple site map for the first phase
The team collected and sorted out the minimum information about the product so that we all could start working quickly.

The early mockups created for investors and publishers were instrumental in visualizing the potential of our media product, serving as a tangible representation of our vision and capabilities.

Shades of Gray

Our network platform had hundreds of channels, and we wanted each one to have its own color for the background and header. To keep things simple and avoid any clashes, I chose different shades of gray for the overall look of the platform. Coincidentally, this matched the complexion reduction trend for mobile apps that was emerging around the same time. This choice matched well with our black logo.

Two Column Stream vs Card View

Finding the optimal stream width for the two-column layout of the Channel stream, especially for multi-device experiences, presented a challenge. This led us to explore alternative options. After testing several prototypes, the lead developer experimented with a 'card view' featuring a masonry layout in the code, which was quickly endorsed by the CEO and the rest of the team.

Ultimately, we decided to offer both the two-column stream and card view, empowering channel owners to select the layout that best suits their business needs. Channels focused on mobile users, such as Kids Activities, preferred the card view. Conversely, the two-column layout was generally chosen by channels like those in the financial or political sectors, which attract more desktop users.

Front-end Design

With the arrival of a second designer on the team, I focused my efforts on front-end development tasks, creating themes, enhancing components to reach production standards, and writing code that reflected the visual design principles in the final product and its user experience. I played a key role in fixing layout issues and improving the design in code across multiple browsers and devices.

A sample view of VS code

Release the Beta Product

at the Founders’ Summit

Eight channels/publishers joined the beta product release in the summer of 2017. In less than a year, the product had attracted over 300 publishers and received about 90 million unique clicks per month. Today, Maven (now known as the Arena Group) has grown to 150 million unique visitors and hosts well-known brands like Sports Illustrated and TheStreet.


Large Channel Examples

KidsActivity Blog
AllHipHop
The Black Business School

Maven MVP product on the mobile phone image

Conclusion

In the dynamic environment of this fast-paced startup, I leaned heavily on my experience and intuition for design decisions. Utilizing gray shades was effective in achieving balance for the channels and Maven. However, in retrospect, I recognize the value of deeper research and experimentation with the color palette for the global navigation system.

Despite this reflection, the collaborative spirit among the teams and the vibrant developer-centric culture were deeply enriching. This synergy facilitated a streamlined production process, enabling us to rapidly launch the Minimum Viable Product (MVP). I take great pride in having contributed to building a product from the ground up amid the challenging yet exhilarating startup atmosphere.

After launching, I teamed up with an engineer to develop our design system, inspired by Material-UI from our MVP. While the initial version wasn't complete, it ignited a strong interest in design systems for me.

arrow_upward