Product Design at Smash

Smash.technology provides aspiring tech talent with exclusive learning opportunities, practical work experiences, and valuable connections to kickstart their careers.


The new landing page, the Smashboard

The final product

My Role

Product Manager

Tech used

HTML/CSS/JS, Git, Open edX
Adobe Creative Cloud, XD
Illustrator, Photoshop
Figma, Figjam, Miro

It's hard for junior talent and hiring companies to fill open roles, but Smash makes it easy

Young, talented individuals often struggle to secure their first job due to their limited work experience. Smash connects users with real work projects at top companies to help them secure their first jobs and offers university-level courses for individuals outside higher educational institutions.

Stephen speaking with student users at the University of Washington

Meeting with users at University of Washington campus

As the Founding Designer at Smash.technology, I led the design and buildout of a SaaS learning management system (LMS), resulting in a scalable MVP, first revenues, and a path to profitability.

Our Goal

Rework Smash's core product to alleviate pain points for landing highly-competitive, early-career jobs

the original Groups page, which became the inspiration for the new events page

Example of the original Smash layout. Notice the cards motif, Groups-only search bar, and navigation elements at top AND at left

Smash's web app was in mid-development when I joined. The offshore engineering team needed more oversight, and their contract favored waterfall development over agile methodologies. I worked with the CEO to reconfigure production for an efficient, scalable, and iterative build that optimized ROI.

Project Goals

• Design a consistent, user-friendly UI

• Create data visualizations for tracking progress

• Prioritize features based on user and market data

• Optimize design for smart resource allocation & quick shipping

the original apps jobs page

The original Job Opportunities panel. The search bar is restricted to this page, but browsing Jobs is available

the original Smash events page

The original Events panel. Again, siloed search. Notice that browsing events is NOT available

User Research

Users want to prepare for the job market, not struggle with a web app

From user research, users want to focus on career preparation and showcasing their qualifications. They badly wanted Smash's help, but too often our web app was unhelpful or confusing, which only added to their workload. Before I could help, I'd need to learn more.

First Questions

• What features do our users expect? Which are most helpful?

• How might we feasibly engineer industry-standard features?

• Can we ship on time and in budget?

Below are the common features that have become LMS industry standards. Notice the similarities between Canvas and Docebo’s features and presentation.

A landing page on our competitor Docebo's website

Docebo's layout

A landing page on our competitor Canvas' website

Canvas's layout and feature set

The original Smash dashboard

Contrast the above with our original landing page. How much space should be dedicated to information that users already know about themselves?

The Smash Score is one of Smash’s key differentiating features. It's a personalized metric comparing a user’s skills to hiring requirements at our partnering companies, like Alaskan Airlines and Microsoft.

the original visualization of the Smash score

The OG visualization of the Smash Score

User research revealed our star feature was frustrating because it didn't show how users' actions and data influenced their scores. Continue on for the solution.

Designing

A Fast Design System

We needed a design system–STAT! I put ours together by modifying Bold Design System for two reasons: its extensive visualization components and its MIT license.

This system helped me communicate key information to the engineering team, present progress and product direction to leadership, and help interns make meaningful contributions sooner.

A sample of the design system I built

A sample of Smash's design system

An Iterative Process

Smash's design changed a lot over many iterations and through several business models. Let's examine the Events page.

the original web app's Groups page

The original Groups page became the inspiration for the new Events page

The Events page needed to be completely rethought. The middle image below was from a component library I had created based on Ant Design's design system, but it was later replaced by a better alternative (image on the right) inspired by the Bold Design System.

Our key partnership is with Microsoft, so I included a subtle hint of O365 nostalgia in our design as requested by leadership.

a wireframe of our new web app's event page

Wireframe

an intermediary events page from an earlier prototype of our web app

Early iteration

the events page from our new web app

Final product

The Build

Empowering learners by giving them a job-seeking advantage

My main objective was to create a straightforward user experience that made it easy for users to navigate to their goals and to understand their information.

The new, simplified information architecture

Streamlined information architecture

A Simplified User Journey

I reorganized the primary user flows into their respective sections, accessible through a single navigation pane on the left. This improved the user experience by reducing cognitive load.

The original Smash landing page

Before:  navigation elements without a discernible pattern

A simplified navigational architecture from the finished project

After: simplified navigational architecture

Reimagined Home Page

The new main page, the Smashboard, provides quick access to Smash's most commonly used features and information through interactive cards, following a common paradigm that users are already comfortable with.

The new landing page, the Smashboard

The Smashboard

Finding Important Stuff

I added a global search function allowing users to easily find Events, Projects, and Groups from a single search bar atop every page. Before, only categorical search bars existed, which required navigating to the appropriate page.

a portion of our web app, the search bar

Global search on every page

A New Administrative View

Administrators like Smash staff, lecturers, and business partners can use this platform to create events, projects, and monitor learners' progress. Previously, administrators were an overlooked user demographic.

The new Administrator view, with its many visualizations and prioritized task cards

Administrator Portal

Deliver

$200k

I saved $200,000 by changing product strategies and hiring a specialist engineering team

73%

My redesign increased customer satisfaction, with NPS growing 73%

5

We shipped a successful MVP in 5 months, on time and in budget, which led to our first revenues

The successful launch of our MVP has generated our first revenues and expanded our user base. We significantly improved our staff-to-user ratio, enhancing operational efficiency and reducing costs. With our growing user base and web app, we're ready to explore lucrative corporate hiring opportunities. This will cut hiring costs to zero for our users while helping companies save tens of thousands per qualified hire.

Best of all, I have a product to glean data, learn, perfect, and grow.

Some Takeaways

🌺

Being a founding designer can be tough, but it's made me comfortable pitching/demoing to stakeholders at different levels.

🪷

Good product design is crucial for digital-first businesses. If I don't champion it, who will?

🪻

Reworking my designs to new business models has made me a better, less precious designer.

Thanks for reading!