Empowering Missouri educators, on every screen.
MSTA has supported Missouri’s teachers since 1856, serving more than 47,000 educators and other professionals. We rebuilt its website around the people it serves: a clear home for members, a dedicated path for educators, a legal services page that puts help one call away, and an events calendar that is easy to filter.
- PLATFORM
- Responsive website with a clear navigation for members and educators
- SCOPE
- Home, for educators, legal services, benefits, events, about, join
- SCREENS
- Desktop, tablet and phone
CHAPTER 01 OF 04
Built around the people it serves
Most visitors come to do one thing: join, find help, or get to a service. The site puts those first.
- SUPPORTING MISSOURI TEACHERS SINCE
- 1856
- EDUCATORS SERVED
- 47,000+
- QUICK LINKS IN THE HERO
- 5
02 · RESPONSIVE VIEWS
Quick Links for the tasks members come for
Instead of a long menu, the hero lists the five things most visitors need: Join MSTA, find a member service coordinator, Legal Services, Professional Learning and Member Benefits. Each link has an arrow so it reads as a destination.
- QUICK LINKS
- TASK FIRST
- ARROW CTAS
16 · MEMBER SERVICES
Member services, in one place
The services members use most are listed together: Legal Services, Member Benefits, Discounts and Deals, Salary and Research, and Professional Learning. Each one is a page of its own, linked from Quick Links and from the educators page.
- MEMBER SERVICES
- BENEFITS
07 · RESPONSIVE VIEWS
Legal services: the contact card comes first
When someone needs legal help, the page puts the phone number and email on a clipped note card before anything else. A short note explains that school email is not private, and the online form sits below. On a phone, the card moves up under the heading.
- LEGAL SERVICES
- CONTACT FIRST
- PRIVACY NOTE
CHAPTER 02 OF 04
A page for every job
Events, the story of MSTA, the decision to join and the educators’ own page, each built around what its visitor came to do.
03 · RESPONSIVE VIEWS
Events you can filter by region and type
The events page opens with a sky-blue hero and a filter bar: All Events, All Regions, Capitol Visits, Open Hearings and Professional Learning. Members can narrow the calendar to the events that matter to them, in their region, without reading through everything.
- EVENTS
- FILTERS
- REGIONS
CHAPTER 03 OF 04
One system, every screen
The same reds, heroes and Quick Links on a desktop, a tablet and a phone.
01 · RESPONSIVE VIEWS
A home that speaks to educators first
The home page opens on a red hero that names the organization and what it does: a grassroots, independent association supporting more than 47,000 Missouri educators. On a laptop, tablet and phone the same message stays in front, with Quick Links and the “Join Today to Stay Protected” card just below.
- RESPONSIVE
- HERO
- MEMBERSHIP
17 · HOMEPAGE LAYERS
The homepage, built layer by layer
The homepage broken into its design layers, from the hero and its message to the quick links and the cards below, so each part can be reviewed and changed on its own.
- LAYERS
- HOMEPAGE
CHAPTER 04 OF 04
Missouri red, checked for contrast
A brand built on 1856 and 47,000 educators, organized into four colored sections members can find their way around.
12 · BRAND OVERVIEW
A brand built on 1856 and 47,000 educators
The brand overview holds the logo, the reversed mark for the home header, the brand line “Empowering Missouri Educators” and the facts that back it up: founded in 1856, more than 47,000 educators served and 15 member service coordinators. The voice is direct and reassuring, with short action labels such as Join Now, Register Now and Read more.
- BRAND LINE
- VOICE
- LOGO
Missouri red and Capitol blue, checked for contrast
Missouri red is the primary brand color for buttons, links and highlights. Slate ink carries body text and the footer. Each category has its own color, Capitol blue for Education Policy, Prairie teal for Professional Learning and Harvest gold for Events, and each is shown with the contrast it gives against white and ink.
- BRAND COLORS
- CATEGORY COLORS
- CONTRAST
Rockwell for headlines, Quicksand for everything else
Rockwell Bold sets the hero at 90px over 108px of leading and the section titles at 36px. Quicksand handles card titles, body text at 18px with 27px of leading, and the small uppercase eyebrows above each section. The pairing feels like a school textbook, and it still reads easily on a phone.
- ROCKWELL
- QUICKSAND
- TYPE SCALE
13 · VISUAL LANGUAGE
Hero bands, label bars and paper
Each page type has its own band: a plum-to-red home hero, mint-to-wheat section heroes, a sky-blue events hero and ice-blue label bars. Quick links carry arrow calls to action, and the on-this-page menu and the tilted photo card reuse the same parts. Ruled-notebook backgrounds, paper clips and slightly rotated cards carry the classroom theme.
- HERO BANDS
- PAPER MOTIF
- REUSABLE PARTS
14 · INFORMATION ARCHITECTURE
How the menu is organized
The menu has four main sections, each in its own color: For Missouri Educators (7 pages), Education Policy (6), About MSTA (6) and Events (8). Members find their own section first, and the policy and organizational pages sit one level away.
- NAVIGATION
- FOUR SECTIONS
- COLOR-CODED
15 · TECHNICAL STACK
The stack behind the site
The technologies behind the website, drawn as one stack so that the team can see what each layer does and what it depends on.
- STACK
- LAYERS
THE OUTCOME
A home members can find their way around.
MSTA’s website is now organized around its members: a clear home, a dedicated path for educators, legal help one call away and an events calendar that is easy to filter, on any screen.
- MENU SECTIONS, EACH IN ITS OWN COLOR
- 4
- PAGES IN THE MENU
- 27
- PHONE SCREENS, ONE SYSTEM
- 6
- 01
Tasks before menus
Quick Links in the hero carry the five things most visitors need.
- 02
Help comes first
On the legal services page, the phone number and email come before anything else.
- 03
One system
The same heroes, colors and type from desktop to phone, checked for contrast.
NEXT STEP
Serving members across a state?
We build member and association sites that make the next step obvious, on any screen. Start with what your members need to do first, and we can map the rest of the site from there.