Operation Math

PRODUCT DESIGNER

Deliverables

Redesigning a Palo Alto-based edtech startup's website.
 🏷️: leadership, agency work, event planning, design thinking, XFN Collaboration  🏷️: leadership, agency work, event planning, design thinking, XFN Collaboration 🏷️: leadership, agency work, event planning, design thinking, XFN Collaboration

The backstory

overview

Operation Math is a Palo Alto-based startup whose purpose is to teach and hopefully foster a love for math at an early age, in order to create strong foundations for future learning. OpMath uses personalized learning modules and a tablet app to accomplish this mission.

The mission

problem identification

OpMath lacked a professional website, and therefore did not have standalone web content to market itself to diverse audiences, be discovered, or redirect clients if lost.
Investors
Keeping an eye out for indicators of professionalism and company work ethic, and looking to go deep on product specs.

“Is this a company I’m interested in reaching out to? Would I vouch for them?”
Parents
Scoping out credibility, values, and looking to be convinced to sign up here. Looking for more information.

“Would I feel comfortable sending my child here? Can I find directions or more information to set up a call?”
POTENTIAL TUTORS
Looking for a company that is a fit for their next part-time or full-time job.


““Does this seem like a company I’d want to work at? Can I get a glimpse into the work environment through their story and values?”

ideation

Notes From The Client

Our first call with Mehr, the founder of OpMath, yielded her visual inspiration for the site design, a rough list of sections and features to be included, and further insight to the company’s mission statement.

Mehr wanted the site to have a “hip, cool/chic aesthetic, since its a Bay Area EdTech startup.” She explained that she wanted the site to stand out from other well-known tutoring companies (such as Kumon and Mathnasium); she envisioned for it to look intriguing and trendy to even teens and young adults.
She elaborated upon her vision for Operation Math with the team, expressing that encouraging kids to de-antagonize math would hopefully fill in the knowledge gaps that she’s currently seeing in later stage STEM education and careers. Mehr is passionate about empowering young students through OpMath.
Mehr’s visual inspirations, including other product websites such as Stripe and Backer, clued me into her affinity for design elements such as soft gradients, communicative heroes, and clear, bold CTAs. I was especially interested in the way Stripe visually enabled long lists of options to be mentally digestable with the pairing of iconography alongside each title.

Design process

Telling a Story: Information Architecture

To begin, the team inspected the list of features that Mehr wanted on the site, and grouped them into similar categories based on the story they told. For example, Mehr’s request for a “step by step” guide to OpMath’s learning process fell into the same category as the call for expanded features of the overall “OpMath experience,” as we discerned that both of these sections detailed information about the company’s product. In dissecting each phrase or list item together, creating similar groups, and crafting communication goals for each group, four main pages emerged as shown below in our final site map.

Personal Takeaways

Operation Math’s branding was completed in-house by an Innovative Design branding team, so our team of web designers consulted the project lead to dissect OpMath’s brand choices further.
We chose Poppins as a font family in addition to the set branding with Avenir, out of an appreciation for the readable and bold yet fully-rounded, playful typescript that mirrored our goal of achieving professional whimsy.

Design process

Telling a Story: Information Architecture

The team chose to tackle different pages at first; I was assigned the product and contact pages. Keeping in mind the notes I took from Mehr’s inspiration sites, I opted for a bold hero with a CTA button and product images, featuring iconography-paired feature definitions below. To depict that the services were aimed towards children, whilst maintaining a “clean” look and information clarity, my initial iterations took inspiration from geometry, sinusoidal waves, and the “visual language of math,” as I referred to it during critique.
Waves inspired by sinusoidal functions
Polygon-shaped graphic elements

Design process

Telling a Story: Information Architecture

The team chose to tackle different pages at first; I was assigned the product and contact pages. Keeping in mind the notes I took from Mehr’s inspiration sites, I opted for a bold hero with a CTA button and product images, featuring iconography-paired feature definitions below. To depict that the services were aimed towards children, whilst maintaining a “clean” look and information clarity, my initial iterations took inspiration from geometry, sinusoidal waves, and the “visual language of math,” as I referred to it during critique.

It's dangerous to go alone! 
Take this.

NAVIGATION

ME, ELSEWHERE