UXUIWebsite

NexSpark STEM

A bright, credible website for a hands-on STEM education startup, built around one action: book a free school workshop.

Visit nexspark.onrender.com
ClientNexSpark
CategoryWeb Design
LocationKalpetta, Wayanad
ServicesWeb design, UI design, Responsive layouts

Overview

NexSpark teaches hands-on robotics, coding, electronics and IoT inside schools. Based in Kalpetta, Wayanad, it works with schools across Kerala and supplies the kits students build with.

Challenge

The site has to speak to three audiences at once: schools choosing a partner, parents checking what their children will learn, and students who just want to build things. Each needed a clear path without the homepage turning into a brochure.

UX study

Who it's for and how they move.

Before any screen, we mapped the people using it, what each needs to get done, and the shortest path to it.

Who it's for

School heads

Judge whether NexSpark is credible enough to run classes inside their school.

Parents

See what their child will learn and build, and whether it is safe and worth it.

Students

Get excited about robots, code and kits they can build themselves.

Key journeys

Book a workshop
  1. Land on home
  2. See the promise
  3. Book A Free Workshop
  4. Pick a date
Partner as a school
  1. Schools page
  2. How it works
  3. Partner With Us
  4. Talk to the team
Explore a kit
  1. Kits
  2. 50+ projects
  3. Kit details
  4. Enquire

Structure

  • Home
  • About
  • Courses
  • Kits
  • Schools
  • Parents
  • Contact

UX decisions

  1. One primary action everywhere: Book A Free Workshop, always in the same blue
  2. Separate Schools and Parents pages so each audience reads only what matters to them
  3. A numbered hero story (1, 2, 3) that explains the offer in three steps
  4. Plain-language course names instead of curriculum jargon
  5. Light and dark themes for classroom projectors and late-night parent browsing
UI study

The visual system.

We organised the site around those audiences, with dedicated Schools, Parents, Courses and Kits pages, and one action repeated everywhere: book a free workshop. The look comes from the classroom bench: an oversized Arduino UNO, electric blue and clean, confident type that feels friendly to parents and serious enough for school heads.

Colour

Electric blue#2470E4Actions, highlights, the UNO board
Sky#C8DCF2Hero and section backgrounds
Ink#0F172AHeadlines and body text
Spark yellow#F5B800Small accents and icons
White#FFFFFFCards and surfaces

Typography

Display

A bold, tightly set geometric sans for big, friendly headlines

Body

A clean sans at a comfortable size for parents reading on phones

Components

  • Pill buttons, primary and secondary
  • Numbered story rail
  • Know More highlight card with icon stack
  • Course and kit cards
  • Theme toggle
  • Sticky navigation

What we built

  • Homepage hero with a numbered story and a large Arduino UNO illustration
  • Courses and Kits pages for robotics, coding, electronics and IoT
  • Separate journeys for Schools and Parents
  • Book A Free Workshop and Partner With Us calls to action throughout
  • A highlight card for the kit: 50+ projects, from a blinking LED to a self-driving robot
  • Light and dark themes
  • Responsive layouts for phones, tablets and desktops

See it live

Next projectBlood Donor Directory
More work

Other projects

ZiaBrand Identity · Brand bookInternship CallMotion Design · VideoMonkalaBrand Identity · Brand bookFirstDoorBrand IdentityUptecBrand IdentityEstrellaBrand Identity · Brand bookBrainLayer AIBrand IdentityCurebaePitch Decks · Pitch deckMomoraPitch Decks · Pitch deckNexSpark LaunchLaunch Videos · VideoNexSpark Scroll to BuildLaunch Videos · VideoNexSpark TeamSparkMotion Design · VideoDesign, Development, MarketingLaunch Videos · VideoReading Personality QuizMotion Design · VideoBlood Donor DirectoryWeb Design · Case studyArogWeb Design · Case study

Have something worth building?

Tell us what you're working on. Let's figure out where we can help.

Start a project