top of page
Scintillant Transparent.png

2023

Scintillant Ventures

Website Design

Overview

Scintillant Ventures is a Vancouver-based startup building digital tools for K–12 educators. The company needed a website that communicated its mission and product value, especially to North American teachers seeking better ways to manage lesson planning.

​

I led the end-to-end website design, from wireframes to final development in WIX, creating a clean, scalable platform that balances brand clarity with educator-focused usability.

My Role

Branding, Wireframing, Prototyping, Website Development on WIX

Tools

Figma, WIX

Site Architecture

Site maps

Before designing screens, I mapped out the site structure to support clear user flow and fast information access—especially for time-pressed educators.

​

The final navigation included:

  • Home: Company introduction

  • Who We Are: Team and values

  • Our Solutions: Product overviews (e.g. Classroom Studio)

  • Blog: Insights and updates

  • Contact: Inquiries from teachers, schools, or partners

​

This structure kept product information discoverable and aligned with user expectations.

Site Map.png

Wireframing

Wireframes 1.png

I started with low-fidelity wireframes to define layout, content zones, and navigation patterns. My focus was on:

​

  • Making key CTAs (like “Learn More” or “Try Now”) visible but unobtrusive

  • Structuring content to clearly explain products like Classroom Studio

  • Designing for responsiveness from the beginning

During this stage, I also noticed content redundancy between the Who We Are and Product pages. I revised the Who We Are layout from horizontal blocks to a vertical structure to improve scanability and better fit the content.

​

These wireframes helped align the team around structure before moving into detailed visuals.

Wireframes 2.png

Mockups

Mockups 1.png

Building on the wireframes, I created high-fidelity mockups to explore visual hierarchy, brand application, and layout balance. Once real content and brand elements were added, I iterated on:

​

  • Color usage and image placement to avoid visual overload

  • Text alignment and spacing for readability across devices

  • Section rhythm—ensuring no part of the page felt too dense or empty

One major update in this phase:


The Our Solutions page felt too long, with multiple products stacked vertically. I redesigned it using horizontal carousel cards for each product. I also aligned the Product Page styling with the Our Solutions banner, creating a smoother visual transition between sections.

​

This round sharpened the site’s visual clarity while keeping usability front and center.

Mockup 2.png

Final Design

The final design prioritized clarity and scalability. I built a fully responsive site in WIX, using structured layouts and minimal visual noise to support fast comprehension.

​

Key design choices included:

  • Responsive grids for desktop, tablet, and mobile

  • Clear content hierarchy with consistent typography and spacing

  • Simple CTAs and intuitive flow for time-sensitive users

SV Webiste_Compressed.gif

Style & Components

Style Guide

To establish a clear visual identity, I first developed a focused style guide that defined the tone and brand presence of the site:

  • Logo: Clean and recognizable, reflecting both professionalism and approachability

  • Color Palette: Soft blues and neutrals—calm, trustworthy, and easy on the eyes

  • Typography: Screen-friendly fonts with strong contrast and legibility across devices

 

The goal was to create a visual system that felt modern but approachable—especially for educators who value clarity over flash.

UI Kit

With the visual style defined, I built a UI kit of reusable components to ensure layout consistency and ease of future updates:

​

  • Buttons (primary/secondary): Designed with clear hierarchy and ample tap area

  • Forms: Clean, accessible input fields for contact and lead generation

  • Navigation Tabs & Menus: Simple, responsive, and screen-reader friendly

  • Cards: Used in blog previews and product highlights, with consistent spacing and icon usage

​

This component library made it easy to maintain visual consistency and build new pages without starting from scratch.

UI Kit.png

Reflection

This project taught me how to balance branding and usability—especially in content-heavy sites. I learned to:

  • Design systems that scale with a growing product

  • Build flows around how users actually navigate and make decisions

  • Stay flexible through late-stage content shifts

 

Clarity, not visual flash, was the right choice for an audience that values function above all.

 More projects 
  • LinkedIn

© 2025 June Shi

bottom of page